threeJs 加载stl 3D模型

<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 {
        name: 'ThreeTest',
        data() {
            return {
                camera: null,
                scene: null,
                renderer: null,
                mesh: null,
                controls: null,
            }
        },
        mounted() {
            this.init()
            this.animate()
            this.createControls();
        },
        methods: {
            init: function() {
                let container = document.getElementById('container')
                this.scene = new Three.Scene()
                const loader = new STLLoader()
                // 把模型导入STLLoader加载器中
                loader.load('../../static/a.stl', geometry => {
                    console.log('geometry:', geometry);
                    //创建一个BufferGeometry函数
                    const geometry1 = new Three.BufferGeometry();
                    // geometry.attributes.position.array这个是获取模型的坐标  第二个参数: 3是三个数为一个坐标就是一个顶点
                    geometry1.setAttribute('position', new Three.BufferAttribute(geometry.attributes
                        .position.array, 3))
                    // const material1 = new Three.MeshBasicMaterial({
                    //     color: 0x00ff00,
                    //     side: 'point'
                    // })
                    const material1 = new Three.MeshLambertMaterial({
                      color: 0x00ff00,//0xff0000设置材质颜色为红色
                      transparent:true,//开启透明
                      opacity:0.96,//设置透明度
                    }); 
                    geometry.center();
                    const mesh = new Three.Mesh(geometry, material1);
                    mesh.position.set(0, 0, 0)
                    mesh.scale.set(.2, .2, .2)
                    mesh.position.set.x = 5 * Math.PI;//模型摆正   用这个就不用上面的position
                    mesh.castShadow = true;
                    this.scene.add(mesh);
                })
                this.camera = new Three.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 100)
                // this.camera.position.z = 0.3
                this.camera.position.set(-50,0,50)
                // 设置照相机的朝向
                this.camera.lookAt(-50,-50,-50)
                // const directionalLight = new Three.DirectionalLight(0xFFFFFF,3.0);
                // directionalLight.position.set(80, 100, 50);
                // this.scene.add(directionalLight);
                var hemiLight = new Three.HemisphereLight(0xFFFFFF, 1)
                hemiLight.position.set(100, 100, 100)
                this.scene.add(hemiLight)

                this.renderer = new Three.WebGLRenderer({
                    antialias: true
                })
                this.renderer.setSize(container.clientWidth, container.clientHeight)
                container.appendChild(this.renderer.domElement)
            },
            animate: function() {
                requestAnimationFrame(this.animate)
                // this.mesh.rotation.x += 0.01
                // this.mesh.rotation.y += 0.02
                this.renderer.render(this.scene, this.camera)
            },
            // 鼠标交互
            createControls() {
                // 鼠标的交互
                this.controls = new OrbitControls(this.camera, this.renderer.domElement)
            },
        },
    }
</script>
<style scoped>
    #container {
        height: 100vh;
    }
</style>