Three.jsをdiv要素にレンダリングする

Three.jsを使用しています。 2つのdiv要素を持つhtmlサイトを持つと、div要素を1つだけレンダリングすることは可能ですか？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>

私は、市内のdivにレンダリングします。

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

の代わりに：

container = document.createElement('div');

用途：

container = document.getElementById('city');

出典

2012-04-27 07:24:42

ありがとう、現時点で私はコンテナをもう使用しないでください。 – MrGreen

難しいです。デバッガ（F12）を使用します。 'document.getElementById（" city "）'から取得したものを確認してください。そして、元の質問について、divでのレンダリングについては、この例を見てください：http://jsfiddle.net/eLudu/ –

上記のフィドルは、私にとってはうまくいきません、Juan。それに何も入っていないボーダーボックスを表示するだけです。 –

Three.jsをdiv要素にレンダリングする

答えて

関連する問題