基于VUE-CLI框架开发THREE.JS从入门开始（5）轨迹球实现拖动、旋转、放大等

基于VUE-CLI框架开发THREE.JS从入门开始（5）

开发环境

开发工具

webstorm编辑器
node.js

前台框架

vue-cli 框架

webstorm可以直接安装

引用脚本

webgl封装库three.js 项目路径下安装（编辑器内右键点击项目根文件夹，选择Open in Terminal） ：

npm install three

webgl封装库TrackballControls.js 项目路径下安装（编辑器内右键点击项目根文件夹，选择Open in Terminal） ：

npm install three-trackballcontrols

我直接放到vue对象内了，代码如下

import Vue from 'vue'
import App from './App.vue'
import * as THREE from 'three'
import * as TrackballControls from 'three-trackballcontrols'

Vue.config.productionTip = false
Vue.prototype.THREE = THREE
Vue.prototype.TrackballControls = TrackballControls
new Vue({
  render: h => h(App),
}).$mount('#app')

代码

<template>
    <div id="kuang"></div>
</template>

<script>
    export default {
        name: "ThreeTest4",
        data:function(){
            return{
                renderer:{},
                //渲染器对象
                camera:{},
                //相机对象
                scene:{},
                //场景对象
                light:{},
                //平行光对象
                controls:{},
                //轨迹球对象
                dom:{}
            }
        },
        mounted:function(){
            this.dom=document.getElementById('kuang')
            this.initRender();
            //创建渲染器
            this.initScene();
            //创建场景
            this.initCamera();
            //创建相机
            this.initLight();
            //创建光源
            this.initModel();
            //创建几何对象
            this.initControls();
            //创建轨迹球
            this.animate();
            //渲染
            window.onresize = this.onWindowResize;
            //监听窗体变化
        },
        methods:{
            initRender:function(){
                this.renderer = new this.THREE.WebGLRenderer({antialias:true})
                //创建渲染器， antialias（是否启用抗锯齿）
                this.renderer.setSize(this.dom.offsetWidth, this.dom.offsetHeight)
                //设置渲染器尺寸 等于模块宽高
                this.dom.appendChild(this.renderer.domElement)
                //将渲染器添加到页面上
            },
            initCamera:function(){
                this.camera = new this.THREE.PerspectiveCamera(45,this.dom.offsetWidth/this.dom.offsetHeight,1,10000);
                //创建 透视相机 视角45度 长宽比等于模块长宽比 近切面1 远切面10000
                this.camera.position.set(0, 0,400);
                //偏移相机z轴400
            },
            initScene:function(){
                this.scene = new this.THREE.Scene()
                //创建场景对象
            },
            initLight:function(){
                this.scene.add(new this.THREE.AmbientLight(0x404040))
                //向场景添加环境光
                this.light = new this.THREE.DirectionalLight(0xffffff)//缺省值光照强度 0 -1
                //创建平行光 常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。
                this.light.position.set(1,1,1);
                //设置光源位置
                this.scene.add(this.light)
                //向场景添加平行光
            },
            initModel:function(){
                let map = new this.THREE.TextureLoader().load('./image/zbl.png')
                //创建加载器 实用加载器的load方法加载材质文件
                let material = new this.THREE.MeshLambertMaterial({map:map})
                //Lambert网格材质(MeshLambertMaterial)
                let cube = new this.THREE.Mesh(new this.THREE.BoxGeometry(100,200,100,1,1,1),material)
                //创建一个网格 将 宽度x =100 y=200 z=100、分段数皆为1立方体 与 材质 添加进去；
                this.scene.add(cube)
                //向场景添加长方体网格对象
            },
            initControls:function(){
                this.controls = new this.TrackballControls(this.camera)
                //旋转速度
                this.controls.rotateSpeed = 5;
                //变焦速度
                this.controls.zoomSpeed = 3;
                //平移速度
                this.controls.panSpeed = 0.5;
                //是否不变焦
                this.controls.noZoom = false;
                //是否不平移
                this.controls.noPan = false;
                //是否开启移动惯性
                this.controls.staticMoving = false;
                //动态阻尼系数 就是灵敏度
                this.controls.dynamicDampingFactor = 0.3;
                //未知，占时先保留
                //controls.keys = [ 65, 83, 68 ];
                this.controls.addEventListener( 'change', this.render , { passive: false });
                //变化时触发渲染方法
            },
            render:function(){
                this.renderer.render(this.scene,this.camera)
                //将场景相机渲染到页面
            },
            onWindowResize:function() {
                this.camera.aspect = this.dom.offsetWidth/this.dom.offsetHeight;
                //更新镜头长宽比
                this.camera.updateProjectionMatrix();
                //更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
                this.controls.handleResize();
                //轨迹球适应窗口的功能 文档没有查到相关 依样画葫芦
                this.render();
                //从新渲染
                this.renderer.setSize( this.dom.offsetWidth,this.dom.offsetHeight );
                //设置渲染器宽长
            },
            animate:function(){
                this.controls.update();
                //注意,调用了该方法,才有效果 依样画葫芦
                this.render()
                //渲染
                requestAnimationFrame(this.animate);
            }
        }
    }
</script>

<style scoped>
    #kuang{
        width: 100%;
        height: 100%;
    }

</style>
</script>

开发完之后发现会有一个报错，求大佬帮忙解决- -

index.js?a5d4:503 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

有问题欢迎大家提问，共同学习。bye bye