Question

我是tri.js的新手，也是Javascript的新手。我在旋转立方体threejs.org上制作了“入门”项目，没有任何问题。但是，当我尝试添加线框时，项目停止工作。

你可以帮我弄清楚出了什么问题吗？代码段如下所示。

谢谢！

<html> 
<head> 
<title>My first Three.js app</title> 
<style> 
body { margin: 0; } canvas { width: 100%; height: 100% } 
</style> 
</head> 
<body>
<script src="http://threejs.org/build/three.min.js"></script> 
<script> 
var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 ); 
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); 
object = new THREE.Mesh( geometry, material ); 

wireframe = new THREE.WireframeHelper( object, 0x00ff00 );
 
scene.add( object ); 
scene.add( wireframe );

camera.position.z = 5; 

var render = function () { 
requestAnimationFrame( render ); 
cube.rotation.x += 0.05; 
cube.rotation.y += 0.05; 
renderer.render(scene, camera); 
}; 

render(); 
</script> 
</body> 
</html>

Answer 1

您只需要更新变量名称，当您将其更改为cube时，您仍然会在渲染循环中引用object。您是否检查过JavaScript控制台是否有错误？我也把相机移回了镜头，因此它不在立方体内。

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 ); 
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); 
object = new THREE.Mesh( geometry, material ); 
wireframe = new THREE.WireframeHelper( object, 0x00ff00 );

scene.add( object );
scene.add( wireframe );

camera.position.z = 15; 

var render = function () { 
requestAnimationFrame( render ); 
object.rotation.x += 0.05; 
object.rotation.y += 0.05; 
renderer.render(scene, camera); 
}; 

render();

html, body, canvas { margin: 0; padding: 0; display: block; width: 100%; height: 100% }

<html> 
<head> 
<title>My first Three.js app</title>
</head> 
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script> 
</body> 
</html>

立方体与three.js中的线框

1 个答案: