虚拟现场（一）

虚拟现场（一）

学习目标：

掌握用Threejs实现虚拟现场的制作，虚拟现场是通过现场实时数据驱动模型运动；

加载的js文件有哪些，这些Js文件的作用是什么

---

学习内容：

以threejs-master中的一个demo为研究对象，demo选用webgl_loader_collada_kinematics.html，学习其中：

加载的js有如下几种：

<script src="../build/three.js"></script>
<script src="js/libs/tween.min.js"></script>
<script src="js/loaders/ColladaLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

     一、 three.js   

     二、 tween.min.js——tween.js是非常小的类库，包含多种缓动函数，可以实现多种缓动效果，控制物体在某个时间段内的运动速度，

            1、缓动函数包括：
                                 linear 匀速
                                 Quad 二次方缓动效果
                                 Cubic 三次方缓动效果
                                 Quart 四次方缓动效果
                                 Quint 五次方缓动效果
                                 Sine  正弦缓动效果
                                 Expo  指数缓动效果
                                 Circ  圆形缓动函数
                                 Elastic 指数衰减正弦曲线缓动函数
                                 Back  超过范围的三次方的缓动函数
                                 Bounce 指数衰减的反弹曲线缓动函数

              2、每种缓动函数都由三种效果：easeIn 加速、easeOut 减速、easeInOut 先加速后减速

              3、每个函数都有四个参数：
                                 t——current time:当前时间.解释为:开始的步数(一般从0开始),预示着一段动画的开始.（当前步数）
                                 b——beginning value  初始值.解释为:开始量(开始的属性值)/初始位置
                                 c——change in value  变化量.解释为属性值的改变量:结束位置的属性值 - 开始位置的属性值（总距离(变化量)）
                                 d——duration 持续时间.解释为:结束的步数(运动的总时间)、总步数

                              （https://blog.csdn.net/github_37360787/article/details/54837669）

      三、ColladaLoader.js——Collada是一种用基于XML的格式定义数字内容的格式。这也是一种被广泛使用的格式，差不多所有的三维软件和渲染引擎都支持这种格式。
                 Collada模型中不仅定义了几何体，也定义了材质，甚至还可以定义光源

             1、常规流程：首先，引入script加载器：<script src="/lib/js/loaders/ColladaLoader.js"></script>

                                     然后，实例化加载器对象，用加载器对象加载模型，给我们返回一个包含模型的对象，里面包含一些模型相关的内容，我们从里面找到scene对象，并在里面找到children数组，将模型clone出来，添加到场景当中。

var loader = new THREE.ColladaLoader();

var mesh;
loader.load("/lib/assets/models/dae/Truck_dae.dae", function (result) {
    mesh = result.scene.children[0].clone();
    scene.add(mesh);
});

 

四、 Detector.js——对兼容性检测，

        1、其中包括：

           （1）判断canvas兼容。

           （2）判断webgl兼容性。

           （3）在页面添加不兼容提示信息。

        2、实现兼容性的检测使用方法：

          （1）首先，将插件引入到页面：[html]view plaincopy

         （2）然后，在js里面添加一个判断：

                  [javascript]view plaincopy

                  if( ! Detector.webgl ) Detector.addGetWebGLMessage();

五、 stats.min.js——stats性能插件添加了以后，会默认在左上角显示性能帧数，每次刷新所用时间，占用内存。鼠标左键点击可进行切换，默认显示每秒的帧数。

例如：

基本使用方法：

（1）首先需要将stats插件引入：examples/js/libs/stats.min.js。

（2）然后需要实例化一个组件，然后添加到dom当中。

var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

 

（3）需要在requestAnimationFrame()函数调用里面更新stats。

function animate() {
        //更新控制器
        controls.update();
        render();
 
        //更新性能插件
        stats.update();
        requestAnimationFrame(animate);
    }

 

（4）设置默认显示的监听。

Stats.prototype.setMode()方法可以设置插件的默认监听

stats.setMode(0); //默认的监听fps
stats.setMode(1); //默认的监听画面渲染时间
stats.setMode(2); //默认的监听当前的不知道是啥

 

---