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

从Unity到Three.js（模型文件加载）

news 2025/8/2 22:13:40

模型加载功能探索，用blender导出了个glb格式的cube进行的测试。
初接触js语法，回调注册的地方直接使用匿名函数总感觉脑子跟不上，反应不过来，就把加载后的回调简单封装了下，
官方文档是直接使用的匿名函数。
另外看官方文档对模型加载功能描述，感觉实战中会遇到很多坑，等之后遇到再详细研究，这次只记录基础功能。

import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 定义相关变量
let scene,camera,renderer
let hesLight,dirLight,sportLight // 初始化场景
scene = new THREE.Scene()
scene.background = new THREE.Color("rgb(0, 50, 150)");//设置背景色
//设置灯光，不设置所有模型都是黑色的，灯光详细设置之后研究
hesLight = new THREE.HemisphereLight(0xffffff,0x444444)
hesLight.intensity = 0.6
scene.add(hesLight)
dirLight = new THREE.DirectionalLight()
dirLight.position.set(5,5,5)
scene.add(dirLight)
sportLight = new THREE.SpotLight(0xffffff)
sportLight.position.set(0,10,10)
scene.add(sportLight)// 加载模型  模型在工程根目录
loadModelGLB('../testmodel.glb',loadModelSucceed,loadModelFail);// 初始化相机 设置相机位置，让模型在相机视野范围内
camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,100)
camera.position.set(0,3,10)//设置相机位置
// 初始化渲染器
renderer = new THREE.WebGLRenderer({antialias:true})
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth,window.innerHeight) 
document.body.appendChild(renderer.domElement) //个人理解，类似Unity的Update，但不完全相等，不调用此函数会导致模型不显示
//更像是渲染层的Update，不知道和unity shader中的 顶点、片元着色器函数是否一样
update();//设置拖拽窗口改变大小时，画面自适应更改分辨率
window.addEventListener('resize',function() { camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth,window.innerHeight)
})function update() {requestAnimationFrame(update);renderer.render(scene,camera);
}//==============================加载模型================================================
//加载GLB模型，传入路径、加载完成的回调、加载失败的回调
function loadModelGLB(path,succeed,fail)
{const loader =new GLTFLoader();loader.load(path,function(gltf){succeed(gltf);},undefined,function(error){fail(error);});
}
//加载完成的回调
function loadModelSucceed(gltf)
{scene.add(gltf.scene);
}
//加载失败回调
function loadModelFail(msg)
{console.error(msg);
}
//==============================加载模型 END================================================