gpt4 book ai didi

javascript - three.js Hello World 示例 : canvas doesn't render

转载 作者:行者123 更新时间:2023-11-30 13:13:28 26 4
gpt4 key购买 nike

我正在尝试让这个 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 );

}

最佳答案

您正在复制适用于旧版本 three.js 的代码。从此处的 three.js zip 存储库下载示例:https://github.com/mrdoob/three.js .

有关更新的 fiddle ,请参阅 jsfiddle.net/GKCx6/142/

关于javascript - three.js Hello World 示例 : canvas doesn't render,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12987928/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com