我对 Three.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>最佳答案
您只需要更新变量名称，当您将其更改为object时，您仍然可以在渲染循环中引用cube。您检查过 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>关于javascript - Three.js 中带有线框的立方体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34559656/