threejs加载STL文件
效果：
加载 stl 格式的文件需要设置材质 material；
stl、obj 都是静态模型，不可以包含动画，
fbx 除了包含几何、材质信息，可以存储骨骼动画等数据。
代码：
- 加载STL文件
-
requestAnimationFrame()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta >
<title>.stl格式模型加载</title>
<script src="../three.js"></script>
<script src="../OrbitControls.js"></script>
<script src="../STLLoader.js"></script>
</head>
<body>
<script>
let N = 128;
let analyser = null;
// 1，创建场景
var scene = new THREE.Scene();
// 创建STL加载器
var stlLoader = new THREE.STLLoader();
stlLoader.load('./LH1223链条组装 - 短链条螺栓.STL',geometry => {
var material = new THREE.MeshPhongMaterial({color:0xDDDADA});
var mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
})
// 3,创建灯光
var point = new THREE.PointLight(0xffffff);
point.position.set(200,200,200);
scene.add(point);
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(200,200,-200);
scene.add(point2);
// 4,创建相机对象
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -2000, 2000);
camera.position.set(100, 100, 120);
camera.lookAt(scene.position);
// 5，创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var axes = new THREE.AxesHelper(500);
scene.add(axes);
render();
</script>
</body>
</html>
原文地址 blog.csdn.net
