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

场景就添加进来了。

相关推荐
AndrewHZ3 小时前
【图像处理基石】什么是光栅化?
图像处理·人工智能·算法·计算机视觉·3d·图形渲染·光栅化
二狗哈4 小时前
Cesium快速入门33:tile3d设置样式
3d·状态模式·webgl·cesium·地图可视化
接着奏乐接着舞。6 小时前
3D地球可视化教程 - 第6篇:蜂巢网格与自定义几何体
前端·vue.js·3d·threejs
戴西软件8 小时前
戴西软件3DViz Convert:解锁三维数据流动,驱动一体化协同设计
大数据·人工智能·安全·3d·华为云·云计算
军军君011 天前
Three.js基础功能学习一:环境资源及基础知识
开发语言·javascript·学习·3d·前端框架·threejs·三维
EliseL1 天前
SuperMap iClient3D for WebGL如何加载iDesktopX 场景美化绘制资产
3d·webgl·三维
KoalaShane1 天前
Web 3D设计[Three.js]关于右键点击Canvas旋转模型,在其他元素上触发右键菜单问题
前端·javascript·3d
CG_MAGIC1 天前
SketchUp贴图失真全场景解决办法
贴图·sketchup·贴图失真
xwz小王子1 天前
Mini3DV 2025 | 观点总结:具身智能前沿与展望
人工智能·3d
扯淡的闲人1 天前
【本地 3D 渲染引擎深度开发 (Developer‘s Bible)】
3d