当前位置：首页 > news >正文

three.js —— 引入模型

news 2025/9/26 9:55:24

three.js —— 引入模型


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My first three.js app</title><style>body {margin: 0;}</style>
</head><body><script type="importmap">{"imports": {"three": "./node_modules/three/build/three.module.js","three/examples/jsm/": "./node_modules/three/examples/jsm/"}}
</script>
<script type="module">     
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';//  创建基础场景
// 创建场景
const scene = new THREE.Scene();// 设置相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 添加环境光
// const ambientLight = new THREE.AmbientLight(0x404040); // 轻微的灰色
// scene.add(ambientLight);// 添加方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);// 初始化加载器
const loader = new GLTFLoader();// 加载模型
loader.load('./assets/materials/scifi_girl_v.01.glb', // './assets/materials/scene.gltf' ,// 模型路径(gltf) => {// 当模型加载完成后，将其添加到场景中const model = gltf.scene;scene.add(model);// 将模型保存到全局变量window.model = model;// 可选：调整模型的位置、旋转或缩放model.position.set(0, -1, 0);model.rotation.y = Math.PI / 4;  // 旋转45度// model.scale.set(0.5, 0.5, 0.5);  // 缩小一半model.scale.set(1,1, 1); // 添加动画支持const animations = gltf.animations;  // 获取模型动画数据if (animations && animations.length > 0) {const mixer = new THREE.AnimationMixer(model);  // 创建动画混合器const action = mixer.clipAction(animations[0]);  // 播放第一个动画action.play();// 将mixer存储到全局变量中供animate函数使用window.modelMixer = mixer;}},(xhr) => {console.log((xhr.loaded / xhr.total * 100) + '% loaded');},(error) => {console.error('An error happened', error);}
);//   const cube = new THREE.Mesh(geometry, material);// 默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。// scene.add(cube);
// 渲染循环const clock = new THREE.Clock();
function animate() {requestAnimationFrame(animate);// 更新动画const delta = clock.getDelta();  // 获取时间差if (window.modelMixer) {window.modelMixer.update(delta);  // 更新模型动画}// 让模型绕X轴和Y轴旋转if (typeof window.model !== 'undefined') {// window.model.rotation.x += 0.01;// window.model.rotation.y += 0.01; //Y轴逆时针旋转window.model.rotation.y -= 0.01;  //顺时针旋转}renderer.render(scene, camera);
}animate();</script>
</body>
</html>