Three.js 多细节层次

Three.js 多细节层次

• 概述
• 代码

概述

多细节层次 —— 在显示网格时，根据摄像机距离物体的距离，来使用更多或者更少的几何体来对其进行显示。

每一个级别都和一个几何体相关联，且在渲染时，可以根据给定的距离，来在这些级别对应的几何体之间进行切换。 通常情况下，你会创建多个几何体，比如说三个，一个距离很远（低细节），一个距离适中（中等细节），还有一个距离非常近（高质量）。

代码

在改变相机的位置时加载的mesh会对应改变

var lod = new THREE.LOD();

    var material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );

    for (var i = 0; i < 3; i++) {

        var geometry = new THREE.IcosahedronBufferGeometry(10, 3 - i)

        var mesh = new THREE.Mesh(geometry, material);

        lod.addLevel(mesh, i * 40);

    }

    scene.add(lod);