將Three.js渲染爲div元素

我正在使用Three.js。擁有一個帶有兩個div元素的html網站，是否可以在一個div元素中渲染？將Three.js渲染爲div元素

HTML代碼：

<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>

我想渲染到城市格。

three.js所代碼：

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); 
    } 

    //... 
},

到目前爲止..

來源

2012-04-26 MrGreen

您好，我更新了我的第一篇文章。 – MrGreen 2012-04-27 07:56:04

相反的：

container = document.createElement('div');

用途：

container = document.getElementById('city');

來源

2012-04-27 07:24:42

謝謝，此刻我不再使用容器，但沒有爲此工作。 – MrGreen 2012-04-27 07:57:53

很難說。使用調試器（F12）。檢查你從'document.getElementById（「city」）'得到了什麼。關於你原來的問題，關於渲染一個div，看看這個例子：http://jsfiddle.net/eLudu/ – 2012-04-27 08:21:26

上面的提琴不適合我，胡安。只需顯示一個沒有任何內容的邊框。 – 2013-10-24 17:20:50

將Three.js渲染爲div元素

回答

相關問題