gpt4 book ai didi

javascript - Three.js 中带有线框的立方体

转载 作者:行者123 更新时间:2023-12-03 08:01:33 25 4
gpt4 key购买 nike

我对 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/

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