vue2+three.js的基本使用 （模型是本地文件）

第一步 安装依赖

npm install --save three

在需要使用的组件进行引用

//引入
import * as THREE from 'three';    //
//引入gltf格式的模型文件需要的
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"  
//监听鼠标键盘事件时需要用到
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

算了直接上完整代码 ps：引用的模型文件要放在public文件夹下面

<template>
    <div class="main">
        <header>  <h1>THREEJSDEMO</h1>  </header>
        <div  id="scene"  class="body"></div>
    </div>
</template>

<script>
var elementResizeDetectorMaker = require("element-resize-detector")
import * as THREE from 'three';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default {
    data(){
        return{
            dom:null,
            scene:null,
            mesh: null, //网格模型对象
            point: null,
            camera: null, //相机对象
            renderer: null, //渲染器对象
            loader:null,
            controls:null,
        }
    },
    created(){
    },
    mounted(){
            this.dom=document.getElementById('scene');
            this.loader=new GLTFLoader();
            elementResizeDetectorMaker().listenTo(this.dom, () => {
                this.$nextTick(() => {
                    this.renderer.setSize(this.dom.clientWidth, this.dom.clientHeight);
                })
            })
            this.init();
            this.addcar();
            this.addPlane();
    },
    methods:{ 
        init(){
            // 创建场景
            this.scene=new THREE.Scene();
             //环境光
            var ambient = new THREE.AmbientLight(0x999999);
            this.scene.add(ambient);
            this.point = new THREE.PointLight(0x999999);
                //点光源位置
            this.point.position.set(0, 2000, 400);
            //点光源添加到场景中
            // this.scene.add(this.point);

            // var spotLight = new THREE.SpotLight(0x444444);
            // spotLight.position.set(0, 1000, 400);
            // spotLight.castShadow = true;
            // spotLight.shadow.mapSize.set(3000, 3000);
            // // this.scene.add(spotLight);
             var spotLight = new THREE.SpotLight(0x444444);
            // 设置聚光光源位置
            spotLight.position.set(0,500, 50);
            spotLight.intensity = 5; //修改光的强度
            spotLight.distance = 50000; //修改光的照射范围
            spotLight.angle = Math.PI/3; //修改光的照射弧度
            spotLight.penumbra = 1.0; //修改交界过渡
            spotLight.decay = 1.0; //修改衰减度
            this.scene.add(spotLight);//光对象添加到scene场景中

             // 相机设置
            var width = this.dom.clientWidth; //窗口宽度
            var height = this.dom.clientHeight; //窗口高度

            var k = width / height; //窗口宽高比
            // var s = 500; //三维场景显示范围控制系数，系数越大，显示的范围越大
             //创建相机对象
            this.camera = new THREE.PerspectiveCamera(60, k, 1, 4000);
            this.camera.position.set(0, 500, 400); //设置相机位置
            //this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
            this.camera.lookAt({ x: 0, y: 0, z: 0 }); //设置相机方向(指向的场景对象)

            //创建渲染器对象
            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setSize(width, height); //设置渲染区域尺寸
            this.renderer.setClearColor(0x000000, 1); //设置背景颜色
            this.renderer.shadowMap.enabled = true;
            this.dom.appendChild(this.renderer.domElement); //body元素中插入canvas对象
             //创建控件对象
            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
            this.controls.addEventListener('change', this.render());//监听鼠标、键盘事件
            this.render();
        },
        render(){
              //执行渲染 *** 作   指定场景、相机作为参数
                this.renderer.render(this.scene, this.camera);
                requestAnimationFrame(() => { this.render() })
        },
        //添加平面
        addPlane() {
            var planeGeometry = new THREE.PlaneGeometry(4000, 4000, 1, 1);
            var texture = THREE.ImageUtils.loadTexture("static/3Dmodel/bg.jpg"); //加载纹理贴图
            
            var material = new THREE.MeshBasicMaterial({ //贴图通过材质添加给几何体
                map: texture, //给纹理属性map赋值
                side: 2, //两面可见
                shininess: 30,//高光部分的亮度，默认30
            }); //材质对象
            var mesh = new THREE.Mesh(planeGeometry, material); //纹理贴图网格模型对象
            mesh.position.set(0,10 , 0)
            mesh.rotation.x = THREE.MathUtils.degToRad(270)
            // var planeMaterial = new THREE.MeshLambertMaterial({ color: 0x999999 });
            //   var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            //   plane.rotation.x = -0.5 * Math.PI;
            //   plane.position.x = 15
            //   plane.position.y = 0
            //   plane.position.z = 0
            // // 设置投影
            // plane.receiveShadow = true;
            this.scene.add(mesh)
        },
        addcar(){
           this.loader.load("static/3Dmodel/free__dodge_challenger_srt/scene.gltf",(gltf)=>{
                        gltf.scene.scale.set(100,100,100);
                        gltf.scene.rotation.set(0,0,0);
                        gltf.scene.position.set(10,10,50)
                        // gltf.scene.castShadow=true;
                        gltf.scene.traverse( function ( child ) {
                        if ( child.isMesh ) {
                            // console.log(child,999)
                            child.frustumCulled = false;
                            //模型阴影
                            child.castShadow = true;
                            //模型自发光
                            // child.material.emissive =  child.material.color;
                            // child.material.emissiveMap = child.material.map ;
                        }})
                        this.scene.add(gltf.scene);

           })
        },
    },
}
</script>

<style lang='scss' scoped>
.main{
    width: 100%;
    height: 100%;
    position: relative;
    header{ position: absolute;top:0;z-index: 5;width:100%;
        h1{
            text-align: center;
            // color: ;
        }
    }
    #scene{
       height: 100%;
        width: 100%;
    }
}
</style>

这个demo还是有点问题 我不知道为啥会出现，就是一直拉远一直拉远 就会变空白了 转变方向的时候也会出先问题。（解决了记得回来评论问题及办法）