Three.js：探索STL与OBJ模型加载的实战方法

本文档主要介绍了如何在Three.js中使用JavaScript加载两种常见的3D模型格式：STL（标准三角格式）和OBJ（对象文件格式）。Three.js是一个广泛应用于WebGL的JavaScript库，它提供了一套强大的工具来创建、渲染3D场景。 首先，我们来看STL格式的加载方法。创建一个`THREE.STLLoader`实例，并为其添加一个加载完成事件监听器。当模型加载成功时，会触发此事件。在这个回调函数中，我们获取到加载的几何体`geometry`，并为它创建一个`THREE.MeshPhongMaterial`，这是一种具有环境光、颜色和高光效果的材料。接着，我们创建一个新的`THREE.Mesh`对象，设置其位置、旋转和缩放，以及阴影相关的属性。最后，将这个模型添加到场景中。 ```javascript var loader = new THREE.STLLoader(); loader.addEventListener('load', function (event) { var geometry = event.content; var material = new THREE.MeshPhongMaterial({ ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 }); var mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, -0.25, 0.6); mesh.rotation.set(0, Math.PI / 2, 0); mesh.scale.set(0.5, 0.5, 0.5); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); }); loader.load('test.stl'); ``` 对于OBJ格式，我们需要使用`THREE.OBJLoader`。同样，加载完成后，我们处理加载的`loadedMesh`对象，这是一个包含多个子网格的集合。我们遍历这些子网格，设置统一的材质，并计算它们的面法线和顶点法线。然后，我们调整模型的缩放、旋转，并将其添加到场景中。 ```javascript var loader = new THREE.OBJLoader(); loader.load('fll.obj', function (loadedMesh) { var material = new THREE.MeshLambertMaterial({ color: 0x5C3A21 }); loadedMesh.children.forEach(function (child) { child.material = material; child.geometry.computeFaceNormals(); child.geometry.computeVertexNormals(); }); var mesh = loadedMesh; mesh.scale.set(1, 1, 1); mesh.rotation.x = -0.3; scene.add(loadedMesh); }); ``` 在实际开发中，加载3D模型是创建交互式3D内容的关键步骤。通过理解并熟练运用Three.js提供的这两种模型加载方式，开发者能够轻松地在Web页面上展示和操作复杂的3D模型。同时，注意模型的加载优化，如预加载、压缩和异步加载，以提高用户体验。