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

场景就添加进来了。

相关推荐
Avicli12 小时前
Gemini3 生成的基于手势控制3D粒子圣诞树
前端·javascript·3d
二狗哈13 小时前
Cesium快速入门15:图元Primitive创建图像物体
开发语言·javascript·3d·webgl·cesium·地图可视化
zl_vslam14 小时前
SLAM中的非线性优-3D图优化之相对位姿Between Factor右扰动(八)
人工智能·算法·计算机视觉·3d
小白狮ww16 小时前
挥手点亮圣诞:AI 3D 魔法树教程
人工智能·深度学习·机器学习·3d·音视频·图片处理·动作识别
姓林君17 小时前
ZW3D二次开发_获取造型的投影面积及最大长宽
3d
GIS遥遥17 小时前
2025cesium进阶教程(6)| webgis智慧城市开发,3DTiles 卷帘对比效果(附完整源码)
microsoft·3d·智慧城市·cesium·gis开发·webgis开发
NueXini17 小时前
Unity 3D MMO RPG手游征服2GB设备之历程
3d·unity·性能优化·游戏引擎·优化·rpg·mmo
元境1 天前
“3D数字内容创新发展高峰论坛”在京成功举办,多项重要合作与课题启动
3d
song5011 天前
鸿蒙 Flutter 图像识别进阶:物体分类与花卉识别(含离线模型)
人工智能·分布式·python·flutter·3d·华为·分类
中维ZWPD1 天前
工程行业数智化转型:挑战与破局之路
大数据·人工智能·科技·物联网·3d