three.js 加载STL文件

注意：
　　TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js，特别注意引用的路径
比如：
直接代码咯
<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - loaders - 3DS loader</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="/three.js/main.css">
</head>

<body>
    <div id="info">
        <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 3DS loader
    </div>


    <script type="module">


        //注意：
        //TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js，特别注意引用的路径


        import * as THREE from '/three.js/build/three.module.js';
        import { TrackballControls } from '/three.js/jsm/controls/TrackballControls.js';
        import { STLLoader } from '/three.js/jsm/loaders/STLLoader.js';



        var container, controls;
        var camera, scene, renderer;
        init();
        animate();


        function resize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            controls.update();
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }

        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10);
            camera.position.z = 2;
            scene = new THREE.Scene();
            scene.add(new THREE.HemisphereLight());
            var directionalLight = new THREE.DirectionalLight(0xffeedd);
            directionalLight.position.set(0, 0, 2);
            scene.add(directionalLight);


            // ASCII file
            var loader = new STLLoader();
            loader.load('/model1/面.stl', function (geometry) {
                var mat = new THREE.MeshLambertMaterial({ color: 'red' });//{ color: 0x00ffff }
                var mesh = new THREE.Mesh(geometry, mat);
                mesh.rotation.x = -0.5 * Math.PI; //将模型摆正
                mesh.scale.set(0.1, 0.1, 0.1); //缩放
                geometry.center(); //居中显示
                scene.add(mesh);
            });

            
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);
            controls = new TrackballControls(camera, renderer.domElement);
            window.addEventListener('resize', resize, false);
        }

    </script>

</body>
</html>
原文地址：https://www.cnblogs.com/guxingy/p/11906243.html