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

场景就添加进来了。

相关推荐
军军君0116 小时前
Three.js基础功能学习七:加载器与管理器
开发语言·前端·javascript·学习·3d·threejs·三维
__water16 小时前
RHK《模型贴图自由更换位置》
unity·贴图·模型贴图·移动不丢失
WebGISer_白茶乌龙桃17 小时前
Cesium实现“悬浮岛”式,三维立体的行政区划
javascript·vue.js·3d·web3·html5·webgl
da_vinci_x1 天前
PS 场景美术革命:3 分钟量产 4K 无缝贴图,从此告别“Offset”去缝加班
人工智能·游戏·prompt·aigc·贴图·技术美术·游戏美术
UnderTurrets1 天前
A_Survey_on_3D_object_Affordance
pytorch·深度学习·计算机视觉·3d
Hao_Harrision1 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨| ThreeDBackgroundBoxes(3D背景盒子组件)
前端·3d·typescript·react·tailwindcss·vite7
AI浩3 天前
LabelAny3D: Label Any Object 3D in the Wild
3d
学無芷境3 天前
vesselFM: A Foundation Model for Universal 3D Blood Vessel Segmentation
3d
CG_MAGIC3 天前
云渲染时能否关机或断网?
3d·云渲染·建模教程·渲云渲染·3d软件
拾荒的小海螺3 天前
开源项目:Three.js 构建 3D 世界的工具库
javascript·3d·开源