three.js你好世界的例子：畫布不渲染
[英]three.js hello world example: canvas doesn't render
問題描述
我試圖在我自己的計算機上運行這個hello world示例： http ： //jsfiddle.net/GKCx6/
到目前為止，我已經做了很多努力： https ： //dl.dropbox.com/u/2070405/wtf/index.html
一切似乎工作正常，除了沒有任何渲染的事實。 我該如何調試呢？ 到目前為止我使用過firebug。
這是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 );
}
1 個解決方案
解決方案1
3 已采納 2012-10-20 13:40:12
您正在復制適用於舊版本three.js的代碼。 從這里的three.js zip存儲庫下載您的示例： https ： //github.com/mrdoob/three.js 。
有關更新的小提琴，請參閱jsfiddle.net/GKCx6/142/
Three.js不渲染材質
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.