阅读 85

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运行项目,特别注意,此时已经启动成功,启动地址在箭头标识的位置 image.png 界面如下图所示 image.png 点击examples可以在本地查看对应案例演示,模型文件已存在对应项目中,在项目代码中的examples下的文件中可以修改对应的代码进行调试,在此边调试边查看对应的demo变化,此处调试的好处已经不言而喻了,代码中有不清楚的api可以在(传送门)快速查找 image.png

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);
    }
}
复制代码
文章分类
前端
文章标签