three.js 案例
时间: 2024-12-31 10:34:12 浏览: 11
### three.js 示例项目和教程
#### STL 模型加载实例
为了展示如何使用 `three.js` 加载 STL 文件,可以创建一个简单的 HTML 页面来实现这一功能。此过程涉及多个部分的组合:
HTML 部分负责设置场景容器并引入必要的 JavaScript 库[^2]:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Load STL Model</title>
<!-- 引入 Three.js 和 STLLoader -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="js/STLLoader.js"></script>
</head>
<body>
<div id="scene-container"></div>
</body>
<script type="module" src="./main.js"></script>
</html>
```
JavaScript (main.js) 负责初始化渲染器、相机以及加载模型等操作:
```javascript
import * as THREE from 'three';
// 假设 STLLoader 已经通过 script 标签被全局注册
const loader = new THREE.STLLoader();
loader.load('model.stl', function (geometry) {
const material = new THREE.MeshStandardMaterial({ color: 0xff5533, flatShading: true });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 设置光源和其他必要组件...
});
```
上述代码片段展示了基本框架结构,在实际应用中还需要配置光照效果、调整视角位置以及其他交互特性。
#### 创建简单立方体示例
对于初学者来说,构建一个基础几何形状可能是最容易上手的方式之一。以下是用于在浏览器窗口内显示一个静态红色方块所需的具体步骤[^1]:
HTML 结构保持不变,只需修改对应的 JS 文件(main.js),如下所示:
```javascript
import * as THREE from 'three';
function init() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
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);
animate();
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
init();
```
这段脚本定义了一个名为 `init()` 的函数用来完成所有的一次性设定工作;而另一个叫作 `animate()` 函数则不断更新画面帧数以维持动画流畅播放的效果。
阅读全文