three.js使用
时间: 2024-07-23 09:01:29 浏览: 56
Three.js是一个基于WebGL的JavaScript库,用于在浏览器中创建复杂的3D图形和交互式场景。它是构建跨平台3D应用程序的理想工具,无需底层编程知识。以下是Three.js的基本使用流程:
1. **环境准备**:首先在HTML中引入Three.js库,通常通过CDN获取。
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
```
2. **创建场景**:在JavaScript中初始化一个`THREE.Scene`对象,这是所有3D元素的容器。
```javascript
const scene = new THREE.Scene();
```
3. **创建相机**:`THREE.PerspectiveCamera`用于设置视口的视角。
```javascript
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 设置初始位置
```
4. **创建渲染器**:`THREE.WebGLRenderer`负责将3D内容渲染到DOM元素中。
```javascript
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
```
5. **加载几何体和材质**:如球体、立方体、纹理等。
```javascript
const geometry = new THREE.BoxGeometry(); // 创建几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建材质
const cube = new THREE.Mesh(geometry, material); // 组合成3D物体
scene.add(cube);
```
6. **动画和渲染循环**:通常使用requestAnimationFrame方法来持续更新渲染。
```javascript
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```