threejs+tweenjs實現3D粒子模型切換

viewer_w發表於2018-09-03
JS3D模型

前言

之前逛論壇時看到一篇利用 three.js 實現粒子模型切換動畫的分享，具體的效果如下：

threejs+tweenjs實現3D粒子模型切換

也可以去預覽。

但是作者並沒有把原始碼分享出來，正好最近在學習 threejs，正好抽時間寫了一個類似的 demo，希望能幫助一些喜歡 threejs 的初學者。效果如下：

threejs+tweenjs實現3D粒子模型切換

接下來，我們一起來看如何實現這樣一個粒子體系切換動畫。

獲取模型

要實現一個 3D 動畫的第一步就是設計出場景中的 3D 模型，而我們做 3D 粒子模型切換動畫，則還需要將 3D 模型變換成我們需要的粒子模型，然而，我只是一個前端開發，並不會建模，所以只好“竊取”別人的勞動成果了，去宣傳頁，開啟除錯皮膚-網路-XHR，點選 f5 重新整理頁面，得到我們需要的 3D 粒子模型：

threejs+tweenjs實現3D粒子模型切換

將獲取到的 json 檔案儲存到本地。

實現思路

threejs 初始化工作

首先，初始化 threejs 三大元素：場景，相機，渲染器。我們需要一個用於切換的載體粒子體系和多個環境粒子體系（為了簡單，我只初始化了一個上下轉動的環境粒子體系）。載體粒子體系的粒子數量要比所有模型的頂點數量的最大值還要大，這樣才能保證切換到每一個模型，都不會出現缺失的情況，而多餘的點呢就讓他們從頭開始重疊好了。

初始化程式碼：

// renderer 的承載容器
container = document.createElement('div');
document.body.appendChild(container);
// 初始化相機
camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 10, 10000);
camera.position.z = 100;
// 初始化場景
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.001);// 霧化
//初始化renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// 初始化geometry
geometry = new THREE.Geometry();
around = new THREE.Geometry();
// 初始化貼圖
var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
var mapDot = textureLoader.load('textures/gradient.png');  // 圓點
複製程式碼

初始化載體粒子體系：

//初始變換點組
for (let i = 0; i < 10000; i++) {

    var vertex = new THREE.Vector3();
    vertex.x = 800 * Math.random() - 400;
    vertex.y = 800 * Math.random() - 400;
    vertex.z = 800 * Math.random() - 400;

    geometry.vertices.push(vertex);

    geometry.colors.push(new THREE.Color(1, 1, 1));

}
material = new THREE.PointsMaterial({ size: 4, sizeAttenuation: true, color: 0xffffff, transparent: true, opacity: 1, map: mapDot });

material.vertexColors = THREE.VertexColors;
particles = new THREE.Points(geometry, material);
scene.add(particles);
複製程式碼

將獲取到的 3D 模型，通過 JSONLoader 載入後，得到的 geometry 物件放入一個陣列 glist 中，用於模型切換：

載入模型 loadObject：

var loader = new THREE.JSONLoader();
loader.load('obj/game.js', function (geo, materials) {
    var colors = [];
    for (var i = 0; i < geo.vertices.length; i++) {
        colors.push(new THREE.Color("rgb(255, 255, 255)"))
    }

    geo.colors = colors;

    //調整geometry在場景中的位置和大小

    geo.center();
    geo.normalize();
    geo.scale(500, 500, 500)
    geo.rotateX(Math.PI / 4)
    geo.rotateY(-Math.PI / 8)
    glist.push(geo)
})
複製程式碼

新增頁面事件監聽

//事件監聽
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener("mousewheel", onDocumentMouseWheel, false);
document.addEventListener("keydown", onDocumentKeyDown, false);
window.addEventListener('resize', onWindowResize, false);
複製程式碼

事件監聽方面，我做了以下處理：

  1. 按住滑鼠拖動，可以旋轉場景中的粒子體系。
  2. 滾動滑鼠滾輪，可以拉近或拉遠相機。
  3. 當按下鍵盤上方向鍵上下的時候，展示粒子模型切換動畫。

效果：

threejs+tweenjs實現3D粒子模型切換

根據滑鼠拖動的偏移量決定模型的旋轉角度，程式碼：

function onDocumentMouseMove(event) {
    geometry.rotateY((event.pageX - mouseX) / 1000 * 2 * Math.PI);
    geometry.rotateX((event.pageY - mouseY) / 500 * 2 * Math.PI);

    event.preventDefault();
    mouseX = event.pageX;
    mouseY = event.pageY;
}
複製程式碼

根據滾輪的滾動量決定相機的 z 軸高度，實現縮放，程式碼：

function onDocumentMouseWheel() {
    camera.position.z += event.deltaY;
}
複製程式碼

判斷鍵盤按鍵 key 值，決定是否渲染補間動畫，程式碼：

function onDocumentKeyDown(event) {
    if (event.which == 40 && objIndex < 4) {
        objIndex++;
        tweenObj(objIndex);
        flag = true;
    } else if (event.which == 38 && objIndex > 0) {
        objIndex--;
        tweenObj(objIndex);
        flag = true;
    }
}
複製程式碼

使用 tweenjs 展示補間動畫

function tweenObj(index) {
    geometry.vertices.forEach(function (e, i, arr) {
        var length = glist[index].vertices.length;
        var o = glist[index].vertices[i % length];
        new TWEEN.Tween(e).to({
            x: o.x,
            y: o.y,
            z: o.z
        }, 1000).easing(TWEEN.Easing.Exponential.In).delay(1000 * Math.random()).start();
    })
    camera.position.z = 750;
}
複製程式碼

delay 一個 1000ms 以內的隨機數，為了使動畫更加平滑。

渲染

這是最關鍵的一步，也是整個場景能夠動起來的原因，程式碼：

function render() {
    //初始粒子體系繞Y軸勻速轉動
    if (!flag) {
        geometry.rotateY(Math.PI / 200)
    }
    //環境粒子轉動
    around.rotateX(Math.PI / 1000)
    //tween 實時更新粒子位置
    TWEEN.update();
    // 指定相機角度
    camera.lookAt(scene.position);
    // 隨機變換頂點顏色
    geometry.colors.forEach(function (color) {
        color.setRGB(Math.random() * 1, Math.random() * 1, Math.random() * 1);
    });
    // 設定幾何體的頂點和顏色可以被更新
    geometry.verticesNeedUpdate = true;
    geometry.colorsNeedUpdate = true;
    // 渲染器渲染
    renderer.render(scene, camera);
}
複製程式碼

TWEEN.update()和 geometry.verticesNeedUpdate = true 共同決定了粒子體系切換動畫可以展示出來。

原始碼

github地址

結語

雖然日常的前端業務開發很少用到 threejs，但是隨著 webGL 和硬體裝置的發展，相信以後 threejs 會在 webVR 領域大發異彩，讓我們一起期待。

歡迎關注，後續還會有 threejs 和微信小程式方面的分享 ^^！

相關文章