首页three.js给我一个示例项目的代码

three.js给我一个示例项目的代码

时间: 2024-02-23 13:59:07 浏览: 65

以下是一个简单的three.js示例项目的代码，用于在网页中显示一个旋转的立方体： ```html <!DOCTYPE html> <html> <head> <title>Three.js Example</title> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script> // 创建场景、相机和渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); // 创建立方体 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); // 移动相机的位置 camera.position.z = 5; // 渲染场景 function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } animate(); </script> </body> </html> ``` 这个示例项目创建了一个场景、一个相机和一个渲染器，并在场景中添加了一个绿色的立方体。随着时间的推移，立方体会不断旋转。你可以根据自己的需要修改这个代码，创建不同的场景和物体。

阅读全文