three.js引入

npm install three

安裝軌道控件插件：

npm install three-orbit-controls

安裝渲染器插件：

npm i --save three-css2drender

vue文件中引用：

import * as Three from 'three'

在頁面中創(chuàng)建場景

//創(chuàng)建一個三維場景
const scene = new THREE.Scene();

創(chuàng)建一個透視相機

//創(chuàng)建一個透視相機，窗口寬度，窗口高度
const width = window.innerWidth,
  height = 400;
const camera = new THREE.PerspectiveCamera(38, width / height, 0.25, 100);
//設置相機位置
camera.position.set(-5, 3, 10);
//設置相機方向
camera.lookAt(new THREE.Vector3(0, 2, 0));

初始化渲染器

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearAlpha(0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, height);
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);

window.addEventListener("resize", onWindowResize);

初始動畫混合器

// 創(chuàng)建動畫混個器
let mixer = new THREE.AnimationMixer(scene);
// 創(chuàng)建時鐘對象 該對象用于跟蹤時間
let clock = new THREE.Clock();

動畫混合器是用于場景中特定對象的動畫的播放器。當場景中的多個對象獨立動畫時，每個對象都可以使用同一個動畫混合器。

參數(shù)：rootObject 混合器播放的動畫所屬的對象。就是包含動畫模型的場景對象。
常用參數(shù)和屬性：
.time 全局的混合器時間。
.clipAction(AnimationClip) 返回所傳入的剪輯參數(shù)的AnimationAction對象。AnimationAction用來調度存儲在AnimationClip中的動畫。
AnimationClip 動畫剪輯，是一個可重用的關鍵幀軌道集，它代表動畫。
.getRoot() 返回混合器的根對象。
.update() 推進混合器時間并更新動畫。在渲染函數(shù)中調用更新動畫。文章來源地址http://www.zghlxwxcb.cn/news/detail-767151.html

創(chuàng)建光源，用于視覺可見

const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 20, 0);
 scene.add(hemiLight);

 const dirLight = new THREE.DirectionalLight(0xffffff);
 dirLight.position.set(0, 20, 10);
 scene.add(dirLight);

創(chuàng)建加載glb文件模型

const loader = new GLTFLoader();
loader.load(
   "RobotExpressive.glb",
   function (gltf) {
     // 存儲模型含有動畫集合
     model = gltf.scene;
     scene.add(model);
     createGUI(model, gltf.animations);
   },
   undefined,
   function (e) {
     console.error(e);
   }
 );

最后加上動畫循環(huán)渲染

const animate = () => {
const dt = clock.getDelta();
	if (mixer) mixer.update(dt);
	 requestAnimationFrame(animate);
	 renderer.render(scene, camera);
	 stats.update();
};

完整代碼

<template>
   <div id="my-three"></div>
</template>
<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  onUnmounted,
  computed,
  reactive,
  toRefs,
} from "vue";

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Stats from "three/examples/jsm/libs/stats.module.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

