three.js所Hello World示例：帆布不會呈現

我試圖讓這個世界你好例如我自己的電腦上運行：http://jsfiddle.net/GKCx6/three.js所Hello World示例：帆布不會呈現

我做了迄今可以在這裏找到我的努力：https://dl.dropbox.com/u/2070405/wtf/index.html

一切似乎都很好，除了沒有任何東西呈現的事實。我如何處理調試呢？到目前爲止，我已經使用過螢火蟲。

這是index.html的內容：

<!doctype html> 
<html> 
    <head> 
     <title>learningthree.js boiler plate for three.js</title> 
     <meta charset="utf-8"> 
    </head> 
<body> 
    <!-- three.js container --> 
     <div id="container"></div> 
    <!-- info on screen display --> 

</body> 
<script src="three.js"></script> 
<script src="main.js"></script> 
</html>

這是main.js的內容：

// RequestAnimationFrame.js: 
if (!window.requestAnimationFrame) { 

    window.requestAnimationFrame = (function() { 

     return window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     function(callback, element) { 

      window.setTimeout(callback, 1000/60); 

     }; 

    })(); 

} 


// Hello World1 from https://github.com/mrdoob/three.js 

var camera, scene, renderer, 
    geometry, material, mesh; 

init(); 
//console.log("renderer defined? ", renderer); 
animate(); 

function init() { 

    camera = new THREE.Camera(75, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 1000; 

    console.log("THREE.Scene available? ", THREE.Scene); 
    scene = new THREE.Scene(); 
    console.log("scene created? ", scene); 

    geometry = new THREE.CubeGeometry(200, 200, 200); 
    material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); 

    mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh); 

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

    container = document.getElementById("container"); 
    container.appendChild(renderer.domElement); 

    } 

    function animate() { 

     // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility. 
     requestAnimationFrame(animate); 
     console.log("animate in action"); 
     render(); 

    } 

    function render() { 

     mesh.rotation.x += 0.01; 
     mesh.rotation.y += 0.02; 
     console.log("renderer in action"); 
     renderer.render(scene, camera); 

    }

來源

2012-10-20 loldrup

您正在複製代碼適用於舊版本的three.js所的。從這裏的three.js zip版本庫下載您的示例：https://github.com/mrdoob/three.js。

有關更新的小提琴，看jsfiddle.net/GKCx6/142/

來源

2012-10-20 13:40:12 WestLangley

你的意思是_git_庫？ – Tapio

如果你願意，你可以自己分叉。如果你不想這樣做，你可以通過點擊'zip'按鈕來下載倉庫作爲zip文件。 – WestLangley

three.js所Hello World示例：帆布不會呈現

回答

相關問題