glb文件材质丢失
-
按照官网教程加载glb文件,材质丢失
<script setup> import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, ComponentBase } from '@orillusion/core'; import { onMounted } from 'vue' class RotateScript extends ComponentBase { update() { // update 生命周期,主循环每一帧执行 this.object3D.rotationY += 1; } } let scene3D; onMounted(() => { initEngine3D(); }) // 初始化引擎 const initEngine3D = async () => { let canvas = document.getElementById('canvas'); await Engine3D.init({ canvasConfig: { canvas } }); // 创建根节点 scene3D = new Scene3D(); initCamera(); // initLight(); loadModel(); render(); } // 初始化相机 const initCamera = () => { // 新建摄像机实例 let cameraObj = new Object3D(); let camera = cameraObj.addComponent(Camera3D); // 根据窗口大小设置摄像机视角 camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0); // 设置相机控制器 let controller = camera.object3D.addComponent(HoverCameraController); controller.setCamera(0, 0, 15); // 添加相机节点 scene3D.addChild(cameraObj); } // 初始化光照 const initLight = () => { // 新建光照 let light = new Object3D(); // 添加直接光组件 let component = light.addComponent(DirectLight); // 调整光照参数 light.rotationX = 45; light.rotationY = 30; component.lightColor = new Color(1.0, 0.6, 0.6, 1); component.intensity = 2; // 添加光照对象 scene3D.addChild(light); } // 初始化对象 const initMesh = () => { // 新建对象 const obj = new Object3D(); // 为对象添 MeshRenderer let mr = obj.addComponent(MeshRenderer); // 设置几何体 mr.geometry = new BoxGeometry(5, 5, 5); // 设置材质 mr.material = new LitMaterial(); // 旋转 obj.addComponent(RotateScript); // 物体添加到场景中 scene3D.addChild(obj); } // 加载模型 const loadModel = async () => { let data = await Engine3D.res.loadGltf('http://47.116.33.104:9000/syber-zen-test/LH4.glb'); scene3D.addChild(data); } // 渲染 const render = () => { // 新建前向渲染业务 let renderJob = new ForwardRenderJob(scene3D); // 开始渲染 Engine3D.startRender(renderJob); } </script> <template> <div style="width:100%;height:100%"> <canvas id="canvas" width="1200" height="800" /> </div> </template>