vue+threejs寫物體動(dòng)畫之物體縮放動(dòng)畫效果
寫在前面
本文用vue
+threejs
寫物體動(dòng)畫:物體縮放動(dòng)畫。
實(shí)現(xiàn)原理:讓縮放值根據(jù)秒數(shù)的增加呈函數(shù)式變化,以達(dá)到動(dòng)畫展示的效果。
下面是演示gif:
代碼說明
- 準(zhǔn)備一個(gè)
id
容器,用于插入渲染器節(jié)點(diǎn)
<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的全部代碼及其說明
- 定義一個(gè)跟蹤時(shí)間的對(duì)象:
let clock = new THREE.Clock();
下面會(huì)用到它的.getElapsedTime()
方法,該方法用于獲取自時(shí)鐘啟動(dòng)后的秒數(shù)。 - 創(chuàng)建場景
scene = new THREE.Scene();
- 創(chuàng)建燈光
const light = new THREE.DirectionalLight(0xffffff);
- 創(chuàng)建相機(jī)
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)建一個(gè)立方體,參數(shù)是(長,寬,高)。MeshPhongMaterial
用于創(chuàng)建一個(gè)具有鏡面高光的光澤表面的材質(zhì)。最后用Mesh
創(chuàng)建一個(gè)具有高光材質(zhì)的立方體網(wǎng)格模型 - 監(jiān)聽鼠標(biāo)落下事件:
document.addEventListener("pointerdown", animate);
,鼠標(biāo)落下的后開始縮放動(dòng)畫,縮放值根據(jù)秒數(shù)的增加呈函數(shù)式變化 - 使用
DRACOLoader
加載.drc模型 - 以上就是實(shí)現(xiàn)縮放動(dòng)畫的全部過程說明和代碼說明。
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)建相機(jī) camera = new THREE.PerspectiveCamera( 35, (window.innerWidth - 201) / window.innerHeight, 1, 500 ); // 透視相機(jī) camera.position.x = 0.5; camera.position.y = 0.5; // 設(shè)置相機(jī)的位置 camera.position.z = 1.8; scene.add(camera); // 將相機(jī)添加到場景中 // 創(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í)鐘啟動(dòng)后的秒數(shù) // 讓縮放值根據(jù)秒數(shù)的增加呈函數(shù)式變化,以達(dá)到動(dòng)畫展示的效果 let scale = 1 + 0.5 * Math.sin(2 * elapsed); mesh.scale.set(scale, scale, scale); render(); } function render() { renderer.render(scene, camera); } },
寫在最后
以上就是所有的代碼和說明。
到此這篇關(guān)于vue+threejs寫物體動(dòng)畫之物體縮放動(dòng)畫效果的文章就介紹到這了,更多相關(guān)vue+threejs物體縮放動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue如何動(dòng)態(tài)修改meta的title
這篇文章主要介紹了vue如何動(dòng)態(tài)修改meta的title,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06Vue+Koa2+mongoose寫一個(gè)像素繪板的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue+Koa2+mongoose寫一個(gè)像素繪板的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09利用VUE框架,實(shí)現(xiàn)列表分頁功能示例代碼
本篇文章主要介紹了利用VUE框架,實(shí)現(xiàn)列表分頁功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng)小結(jié)
EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐。這篇文章主要介紹了vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng),需要的朋友可以參考下2018-06-06Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能
這篇文章主要介紹了Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式
本文主要介紹了Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09