gltf模型加载 与3d背景贴图

Poly Haveny

用于3d模型跟贴图下载资源

Sketchfab

里面有免费的模型

模型放到public里面

复制代码
const loader = new GLTFLoader()
      // 加载GLTF模型
      loader.load(
        '/scene.gltf',
        (gltf) => {
          // 将加载的模型添加到场景中
          scene.add(gltf.scene)
          // 现在你可以开始渲染循环了
          let angle = 0
          function animate() {
            requestAnimationFrame(animate)
            angle += 0.002
            gltf.scene.rotation.y = angle
            renderer.render(scene, camera)
          }
          animate()
        },
        // 可选:加载进度回调
        (xhr) => {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        // 可选:加载错误回调
        (error) => {
          console.log('An error happened', error)
        }
      )

就加载进来了

之后加载背景图。

点击右边的jpg,右键将图像另存为,放到public里面。

场景就添加进来了。

相关推荐
摄影图21 小时前
隐私保护数字盾牌设计图片素材 满足各类网络安全创作需求
网络·安全·aigc·贴图·插画
北城笑笑1 天前
Frontend 与 FPGA 深度融合实战解析:从技术协同到多场景落地( 前端和现场可编程门阵列 )
前端·websocket·3d·vue·fpga
新缸中之脑2 天前
HDRI-Generator: 环境贴图生成AI
人工智能·贴图
Yao.Li2 天前
PVN3D 原生 / ONNX 混合 / TRT 混合推理速度测试
人工智能·3d·具身智能
mxwin2 天前
Unity Mask 贴图:用一张纹理的 RGBA 通道分别控制 PBR 材质参数
unity·材质·贴图
threelab2 天前
引擎案例分析 02|GeoLayer 大厂地理可视化方案深度拆解
javascript·3d·webgl
Yao.Li2 天前
PVN3D TensorRT Engine 转换与测试记录
3d·具身智能
Yao.Li2 天前
PVN3D ONNX / ORT / TRT / 原生 CUDA 测试配合说明
3d
charley.layabox2 天前
新增3D桥接容器、预览运行时的场景视图,LayaAir3.4.0-beta.2再添重磅实用功能
3d
weixin_505154462 天前
打破传统界限:Bowell Studio引领3D作业指导新纪元
人工智能·3d·制造·数据安全·数字孪生·数据可视化