HTML 5和three.js代碼不會在網頁上顯示任何東西

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>3d cylinder</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       font-family: Monospace; 
       background-color: #f0f0f0; 
       margin: 0px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 

     <script src="three.min.js" type="text/javascript"></script> 

     <script src="Stats.js" type="text/javascript"></script> 

     <script> 

      var container, stats; 

      var camera, scene, renderer; 

      var cylinder; 

      var targetRotation = 0; 
      var targetRotationOnMouseDown = 0; 

      var mouseX = 0; 
      var mouseXOnMouseDown = 0; 

      var windowHalfX = window.innerWidth/2; 
      var windowHalfY = window.innerHeight/2; 

      init();   

      function init() { 

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

       var info = document.createElement('div'); 
       info.style.position = 'absolute'; 
       info.style.top = '10px'; 
       info.style.width = '100%'; 
       info.style.textAlign = 'center';     
       container.appendChild(info);    

       camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
       camera.position.y = 150; 
       camera.position.z = 500; 

       scene = new THREE.Scene(); 

       // cylinder 
       var materials = []; 
       for (var i = 0; i < 6; i ++) { 

        materials.push(new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })); 

       } 
       cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), materials); 
        cylinder.overdraw = true; 
        scene.add(cylinder); 

       renderer = new THREE.CanvasRenderer(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 

       container.appendChild(renderer.domElement); 

       stats = new Stats(); 
       stats.domElement.style.position = 'absolute'; 
       stats.domElement.style.top = '0px'; 
       container.appendChild(stats.domElement); 

       window.addEventListener('resize', onWindowResize, false); 

      } 

      function onWindowResize() { 

       windowHalfX = window.innerWidth/2; 
       windowHalfY = window.innerHeight/2; 

       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 

       renderer.setSize(window.innerWidth, window.innerHeight); 

      } 

     </script> 

    </body> 
</html>

我想通過以下代碼繪製使用HTML5和three.js的3d柱面。我正在使用Canvas渲染並在Google Chrome瀏覽器上對其進行測試。在控制檯上，它正在發出「Three.CanvasRenderer 50」。可能是什麼原因，這個消息是什麼意思？HTML 5和three.js代碼不會在網頁上顯示任何東西

來源

2012-09-11 chako

是否必須添加動畫在three.js所的場景？ – chako

不，但我認爲你需要至少調用一次render，如：renderer.render（scene，camera）; – sq2

我添加了'renderer.render（scene，camera）;'最後在init（）中，但它仍然不起作用。 – chako

試試以下的「Hello world」的例子之一：

mrdoob.com

Hello worlds

來源

2012-09-11 20:46:22 Fract

的問題是與材料的初始化。看起來你正試圖將多種材料映射到圓柱體上。也許你從一個立方體例子把這個片斷：

var materials = []; 
for (var i = 0; i < 6; i ++) { 
    materials.push(new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })); 
}

有問題的「6」是適合於立方體，但不正確的氣缸。我並不完全確定圓柱體的陣列結構，但我認爲6不是用2500（50x50）面創建的圓柱體的正確材料數量。你將不得不研究氣缸材料的格式。 Here is a discussion on github讓你開始。

通過這樣做：

cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 10, 10, false), new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })); 
cylinder.overdraw = true; 
scene.add(cylinder);

你應該看到了你的汽缸。

注意，你也應該將相機添加到場景：

scene.add(camera);

來源

2012-09-11 23:28:06 sq2

HTML 5和three.js代碼不會在網頁上顯示任何東西

回答

相關問題