GIS开发:Threejs加载gltf模型

Posted 技术几句杂谈

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了GIS开发:Threejs加载gltf模型相关的知识,希望对你有一定的参考价值。

使用threejs加载gltf模型,可以在模型的基础上,进行多种效果的渲染,达到良好的效果。
threejs加载gltf模型,是以扩展的形式,将加载的js代码,放在example文件夹,所以,在使用的时候,要额外引用GLTFLoader.js,具体的路径如下:three/examples/js/loaders/GLTFLoader.js,需要使用import的方式进行使用,引用 three/examples/jsm/loaders/GLTFLoader.js中的文件。
引用threejs中的鼠标控制操作类库,使鼠标可以在场景中进行控制:
<script ></script>
//创建场景

scene = new THREE.Scene();

scene.background = new THREE.Color(0xcfcfcf);

//创建相机,设置相机的位置

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

 camera.position.set(0, 100, 150);

//灯光效果

 var ambient = new THREE.AmbientLight(0xffffff);

 scene.add(ambient);

//创建场景渲染

renderer = new THREE.WebGLRenderer({ antialias: true    });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

详细的关联代码,参见threejs的样例

//添加gltf

 var loader = new THREE.GLTFLoader();

  loader.load('模型文件路径', function (gltf) {

      model = gltf.scene;

       //场景中添加模型文件

                scene.add(model);

                model.traverse(function (gltf) {

                    if (gltf.isMesh) {

                        //设置mesh的一些属性

                    }

                }); 

              //设置整体场景的比例

                model.scale.set(10, 10, 10); 

            });


gltf模型加载效果:




以上是关于GIS开发:Threejs加载gltf模型的主要内容,如果未能解决你的问题,请参考以下文章

surfer如何导出三维gltf文件

Cesium + Blender 实现简单GIS

Cesium + Blender 实现简单GIS

Cesium + Blender 实现简单GIS

如何在加载到场景之前将 OBJ/FBX 转换为 GLTF(使用 Threejs)

gis和threejs的学习资料