export default defineComponent({
  name: "index",
  setup() {
    const ctx = getCurrentInstance();
    let state = reactive({
      currentIndex:0,
    });
    //創(chuàng)建一個三維場景
    const scene = new THREE.Scene();
    //創(chuàng)建一個透視相機，窗口寬度，窗口高度
    const width = window.innerWidth,
      height = 400;
    const camera = new THREE.PerspectiveCamera(38, width / height, 0.25, 100);
    //設置相機位置
    camera.position.set(-5, 3, 10);
    //設置相機方向
    camera.lookAt(new THREE.Vector3(0, 2, 0));

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    let mixer = new THREE.AnimationMixer(scene);
    let stats = new Stats();
    let clock = new THREE.Clock();
    let actions = {},
      activeAction,
      previousAction;
    // 默認動畫
    const api = {state:'Walking'}
    //控制器
    // const Controls = new OrbitControls(camera, renderer.domElement);
    onMounted(() => {
      onLoad();
    });
    const onLoad = () => {
      let model, container;
      container = document.getElementById("my-three");

      // scene.background = new THREE.Color(0xe0e0e0);
      scene.fog = new THREE.Fog(0xe0e0e0, 20, 100);

      // lights

      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
      hemiLight.position.set(0, 20, 0);
      scene.add(hemiLight);

      const dirLight = new THREE.DirectionalLight(0xffffff);
      dirLight.position.set(0, 20, 10);
      scene.add(dirLight);

      // model
      const loader = new GLTFLoader();
      loader.load(
        "RobotExpressive.glb",
        function (gltf) {
          // 存儲模型含有動畫集合
          model = gltf.scene;
          scene.add(model);
          createGUI(model, gltf.animations);
        },
        undefined,
        function (e) {
          console.error(e);
        }
      );

      renderer.setClearAlpha(0);
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, height);
      renderer.outputEncoding = THREE.sRGBEncoding;
      container.appendChild(renderer.domElement);

      window.addEventListener("resize", onWindowResize);
      container.appendChild(stats.dom);
      animate();

      // 點擊動畫
      renderer.domElement.addEventListener("click", (event) => {
        const { offsetX, offsetY } = event;
        const x = (offsetX / window.innerWidth) * 2 - 1;
        const y = -(offsetY / window.innerHeight) * 2 + 1;
        const mousePoint = new THREE.Vector2(x, y);

        const raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(mousePoint, camera);
        const instersects = raycaster.intersectObjects(scene.children);

        instersects.forEach((item) => {
          console.log(item.object.name);
          if (
            item.object.name == "Head_2" ||
            item.object.name == "Head_3" ||
            item.object.name == "Head_4"
          ) {
            // console.log(instersects);
            // action.stop();
            const states = [
              "Idle",
              "Dance",
              "Death",
              "Sitting",
              "Standing",
              "Jump",
              "Yes",
              "No",
              "Wave",
              "Punch",
              "ThumbsUp",
            ];
            if(state.currentIndex<states.length - 1){
              state.currentIndex = state.currentIndex+1
            }else{
              state.currentIndex  = 0
            }
            fadeToAction(states[state.currentIndex], 0.2);
            mixer.addEventListener("finished", restoreState);
          }
        });
      });
    };
    const createGUI = (model, animations) => {
      const states = [
        "Idle",
        "Walking",
        "Running",
        "Dance",
        "Death",
        "Sitting",
        "Standing",
      ];
      const emotes = ["Jump", "Yes", "No", "Wave", "Punch", "ThumbsUp"];
      for (let i = 0; i < animations.length; i++) {
        const clip = animations[i];
        const action = mixer.clipAction(clip);
        actions[clip.name] = action;
        if (emotes.indexOf(clip.name) >= 0 || states.indexOf(clip.name) >= 4) {
          action.clampWhenFinished = true;
          action.loop = THREE.LoopOnce;
        }
      }
      activeAction = actions["Walking"];
      activeAction.play();
    };
    const fadeToAction = (name, duration) => {
      previousAction = activeAction;
      activeAction = actions[name];

      if (previousAction !== activeAction) {
        previousAction.fadeOut(duration);
      }

      activeAction
        .reset()
        .setEffectiveTimeScale(1)
        .setEffectiveWeight(1)
        .fadeIn(duration)
        .play();
    };
    const restoreState = () => {
      mixer.removeEventListener("finished", restoreState);

      fadeToAction(api.state, 0.2);
    };

    const animate = () => {
      const dt = clock.getDelta();

      if (mixer) mixer.update(dt);

      requestAnimationFrame(animate);

      renderer.render(scene, camera);

      stats.update();
    };
    const onWindowResize = () => {
      camera.aspect = window.innerWidth / height;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, height);
    };
    onUnmounted(() => {
      scene.traverse((e) => {
        if (e.BufferGeometry) e.BufferGeometry.dispose();
        if (e.material) {
          if (Array.isArray(e.material)) {
            e.material.forEach((m) => {
              m.dispose();
            });
          } else {
            e.material.dispose();
          }
        }
        if (e.isMesh) {
          e.remove();
        }
      });
      scene.remove();
      renderer.dispose();
      renderer.content = null;
      window.removeEventListener("resize", onWindowResize, false);
    });

    return {
      ...toRefs(state),
      onLoad,
      createGUI,
    };
  },
});
</script>
<style lang="less">
@import "./index.less";
</style>

到了這里，關于vue3結合three.js實現(xiàn)3D帶有交互的動畫的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！