vue+threejs寫物體動畫之物體縮放動畫效果

更新時間：2022年10月05日 08:34:26 作者：djlun

最近在vue中安裝Three.js,無聊順便研究一些關(guān)于3D圖形化庫,下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動畫之物體縮放動畫效果的相關(guān)資料,需要的朋友可以參考下

寫在前面

本文用vue+threejs寫物體動畫：物體縮放動畫。

實現(xiàn)原理：讓縮放值根據(jù)秒數(shù)的增加呈函數(shù)式變化，以達到動畫展示的效果。

下面是演示gif：

代碼說明

準(zhǔn)備一個id容器，用于插入渲染器節(jié)點

<template>
  <div class="item">
    <div id="THREE42"></div>
  </div>
</template>

引入threejs及需要的模塊，并在mounted方法中調(diào)用initThreejs方法

OrbitControls 軌道控制器，用于畫面響應(yīng)鼠標(biāo)的操作
DRACOLoader 用于加載.drc模型

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

mounted() {
  this.initThreejs();
},

initThreejs的全部代碼及其說明

定義一個跟蹤時間的對象：let clock = new THREE.Clock();下面會用到它的.getElapsedTime()方法，該方法用于獲取自時鐘啟動后的秒數(shù)。
創(chuàng)建場景scene = new THREE.Scene();
創(chuàng)建燈光const light = new THREE.DirectionalLight(0xffffff);
創(chuàng)建相機camera = new THREE.PerspectiveCamera(35,(window.innerWidth - 201) / window.innerHeight,1,500);
創(chuàng)建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });
以上是threejs最基礎(chǔ)的部分，就不過多說明了
創(chuàng)建地面：BoxGeometry用于創(chuàng)建一個立方體，參數(shù)是（長，寬，高）。MeshPhongMaterial用于創(chuàng)建一個具有鏡面高光的光澤表面的材質(zhì)。最后用Mesh創(chuàng)建一個具有高光材質(zhì)的立方體網(wǎng)格模型
監(jiān)聽鼠標(biāo)落下事件：document.addEventListener("pointerdown", animate);，鼠標(biāo)落下的后開始縮放動畫，縮放值根據(jù)秒數(shù)的增加呈函數(shù)式變化
使用DRACOLoader加載.drc模型
以上就是實現(xiàn)縮放動畫的全部過程說明和代碼說明。

initThreejs() {
  let camera, scene, renderer;

  let mesh;

  let clock = new THREE.Clock();

  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("js/libs/draco/");
  dracoLoader.setDecoderConfig({ type: "js" });

  init();

  function init() {
    // 創(chuàng)建場景
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000); // 設(shè)置場景背景顏色

    // 創(chuàng)建燈光
    const light = new THREE.DirectionalLight(0xffffff); // 平行光
    light.position.set(0.5, 1.0, 0.5).normalize(); // 設(shè)置平行光的方向，從(0.5, 1.0, 0.5)->target一般(0, 0, 0)
    scene.add(light); // 將燈光添加到場景中

    // 創(chuàng)建相機
    camera = new THREE.PerspectiveCamera(
      35,
      (window.innerWidth - 201) / window.innerHeight,
      1,
      500
    ); // 透視相機
    camera.position.x = 0.5;
    camera.position.y = 0.5; // 設(shè)置相機的位置
    camera.position.z = 1.8;
    scene.add(camera); // 將相機添加到場景中

    // 創(chuàng)建渲染器
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth - 201, window.innerHeight);
    document.getElementById("THREE42").appendChild(renderer.domElement);

    // 創(chuàng)建軌道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener("change", render);
    controls.update();

    // 創(chuàng)建地面
    const ground = new THREE.Mesh(
      new THREE.BoxGeometry(1, 0.0015, 1),
      new THREE.MeshPhongMaterial({
        color: 0x999999,
        depthWrite: false,
        transparent: true,
        opacity: 1,
      })
    );
    ground.receiveShadow = true;
    scene.add(ground);

    document.addEventListener("pointerdown", animate); // 監(jiān)聽鼠標(biāo)、手指落下

    //  加載模型
    dracoLoader.load("/models/models/draco/bunny.drc", function (geometry) {
      geometry.computeVertexNormals();

      const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
      mesh = new THREE.Mesh(geometry, material);
      mesh.castShadow = true;
      mesh.receiveShadow = true;
      scene.add(mesh);

      dracoLoader.dispose();

      render();
    });
  }

  function animate() {
    requestAnimationFrame(animate);

    const elapsed = clock.getElapsedTime();
    // getElapsedTime 獲取自時鐘啟動后的秒數(shù)
    // 讓縮放值根據(jù)秒數(shù)的增加呈函數(shù)式變化，以達到動畫展示的效果
    let scale = 1 + 0.5 * Math.sin(2 * elapsed);
    mesh.scale.set(scale, scale, scale);

    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
},