以下是一个基本的three.js三维场景,使用HTML和JavaScript编写。下面的代码创建了一个简单的立方体并呈现在窗口中:
<!DOCTYPE html> <html> <head> <title>Three.js Demo</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="https://dm.qunapu.com/threejs/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); // 创建立方体 var geometry = new THREE.BoxGeometry(); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var 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>
在这个例子中,我们创建了一个简单的场景,其中包含一个绿色立方体并通过渲染器呈现在窗口中。下面是代码中的每个组件的解释:
- `THREE.Scene()`: 用于创建场景对象。
- `THREE.PerspectiveCamera(fov, aspect, near, far)`: 用于创建透视投影相机。fov参数是相机的视角,aspect参数是视口的宽高比,near参数是相机到近平面的距离,far参数是相机到远平面的距离。
- `THREE.WebGlRenderer()`: 用于创建WebGL渲染器,它将呈现场景和相机中的三维对象。
- `THREE.BoxGeometry()`: 用于创建一个立方体几何体对象,它由6个面组成。
- `THREE.MeshBasicMaterial({ color: 0x00ff00 })`: 用于创建mesh基础材质对象,可以设置颜色或贴图等特性。
- `THREE.Mesh(geometry, material)`: 用于将几何体与材质组合成一个mesh对象。
- `scene.add(cube)`: 将mesh对象添加到场景中。
- `camera.position.z = 5`: 将相机的z轴位置设置为5,使其与立方体的距离为5个单位长度。
- `renderer.render(scene, camera)`: 这是我们常规地将场景和镜头传递给渲染器来呈现场景的方式。
- `animate()`: 创建一个递归调用函数,在渲染每一帧时可以执行额外的逻辑代码。在这个例子中,我们旋转立方体并再次渲染场景的方法。
上面这些代码将显示一个绿色的立方体,并且当您在窗口中转动时,立方体也会相应地旋转。注意,示例仅用于显示基本用例,three.js具有更广泛的工具箱,可以使用光源、纹理、动画、特效等扩展示例。
效果图截图:
专题推荐: