学习three.js的第4天：three.js能动的狗

最新推荐文章于 2024-05-22 13:52:22 发布

mx666602

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量350

点赞数 13

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/mx666602/article/details/138820935

版权

先放效果图

核心代码

const gltfLoader = new GLTFLoader()
let clock = new THREE.Clock(); 
let mixer, animationClip, clipAction = null; 
gltfLoader.load("./Fox/fox.gltf", (gltf) => {
  gltf.scene.scale.set(0.025, 0.025, 0.025);
  gltf.scene.position.set(0.025, 0.025, -3.025);
  scene.add(gltf.scene);
  mixer = new THREE.AnimationMixer(gltf.scene);
  animationClip = gltf.animations[0]; 
  clipAction = mixer.clipAction(animationClip).play();
  animationClip = clipAction.getClip();
  const skinnedMesh = new THREE.SkeletonHelper(gltf.scene);
  scene.add(skinnedMesh);
});

总代码

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

const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

const gltfLoader = new GLTFLoader()
let clock = new THREE.Clock();
let mixer, animationClip, clipAction = null;
gltfLoader.load("./Fox/glTf/fox.gltf", (gltf) => {
  gltf.scene.scale.set(0.025, 0.025, 0.025);
  gltf.scene.position.set(0.025, 0.025, -3.025);
  scene.add(gltf.scene);
  mixer = new THREE.AnimationMixer(gltf.scene);
  animationClip = gltf.animations[0];
  clipAction = mixer.clipAction(animationClip).play();
  animationClip = clipAction.getClip();
  const skinnedMesh = new THREE.SkeletonHelper(gltf.scene);
  scene.add(skinnedMesh);
});

const fov = 55;
const aspect = 2;
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 20, 30);
camera.lookAt(0, 0, 0);
scene.add(camera);
{
  const planeSize = 10;
  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
  const planeMat = new THREE.MeshStandardMaterial({ color: 0x999999 });
  const mesh = new THREE.Mesh(planeGeo, planeMat);
  mesh.rotation.x = Math.PI * - .5;
  mesh.position.set(0, 0, 0)
  scene.add(mesh);
}
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 10, 2);
light.target.position.set(0, 0, -0);
scene.add(light);
scene.add(light.target);
scene.add(light);
const helper = new THREE.DirectionalLightHelper(light, 5);
scene.add(helper);

const sizes = {
  width: 1600,
  height: 800,
};
const canvas = document.querySelector("canvas.webgl");
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);
const controls = new OrbitControls(camera, canvas)
controls.update();

function animate() {
  var delta = clock.getDelta();
  requestAnimationFrame(animate);
  controls.update();
  const radius = 10;
  const angle = Date.now() * 0.0001;
  const x = Math.cos(angle) * radius;
  const z = Math.sin(angle) * radius;
  light.position.set(x, 10, z);
  helper.update();
  renderer.render(scene, camera);
  if (mixer && clipAction) {
    mixer.update(delta);
  }
}

animate();

整个demo的gitee仓库: 普通切图仔/three-demo
使用了github的模型库：GitHub - KhronosGroup/glTF-Sample-Models: glTF Sample Models
学习参考的文章：https://juejin.cn/post/6940079683740368933