vue、react里 加载glb类型的3D模型(可使用的技术栈推荐)
vue、react里 加载glb类型的3D模型(可使用的技术栈推荐)
·
vue
1. 你可以 用 three.js
如果想要在Vue里导入 glb 类型的模型,可以使用 Two.js 的 GLTFLoader 加载器,在解析完GLB模型之后,可以把模型添加到 Three.js 场景中显示,具体实现步骤如下:
npm install three @types /three
npm install @loaders.gl/gltf
2. 使用第三方库vue-gl 支持,里面包含很多GL viewer相关的组件
3. 使用Cesium,一款开源的3D地图引擎,可以读取GLTF格式模型也可以生成GLTF格式模型。
4.使用vue-three-fiber 一个简单的Vue 3D被动渲染库,可以加载和显示glTF模型,同时支持许多3D领域的技术。
5. 使用three-gltf-loader 加载和可视化GLTF模型
react
1.你可以使用第三方框架three.js渲染GLB格式的模型,在React中使用three.js,你可以安装
npm install --save three
然后使用以下代码导入GLB格式的模型:
import * as THREE from 'three';
//加载模型 THREE.GLTFLoader.load( '/path/to/model.glb', (gltf) => { // 模型加载成功之后的操作 } );
2.使用Cesium,一款开源的3D地图引擎,可以读取GLTF格式模型也可以生成GLTF格式模型。
3.使用three-gltf-loader 加载和可视化GLTF模型
4.可以使用第三方库react-three-fibre
来导入GLB类型3D模型,步骤如下: 1.安装react-three-fibre:
(1)
npm install react-three-fiber
(2)在项目文件结构中建立模型和贴图的文件夹
(3)定义模型的变量:
const Model = new THREE.GLTFLoader();
Model.load( /*Path to .gltf file*/ ,(gltf) => {
/*Initialize Your Model*/
});
(4) 代码里直接使用
<Canvas>
//You can use orbit controlls in your viewer
<OrbitControls>
<Model />
</OrbitControls>
</Canvas>
更多推荐
已为社区贡献15条内容
所有评论(0)