首先要安装Three.js

 import * as Three from 'three'

 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

   import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

    import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

    import screenfull from 'screenfull'   全屏需要安装的，如果不做全屏功能就不需要引入

其次模型的位置放入public,再到node_models里面找到Three里面的js，把draco文件复制到publici里面，引入模型.glb格式，格式要注意 loader.load('/波音.gltf.glb', (gltf) => {}）

<templatThreee>

    <section>

        <section id="container"></section>

        <el-button style="color:#918F8F" @click="click">

            {{isFullscreen?'退出全屏':'全屏'}}

        </el-button>

        <div id="canvas"></div>

    </section>

</template>

<script>

    import * as Three from 'three'

    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

    import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

    // import $ from 'jquery'

    import screenfull from 'screenfull'

    export default {

        name: 'Index',

        data() {

            return {

                camera: null,

                scene: null,

                renderer: null,

                mesh: null,

                isFullscreen: false,

                font: {}

            }

        },

        mounted() {

            this.init()

            this.animate()

        },

        beforeDestroy() {

            this.destroy()

        },

        methods: {

            init() {

                if (screenfull.isEnabled) {

                    screenfull.on('change', this.change)

                }

                const container = document.getElementById('container')

                this.camera = new Three.PerspectiveCamera(90, container.clientWidth / container.clientHeight, 0.1, 10000)

                this.renderer = new Three.WebGLRenderer(

                    {

                        antialias: true, // true/false表示是否开启反锯齿

                        alpha: true, // true/false 表示是否可以设置背景色透明

                        precision: 'highp', // highp/mediump/lowp 表示着色精度选择

                        premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分率）

                        preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲

                        maxLights: 3, // 最大灯光数

                        stencil: true // false/true 表示是否使用模板字体或图案

                    })

                // this.camera.position.set(200, 200, 400)

                this.camera.position.set(40, 40, 40);

                this.scene = new Three.Scene()

                this.renderer.setClearColor(new Three.Color(0xF7F2F1))

                this.renderer.setSize(container.clientWidth, container.clientHeight)

                this.renderer.shadowMap.enabled = true

                container.appendChild(this.renderer.domElement)

                this.controls = new OrbitControls(this.camera, this.renderer.domElement)

                this.controls.target = new Three.Vector3(0, 0, 0)

                let axisHelper = new Three.AxesHelper(20);

                this.scene.add(axisHelper);

                // 创建光源

                const spotLight = new Three.SpotLight(0xffffff, 5); //(光照颜色,光照强度)

                console.log(spotLight, 'list');

                // 设置光源位置

                spotLight.position.set(0, 20, 20);

                // 将光源添加到场景中

                this.scene.add(spotLight);

                let canvas = document.createElement("canvas");

                canvas.width = 200;

                canvas.height = 100;

                let ctx = canvas.getContext("2d");

                ctx.fillStyle = "#000";

                ctx.font = "20px 宋体";

                ctx.lineWidth = 10;

                ctx.fillText("模型", 154, 16);

                let texture = new Three.Texture(canvas);

                texture.needsUpdate = true;

                let material = new Three.SpriteMaterial({ map: texture });

                let text = new Three.Sprite(material);

                text.scale.set(0.5 * 100, 0.25 * 100, 0.75 * 100);

                text.position.set(0, 0, 50);

                this.scene.add(text)

                this.loadLight()

                this.load3D()

                this.atrs()

            },

            click() {

                if (!screenfull.isEnabled) {

                    this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })

                    return false

                }

                screenfull.toggle()

            },

        //点击全屏按钮全屏 

            change() {

                this.isFullscreen = screenfull.isFullscreen

            },

           showTip() {

                if (this.lastPick) {

                    const properties = this.lastPick.object.parent.properties

                    console.log(properties, 'properties');

                    this.tooltip.textContent = properties.name

                    this.tooltip.style.visibility = 'visible'

                } else {

                    this.tooltip.style.visibility = 'hidden'

                }

            },

            destroy() {

                if (screenfull.isEnabled) {

                    screenfull.off('change', this.change)

                }

            },

            load3D() {

                const loader = new GLTFLoader()

                const dracoLoader = new DRACOLoader()

                dracoLoader.setDecoderPath('/draco/')

                dracoLoader.preload()

                loader.setDRACOLoader(dracoLoader)

                loader.load('/波音.gltf.glb', (gltf) => {

                    this.scene.add(gltf.scene)

                    this.renderer.render(this.scene, this.camera)

                }, (xhr) => {

                    console.log((xhr.loaded / xhr.total) * 100 + '% loaded')

                }, (error) => {

                    console.error(error)

                })

            },

            loadLight() {

                // 点光源

                // const point = new Three.PointLight(0xffffff)

                // point.position.set(4000, 4000, 4000) // 点光源位置

                // this.scene.add(point) // 点光源添加到场景中

                // 环境光

                const ambient = new Three.AmbientLight(0xFFFFFF)

                this.scene.add(ambient)

            },

            animate() {

                requestAnimationFrame(this.animate)

                this.renderer.render(this.scene, this.camera)

            },

        }

    }

</script>

<style scoped>

    #container {

        width: 100%;

        height: calc(100vh - 84px);

    }

</style>

效果图如下：