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) 代码里直接使用

    //You can use orbit controlls in your viewer