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

场景就添加进来了。

相关推荐
军军君0112 小时前
Three.js基础功能学习十八:智能黑板实现实例五
前端·javascript·vue.js·3d·typescript·前端框架·threejs
军军君0115 小时前
Three.js基础功能学习十六:智能黑板实现实例三
前端·javascript·css·vue.js·3d·前端框架·threejs
海伯森技术17 小时前
海伯森同轴式3D线光谱共焦传感器
3d
zhooyu17 小时前
利用叉乘判断OpenGL中的左右关系
c++·3d·opengl
web_小码农18 小时前
CSS 3D动画 旋转木马示例(带弧度支持手动拖动)
javascript·css·3d
天宝耐特19 小时前
L2pro+P1搭配LCC-3DGS,实现施工过程“可测量、可漫游、可追溯”的3D永久存档
3d·三维数字化·数字化存档·手持扫描仪·灵光l2pro·施工数字化·p1空间相机
CG_MAGIC20 小时前
Blender幕后花絮:幕后大门
3d·blender·贴图·效果图·渲云渲染
GIS数据转换器20 小时前
车辆监控管理系统
人工智能·3d·无人机·知识图谱·旅游
小白狮ww20 小时前
3 秒出全纹理!TRELLIS.2 实现单图生成高分辨率 3D 资产
图像处理·人工智能·3d·语言模型·微软·开源·3d内容生成
云飞云共享云桌面21 小时前
研发部门使用SolidWorks和ug,cad,设计共享云桌面应该怎么选?
运维·服务器·网络·人工智能·3d