threejs 显示stl模型的vue代码 经过我摸索的 每一条代码都有注释 复制粘贴就能用_threejs stl

线图：

点图： 

 面图： 

 点、线、面 （下面的代码被的改了   点、线、面只能显示一个）

第一步： 安装three.js 

npm i three

第二步 粘贴下面的代码  里面很多代码都有注释

<template>
   <div>
     <div id="container"></div>
   </div>
</template>
 
<script>
    import * as THREE from 'three'
    // 引入控制器
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
    // 引入stl加载器
    import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js'
    export default {
        props: {
            // stl文件的数据
            stlData: {
                type: Object,
                default: {
                    //stl文件一定要放在静态文件(publiuc)下
                    url: '/MTTU.stl',
                    // 类型是stl
                    type: 'stl',
                    // 缩放
                    scale: {x: 1, y: 1, z: 1},
                    // 位置
                    position: {x: 0, y: 0, z: 0},
                    // 转轴
                    rotation: {x: 0, y: 0, z: 0},
                    // 材质的颜色
                    materialColor: 0xffffff,
                    // 这个是点的大小
                    dotSize: 0.1,
                    // 需要显示点、线或者面 
                    materialType: 'mesh',//point/line
                    // 这个是双面显示的意思
                    // 如果是单面，从正面看得到，从背面看是透明的
                    side: 'back', //front//back/double
                }
            },
            // 相机的数据
            cameraSet: {
                type: Object,
                default: {
                    // 设置相机的位置
                    camera_position_set: {x: 0, y: 5, z: 5},
                    // 相机的朝向
                    camera_lookAt: {x: 0, y: 0, z: 0},
                }
            }
        },
        data() {
            return{
                // 场景
                scene: null,
                //照相机
                camera: null,
                //渲染器
                renderer: null,
                // 物体
                cube: null,
                // 鼠标交互
                controls: null,
                clock: null,
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                //创建一个转速的  这个我也不知道怎么说
                this.clock = new THREE.Clock()
                //创建场景
                this.createdScene()
                // 引入stl文件
                if(this.stlData) {
                    this.loadSTL(this.stlData)
                }
                // 照相机
                this.createdCamera(this.cameraSet)
                
                // 创建渲染器
                this.createdRenderer()
                //鼠标互动
                this.createControls()
                this.render()
            },
            // 场景
            createdScene() {
                this.scene = new THREE.Scene()
            },
            //引入stl模型
            loadSTL(e) {
                console.log("e", e)
                const loader = new STLLoader()
                // 把模型导入STLLoader加载器中
                loader.load(e.url, geometry => {
                    //创建一个BufferGeometry函数
                    const geometry1 = new THREE.BufferGeometry();
                    // geometry.attributes.position.array这个是获取模型的坐标  第二个参数: 3是三个数为一个坐标就是一个顶点
                    geometry1.setAttribute('position', new THREE.BufferAttribute(geometry.attributes.position.array, 3))
                    
                    if(e.materialType == 'mesh') {
                        var material1 = new THREE.MeshBasicMaterial({ color: e.materialColor || 0xff0000, side: e.side })
                        // 把骨架和材质合成一起构成一个物体  这个是面模型
                        this.cube = new THREE.Mesh(geometry1, material1)
                    }
                    if(e.materialType == 'point') {
                        var material1 = new THREE.PointsMaterial({ color: e.materialColor || 0xff0000, size: e.dotSize })
                        // 把骨架和材质合成一起构成一个物体  这个是点模型
                        this.cube = new THREE.Points(geometry1, material1)
                    }
                    if(e.materialType == 'line') {
                        var material1 = new THREE.LineBasicMaterial({ color: e.materialColor || 0xff0000 });
                        // 把骨架和材质合成一起构成一个物体  这个是线模型
                        this.cube = new THREE.Line(geometry1, material1)
                    }
                    
                    if(e.position) {
                        this.cube.position.set(e.position.x || 0, e.position.y || 0, e.position.z || 0)
                    }
                    if(e.scale) {
                        this.cube.scale.set(e.scale.x || 1, e.scale.y || 1, e.scale.z || 1)
                    }
                    if(e.rotation) {
                        this.cube.rotation.set(e.rotation.x || 0, e.rotation.y || 0, e.rotation.z || 0)
                    }
                    // this.cube.position.set.x = 5 * Math.PI;//模型摆正   用这个就不用上面的position
                    // 把物体添加到场景里面
                    this.scene.add(this.cube)
                    geometry1.center(); //模型居中   否则看不到模型
                })
            },
            
            // 照相机
            createdCamera(e) {
                // 获取照相机的存放节点
                const element = document.getElementById('container')
                const w = element.clientWidth
                const h = element.clientHeight
                this.camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100)
                // 设置照相机的位置
                this.camera.position.set(e.camera_position_set.x, e.camera_position_set.y, e.camera_position_set.z)
                // 设置照相机的朝向
                this.camera.lookAt(e.camera_lookAt.x, e.camera_lookAt.y, e.camera_lookAt.z)
            },
            
            // 渲染器
            createdRenderer() {
                // 获取渲染器的渲染节点
                const element = document.getElementById('container')
                // new一个渲染器
                this.renderer = new THREE.WebGLRenderer()
                // 这个我也不是很清楚
                this.renderer.setSize(element.clientWidth, element.clientHeight)
                // this.renderer.render(this.scene, this.camera)
                // 渲染器的背景颜色   1是亮度吧  我也不是很清楚
                this.renderer.setClearColor(0xcfcfcf, 1) 
                // 把渲染器丢到节点element的儿子里面
                element.appendChild(this.renderer.domElement)
            },
            
            // 鼠标交互
            createControls() {
                // 鼠标的交互
                this.controls = new OrbitControls(this.camera, this.renderer.domElement)
            },
            
            render() {
                const time = this.clock.getElapsedTime()
                if (this.cube) {
                    模型每次z轴转动time
                    this.cube.rotation.z = time
                }
                //把场景和相机放到渲染器里面 
                this.renderer.render(this.scene, this.camera)
                // 循环执行this.render()函数
                requestAnimationFrame(this.render)
            },
        }
    }
</script>
 
<style>
    #container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
</style>