基于VUE-CLI框架开发THREE.JS从入门开始（7）轨道控制插件（类似轨迹球，但相对更优）

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

虽然轨迹球插件可以来回的滚动，但是容易分辨不清楚上下左右的关系，容易混乱，适合调试，而轨道控制插件orbit则适合客户使用，还不会产生混乱效果。下面讲一下使用。
引用@专注前端30年

开发环境

开发工具

webstorm编辑器
node.js

前台框架

vue-cli 框架

webstorm可以直接安装

引用脚本

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

npm install three
npm install three-stats
npm install three-orbitcontrols
//轨道控制

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

import Vue from 'vue'
import App from './App.vue'
import * as THREE from 'three'
import * as ThreeStats from 'three-stats'
//性能监听
import * as OrbitControls from 'three-orbitcontrols'
//轨道控制

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

代码

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

<script>
    export default {
        name: "ThreeTest6",
        data:function(){
            return{
                renderer:{},
                //渲染器对象
                camera:{},
                //相机对象
                scene:{},
                //场景对象
                light:{},
                //平行光对象
                controls:{},
                //轨迹球对象
                dom:{},
                //性能组件
                stats:{}
            }
        },
        mounted:function(){
            this.dom=document.getElementById('kuang')
            this.initRender();
            //创建渲染器
            this.initScene();
            //创建场景
            this.initCamera();
            //创建相机
            this.initLight();
            //创建光源
            this.initModel();
            //创建几何对象
            this.initControls();
            //创建轨迹球
            this.initStats();
            //创建资源监控
            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.OrbitControls(this.camera,this.renderer.domElement)
                // 使动画循环使用时阻尼或自转 意思是否有惯性
                this. controls.enableDamping = true;
                //动态阻尼系数 就是鼠标拖拽旋转灵敏度
                this.controls.dampingFactor = 0.25;
                //是否可以缩放
                this.controls.enableZoom = true;
                //是否自动旋转
                this.controls.autoRotate = true;
                //设置相机距离原点的最远距离
                this.controls.minDistance  = 200;
                //设置相机距离原点的最远距离
                this.controls.maxDistance  = 600;
                //是否开启右键拖拽
                this.controls.enablePan = true;
            },
            render:function(){
                this.renderer.render(this.scene,this.camera)
                //将场景相机渲染到页面
            },
            onWindowResize:function() {
                this.camera.aspect = this.dom.offsetWidth/this.dom.offsetHeight;
                //更新镜头长宽比
                this.camera.updateProjectionMatrix();
                //更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
                this.render();
                //从新渲染
                this.renderer.setSize( this.dom.offsetWidth,this.dom.offsetHeight );
                //设置渲染器宽长
            },
            animate:function(){
                this.controls.update();
                //注意,调用了该方法,才有效果 依样画葫芦
                this.render()
                //渲染
                //更新性能插件
                this.stats.update();
                /*
                * stats.setMode(0); //默认的监听fps
                  stats.setMode(1); //默认的监听画面渲染时间
                  stats.setMode(2); //默认的监听当前的不知道是啥
                * */
                requestAnimationFrame(this.animate);
            },
            //初始化性能插件
             initStats:function() {
                this.stats = new this.ThreeStats.Stats();
                this.dom.appendChild(this.stats.dom)
            }
        }
    }
</script>

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

</style>

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