Renderizar Three.js en un elemento div

Estoy usando Three.js. Tener un sitio html con dos elementos div, ¿es posible renderizar solo en un elemento div?Renderizar Three.js en un elemento div

HTML Code:

<body> 
    <div id="twocols"> 
     <div id="detailinfo"> 
      <span class="c">Detailinformationen:</span><br/> 
      <span id="tb" class="g"></span><br/> 
      <span class="c">Grafiken:</span> 
      <div id="chart"></div> 
      <div id="chart2"></div> 
     </div> 
     <div id="city"> 
     </div>     
    </div>  
</body>

Quiero rendir en el div ciudad.

Three.js Código:

function initScene() { 

      //container = document.createElement('div'); 
      //document.body.appendChild(container); 

      scene = new THREE.Scene(); 
      createCamera(); 
      createLight(); 
      createProjector(); 
      createRenderer(); 
      createControls(); 

      //... 
     }

createRenderer:

function createRenderer() { 
      renderer = new THREE.WebGLRenderer({ 
       antialias : ANTIALIAS, 
       preserveDrawingBuffer : DRAWINGBUFFER 
      }); 

      renderer.setSize(document.getElementById("city").offsetWidth, document.getElementById("city").offsetHeight); 
      document.getElementById("city").appendChild(renderer.domElement); 

      THREEx.Screenshot.bindKey(renderer); // add the printscreen shortcut with "p" 
     }

CreateControls:

function createControls() { 
      controls = new InteractionManager(camera, document.getElementById("city")); 
      //... 
     }

InteractionManager.js

initialize: function(camera, domElement) { 

    this.object = camera; 
    this.domElement = (domElement !== undefined) ? domElement : document; 
    this.target = new THREE.Vector3(0, 0, 0); 
    //this.chartManager = new ChartsManager(); 

    if (this.domElement === document) { 
     this.viewHalfX = window.innerWidth/2; 
     this.viewHalfY = window.innerHeight/2; 
    } else { 
     this.viewHalfX = this.domElement.offsetWidth/2; 
     this.viewHalfY = this.domElement.offsetHeight/2; 
     //alert(domElement.offsetWidth + " " + domElement.offsetHeight); 
     //this.domElement.setAttribute('tabindex', -1); 
    } 

    //... 
},

hasta ahora ..

Fuente

2012-04-26 MrGreen

Hola, he actualizado mi primer post. – MrGreen

En lugar de:

container = document.createElement('div');

Uso:

container = document.getElementById('city');

Fuente

2012-04-27 07:24:42

gracias, por el momento ya no uso el contenedor, pero no funciona así. – MrGreen

Es difícil de decir. Use el depurador (F12). Compruebe lo que obtiene de 'document.getElementById (" city ")'. Y sobre su pregunta original, sobre la representación en un div, mire este ejemplo: http://jsfiddle.net/eLudu/ –

El violín de arriba no funciona para mí, Juan. Solo muestra una caja bordeada sin nada en ella. –

Renderizar Three.js en un elemento div

Respuesta

Cuestiones relacionadas