2013-08-01 128 views
0

我只是新的WebGL和three.js所什麼,我剛剛從採摘的的jsfiddle例如,瀏覽器不渲染three.js所

http://jsfiddle.net/BlackSRC/XWCRM/1/

但是當我測試了一下,我「M卻一無所獲, 代碼看起來是這樣的:

<!DOCTYPE html> 
<html> 


<head> 
    <title>ThreeJS</title> 

</head> 
<script src="~/Scripts/jquery-1.9.1.js"></script> 
<script src="~/Scripts/mrdoob-three.js-2524525/build/three.js"></script> 
<script> 
    function onLoadComplete() { 
     init(); 
     animate(); 
    } 

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



    function init() { 

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

     scene = new THREE.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(window.innerWidth, window.innerHeight); 

     document.body.appendChild(renderer.domElement); 

    } 

    function animate() { 

     // note: three.js includes requestAnimationFrame shim 
     requestAnimationFrame(animate); 

     mesh.rotation.x += 0.01; 
     mesh.rotation.y += 0.02; 

     renderer.render(scene, camera); 

    } 
</script> 

<body onload="onLoadComplete();"> 

我錯過了什麼嗎? 感謝您的幫助!

+0

參考three.js所指示:https://github.com/mrdoob/three.js – WestLangley

+0

呈現在Chrome中,如果您使用Internet Explorer使用其他瀏覽器。 – supernova

+0

我有這個鏈接打開下一個主題: https://github.com/mrdoob/three.js/issues/3710 和他們說,我應該問票數,cuz它是不是一個錯誤 我嘗試以鉻和歌劇,但它仍然不起作用:( – Bafla13

回答

0

你的代碼沒有問題,但你使用本地的js文件。所以rulusts JS代碼運行的身體DOM渲染之前,所謂當document.body.appendChild(renderer.domElement);將導致錯誤:

test.html:45 Uncaught TypeError: Cannot read property 'appendChild' of null(…)

,並導致空白頁。 但是,當我測試與遠程js文件不存儲在本地,它運作良好。所以爲了避免這個問題,讓js在dom之後加載。

下面是代碼,我只是在js代碼之前的主體,並使用在線js文件。這裏把身體後js代碼也可以工作,因爲js從遠程加載,當js運行時,身體已經呈現。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>ThreeJS</title> 
 

 
<body onload="onLoadComplete();"> 
 
</head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://threejs.org/build/three.js"></script> 
 
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script> 
 
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script> 
 
<script> 
 
    function onLoadComplete() { 
 
     init(); 
 
     animate(); 
 
    } 
 

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

 

 

 
    function init() { 
 

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

 
     scene = new THREE.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(window.innerWidth, window.innerHeight); 
 

 
     document.body.appendChild(renderer.domElement); 
 

 
    } 
 

 
    function animate() { 
 

 
     // note: three.js includes requestAnimationFrame shim 
 
     requestAnimationFrame(animate); 
 

 
     mesh.rotation.x += 0.01; 
 
     mesh.rotation.y += 0.02; 
 

 
     renderer.render(scene, camera); 
 

 
    } 
 
</script> 
 

 
</html>