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

场景就添加进来了。

相关推荐
周小码10 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
大嘴带你水论文10 小时前
震惊!仅用10张照片就能随意编辑3D人脸?韩国KAIST最新黑科技FFaceNeRF解析!
论文阅读·人工智能·python·科技·计算机视觉·3d·transformer
Coovally AI模型快速验证2 天前
3D目标跟踪重磅突破!TrackAny3D实现「类别无关」统一建模,多项SOTA达成!
人工智能·yolo·机器学习·3d·目标跟踪·无人机·cocos2d
研梦非凡2 天前
CVPR 2025|基于粗略边界框监督的3D实例分割
人工智能·计算机网络·计算机视觉·3d
逻辑羊驼2 天前
VSCode+MobaXterm+X11可视化界面本地显示
运维·服务器·ubuntu·3d
二川bro2 天前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
二川bro2 天前
第24节:3D音频与空间音效实现
3d·音视频
新启航半导体有限公司2 天前
[新启航]《超薄碳化硅衬底 TTV 测量:技术挑战与解决方案》
科技·3d·制造
咔咔一顿操作3 天前
第六章 Cesium 实现简易河流效果
microsoft·3d·cesium
桃花键神3 天前
如何选择合适的 3D 建模工具:我的经验和思考
3d