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里面。

场景就添加进来了。

相关推荐
在下胡三汉1 小时前
GLTF 与 USDZ:电商增强现实和虚拟现实的最佳3D模型格式
3d·ar·vr
三维频道19 小时前
深度解析:3D-DIC技术如何精准表征复合材料的变形与损伤演化?
人工智能·计算机视觉·3d·全场应变测量·dic技术·新拓三维·复合材料力学表征
DisonTangor1 天前
【阿里拥抱开源】LingBot-Map:用于流式3D重建的几何上下文转换器
机器学习·3d·机器人·开源
wei_shuo1 天前
零门槛开发 3D 数字人:魔珐星云开放平台接入实战
3d·数字人·魔珐星云
神探小白牙1 天前
3D饼图,带背景图和自定义图例(threejs)
开发语言·前端·javascript·3d·vue
天人合一peng1 天前
Unity 3D 电脑端和手机端都实现画线与清除功能
3d·unity·智能手机
kobesdu1 天前
当几何失效时:3D激光SLAM退化场景的本质与应对策略
人工智能·机器学习·3d
木斯佳1 天前
HarmonyOS 数据可视化实战:封装一个可复用的 3D 热点词球卡片组件
3d·信息可视化·harmonyos
摄影图2 天前
智慧城市数字孪生素材 多元风格适配各类创作需求
信息可视化·aigc·智慧城市·贴图·插画
代数狂人2 天前
《深入浅出Godot 4与C# 3D游戏开发》第二章:编辑器导航
3d·编辑器·游戏引擎·godot