我要评论模型加载功能探索，用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.innerheight
camera.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================================================
发表评论