demo案例
STLExporter 是用于将 Three.js 场景中的几何体数据导出为 STL 格式的类。下面是关于 STLExporter 的入参、出参、方法和属性的讲解：
入参 (Parameters):
- scene:
THREE.Scene类型的参数，表示要导出为 STL 格式的 Three.js 场景对象。
出参 (Return Value):
- string:
parse方法返回一个字符串，该字符串包含了表示给定场景中几何体数据的 STL 格式内容。
方法 (Methods):
-
constructor(): 构造函数，用于创建
STLExporter实例。 -
parse(scene: THREE.Scene): string:
parse方法用于将给定的 Three.js 场景对象转换为 STL 格式的字符串表示。它接受一个THREE.Scene实例作为参数，表示要导出的场景。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - exporter - stl</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - stl
</div>
<!-- 使用 importmap 定义模块导入路径 -->
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<!-- 导入 Three.js 和相关模块 -->
<script type="module">
// 导入所需的 Three.js 模块
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { STLExporter } from 'three/addons/exporters/STLExporter.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 定义场景、相机、渲染器、导出器和网格变量
let scene, camera, renderer, exporter, mesh;
// 定义导出参数对象，包含不同格式的导出方法
const params = {
exportASCII: exportASCII,
exportBinary: exportBinary
};
init(); // 初始化
animate(); // 启动渲染循环
function init() {
// 创建透视相机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(4, 2, 4);
// 创建场景，设置背景和雾效
scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
scene.fog = new THREE.Fog(0xa0a0a0, 4, 20);
// 创建 STLExporter 实例
exporter = new STLExporter();
// 添加光源和地面
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 3);
hemiLight.position.set(0, 20, 0);
scene.add(hemiLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
directionalLight.position.set(0, 20, 10);
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 2;
directionalLight.shadow.camera.bottom = -2;
directionalLight.shadow.camera.left = -2;
directionalLight.shadow.camera.right = 2;
scene.add(directionalLight);
// 创建地面和网格
const ground = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshPhongMaterial({ color: 0xbbbbbb, depthWrite: false }));
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);
const grid = new THREE.GridHelper(40, 20, 0x000000, 0x000000);
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add(grid);
// 创建导出网格的几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
// 创建网格对象并添加到场景中
mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.position.y = 0.5;
scene.add(mesh);
// 创建渲染器并添加到页面中
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0);
controls.update();
// 监听窗口大小变化事件
window.addEventListener('resize', onWindowResize);
// 创建 GUI 控件
const gui = new GUI();
gui.add(params, 'exportASCII').name('Export STL (ASCII)');
gui.add(params, 'exportBinary').name('Export STL (Binary)');
gui.open(); // 默认展开 GUI
}
// 窗口大小变化时更新相机和渲染器大小
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
// 导出为 ASCII 格式
function exportASCII() {
const result = exporter.parse(mesh);
saveString(result, 'box.stl');
}
// 导出为二进制格式
function exportBinary() {
const result = exporter.parse(mesh, { binary: true });
saveArrayBuffer(result, 'box.stl
');
}
// 创建并保存下载链接
const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
// 保存文件
function save(blob, filename) {
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
}
// 保存字符串为文件
function saveString(text, filename) {
save(new Blob([text], { type: 'text/plain' }), filename);
}
// 保存二进制数组为文件
function saveArrayBuffer(buffer, filename) {
save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
}
</script>
</body>
</html>
本内容来源于小豆包，想要更多内容请跳转小豆包 》
