BIM轻量化之路（三）-threejs加载GLTF

最新推荐文章于 2023-12-31 17:35:13 发布

nihaozhe

最新推荐文章于 2023-12-31 17:35:13 发布

阅读量9.1k

点赞数 4

分类专栏： bim 文章标签： bim

本文链接：https://blog.csdn.net/nihaozhe/article/details/109068388

版权

bim 专栏收录该内容

5 篇文章 20 订阅

订阅专栏

一、web端加载模型文件

前面获取gltf文件就可以使用threejs进行展示了。Threejs官网上有很多加载各种模型格式的例子，其中也包括load gltf，
地址:https://threejs.org/examples/?q=load#webgl_loader_gltf

var loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
loader.load( 'DamagedHelmet.gltf', function ( gltf ) {//加载文件
   gltf.scene.traverse( function ( child ) {//遍历子元素
      if ( child.isMesh ) {
         roughnessMipmapper.generateMipmaps( child.material );
      }
   } );
   scene.add( gltf.scene );//添加到场景
   roughnessMipmapper.dispose();
   render();//重新渲染场景
} );

只要将文件路径修改为我们的文件路径就可以加载进来了
加载效果如下:
在这里插入图片描述
示例代码下载：https://download.csdn.net/download/nihaozhe/12922363

二、threejs

1.threejs教程

要进行threejs的开发首先要了解其原理和功能，它是基于webgl发展起来的一套web3d引擎，webgl因为接口复杂需要对计算机图形了解比较深入才能随心使用，入门门槛比较高，threejs对webgl进行了封装，开发者不需要了解图形渲染的细节，只需要调用其接口就可实现简单的3d展示，threejs 各个版本比较混乱，存在不向下兼容的情况，开发需要注意这一点，最好使用新版本。
网上有很多教程
教程：http://www.hewebgl.com/article/articledir/1
郭老师的教程：http://www.yanhuangxueyuan.com/
学习完后大概了解什么是场景、摄像机、光、渲染器等基本概念，这个和unity的开发很像，但是threejs没有辅助的开发工具，需要通过代码来调试调整。
谷歌浏览器有个可以查看threejs的插件Three.js Developer Tools，可以在谷歌市场上下载安装。
可查看当前场景灯光、元素等信息

2.示例代码说明

完整加载代码如下（示例）：

<script>
    if (!Detector.webgl) Detector.addGetWebGLMessage();//判断浏览器是否支持webgl
    let scene = new THREE.Scene();//初始化场景
    let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000000);//初始化摄像机
    camera.position.set(0, 101120, 101120);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    let renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("canvas-model-view"),
        antialias: true, //设置抗锯齿
        alpha: true, //背景透明
        autoClear: true,
        logarithmicDepthBuffer: true
    });
    renderer.setClearColor(0xD6E0EB, 0.0); //设置渲染器背景颜色
    renderer.setSize(window.innerWidth, window.innerHeight);

    //四个方向的平行光
    let directionalLight = new THREE.DirectionalLight(0xffffff, .8);
    directionalLight.position.set(1, 0, 0);
    let directionalLight3 = new THREE.DirectionalLight(0xffffff, .8);
    directionalLight3.position.set(-1, 0, 0);
    let directionalLight1 = new THREE.DirectionalLight(0xffffff, .8);
    directionalLight1.position.set(0, 0, 1);
    let directionalLight2 = new THREE.DirectionalLight(0xffffff, .8);
    directionalLight2.position.set(0, 0, -1);
    scene.add(directionalLight);
    scene.add(directionalLight1);
    scene.add(directionalLight2);
    scene.add(directionalLight3);

    //环境光
    let ambient = new THREE.AmbientLight(0xffffff, .6);
    scene.add(ambient);

    //加载模型文件
    let gLTFLoader = new THREE.GLTFLoader()
    let dracoLoader = new THREE.DRACOLoader();
    dracoLoader.setDecoderPath('examples/js/libs/draco/gltf/');
    dracoLoader.setDecoderConfig({type: 'js'});
    gLTFLoader.setDRACOLoader(dracoLoader);
    gLTFLoader.load('model/model.gltf', function (obj) {
        console.log(obj);
        scene.add(obj.scene);
        document.getElementById('loading').style.display = 'none';
        render();
    }, function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    }, function (error) {
        console.log('load error!' + error.getWebGLErrorMessage());
    })
    console.log(THREE.REVISION);

    function render() {
        renderer.render(scene, camera);//执行渲染操作
    }

    render();
    //操作控制
    let controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
    controls.addEventListener('change', render);//监听鼠标、键盘事件
    //辅助线
    let axisHelper = new THREE.AxisHelper(50050);
    scene.add(axisHelper);
</script>