threejs总结及使用threejs渲染stl模型案例

Threejs是一款WebGL三维引擎，平常看到的3D看房，汽车3D模型都可以通过该技术实现，Threejs也可以用来做游戏开发，非常火的微信小游戏跳一跳就是使用Three.js引擎开发的。

thressjs总结

对于Threejs基础以及api的学习：

第一种途径：阅读Thressjs在线文档（传送门）的方式，里面有对Threejs中的材质，光源，相机，模型对象... 的详细讲解，同时可以查看对应的案例（推荐）
第二种途径：借助Threejs开发指南这本书，里面介绍了同第一种途径类似的讲解，此处的讲解会更加详细一点，同时有其相关的案例源码（传送门）结合更多案例代码逐步分析尝试
个人觉得此处非常非常非常重要，了解api只是基本，重要的还是实践，刚学threejs的时候，大概率觉得代码没问题，一运行就不是那样的了，在此推荐threejs的案例（传送门），其源码地址（此处地址为github地址，项目克隆下来大约1.4G左右，文件很大，慎重克隆！）

项目克隆下来以后 npm run start运行项目，特别注意，此时已经启动成功，启动地址在箭头标识的位置界面如下图所示点击examples可以在本地查看对应案例演示，模型文件已存在对应项目中，在项目代码中的examples下的文件中可以修改对应的代码进行调试，在此边调试边查看对应的demo变化，此处调试的好处已经不言而喻了,代码中有不清楚的api可以在（传送门）快速查找

threejs渲染stl文件的核心代码

import { MeshPhongMaterial,Mesh,Scene,WebGLRenderer,PerspectiveCamera,Object3D,Vector3,SpotLight, Color,}from "three";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";

// 此处只放threejs渲染代码
render(){
    // 渲染器
    let webGLRenderer = new WebGLRenderer();
    webGLRenderer.dispose();
    // 设置画布的宽高
    webGLRenderer.setSize(1000,600);
    // 阴影效果
    webGLRenderer.shadowMapEnabled = true;
    // 设置背景颜色
    webGLRenderer.setClearColor(new Color("rgb(249, 249, 249");

    // 相机
    // PerspectiveCamera(从摄像机到底部的距离，摄像机视锥体宽/长比，摄像机视锥体近端面)
    let camera = new PerspectiveCamera(10, 100 / 60, 0.1, 4000);
    camera.position.set(300, 300, 300);
    // Vector3 三维向量 x,y,x的位置
    camera.lookAt(new Vector3(0, 0, 0));

    // 聚光灯（十六进制光照颜色，光照强度）
    let spotLight = new SpotLight(0xbd23d6, 0.8);
    spotLight.position.set(300, 300, 300);

    // 场景
    let scene = new Scene();
    scene.add(spotLight);
    document.getElementById('stlId').appendChild(webGLRenderer.domElement);

    // 加载stl文件所需loader
    let loader = new STLLoader();
    // Three.js中大部分对象的基类，提供了一系列的属性和方法来对三维空间中的物体进行操纵
    let group = new Object3D();

    loader.load(fileUrl, function (geometry) {
        console.log(geometry);
        // 网格phong材质(创建光亮物体)
        let mat = new MeshPhongMaterial({ color: 0x666666 });
        // 表示基于以三角形为polygon mesh（多边形网格）的物体的类。 同时也作为其他类的基类
        group = new Mesh(geometry, mat);
        group.rotation.x = 0.1 * Math.PI;
        scene.add(group);
    });
    render();
    function render() {
        if (group) {
            group.rotation.z += 0.003;
        }
        // window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，
        // 并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，
        // 该回调函数会在浏览器下一次重绘之前执行
        window.requestAnimationFrame(render, 50);
        webGLRenderer.render(scene, camera);
    }
}