Three.js 自定义路径动画封装

最新推荐文章于 2024-06-01 15:35:03 发布

_Zou

最新推荐文章于 2024-06-01 15:35:03 发布

阅读量957

点赞数 1

分类专栏： webgl笔记文章标签： javascript webgl 数据可视化 node.js 可视化

zouzouzou

本文链接：https://blog.csdn.net/weixin_40676050/article/details/108184886

版权

webgl笔记专栏收录该内容

16 篇文章 3 订阅

订阅专栏

1.首先需要引用PointerLockControls.js帮助我们锁定鼠标与移动位置，和Tween.js 帮助我们快速地实现动画。

2.主要记录的是摄像机的位置和视点，将其放在一个数组中

3.主要播放是依据坐标点个数，逐一播放，主要循环播放代码如下：

function Camera_Tween(x,y,z,mx,my,mz,Times) {

    var option={
        px: camera.position.x,
        pz: camera.position.z,
        py:camera.position.y,
        mx: carmeraControls.target.x,
        mz: carmeraControls.target.z,
        my:carmeraControls.target.y
    }
    var tween=new TWEEN.Tween(option)
    tween.to({
        px: [x],
        pz: [z],
        py: [y],
        mx: [mx],
        mz: [mz],
        my: [my]
    }, Times)
    tween.onUpdate(function () {
        camera.position.x = this.px;
        camera.position.z = this.pz;
        camera.position.y=this.py;
        carmeraControls.target.x=this.mx;
        carmeraControls.target.z=this.mz;
        carmeraControls.target.y=this.my;
    })
    tween.delay(0)
    tween.easing(TWEEN.Easing.Linear.None)
    carmeraControls.enableRotate=false;//是否旋转
    tween.start()
    tween.onComplete(function () {
        if (camera_times<camera_jsonfile.length-1){
            Camera_For();
        }
        else {
            camera_times=0;
            carmeraControls.enableRotate=true;
        }
    })
}
//导出JSO

5.导出动画，我们就是导出记录位置与视点的数组就行了，引用FileSaver.js，导出JSON文件，关键代码：

function downloadJson(data) {

var blob = new Blob([JSON.stringify(data)], { type: "" });
saveAs(blob, "Animation.json");
}

6.导入动画，关键代码：

function fileImport() {
    //获取读取我文件的File对象
    var selectedFile = document.getElementById('files').files[0];
    var name = selectedFile.name;//读取选中文件的文件名
    var size = selectedFile.size;//读取选中文件的大小
    console.log("文件名:"+name+"大小:"+size);

    var reader = new FileReader();//这是核心,读取操作就是由它完成.
    reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
    reader.onload = function () {
        //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
        console.log(this.result);
        camera_jsonfile=eval('('+this.result+')');
        console.log(camera_jsonfile);
        TwoD_show_point();

    }
}

7.效果展示

————————源码补充-----------------------

function Camera_For() {
    var j=camera_times;
    var i=camera_times+1;
    camera_times++;
    var point = camera_jsonfile[j].camera_point;
    var position = camera_jsonfile[j].camera_position;
    var next_point = camera_jsonfile[i].camera_point;
    var next_position = camera_jsonfile[i].camera_position;
    var next_Time = camera_jsonfile[i].Time;
    // console.log(point);
    camera.position.set(position.x, position.y, position.z);
    ///carmeraControls.target.set(10,0, 0);
    carmeraControls.target.set(point.x,point.y, point.z);
    Camera_Tween(next_position.x,next_position.y,next_position.z,next_point.x,next_point.y,next_point.z,next_Time);
}