## three.js (四)离散层次细节level of details 原

liyong2

LOD 处理比较大的外部地面场景中比较有用， 一般用于绘制地形。 首先通过可视体的切割删除不用的地形块，接着通过LOD 对照相机不同距离的地形块进行层次细节调整。

``````myGame.Earth = function(){
THREE.Object3D.call(this);
this.curPatches = [];
this.patches = [];
this.width = 5;
this.height = 5;
this.patch_width = 1;
this.patch_height = 1;
for(var i = 0; i < this.height; i++)
{
for(var j = 0; j < this.width; j++)
{
this.patches.push(1);//distance ---> detail 0 1*1
}
}
};

myGame.Earth.prototype = new THREE.Object3D();``````

``var earth = new myGame.Earth();``

earth中的每一个块是 一个Mesh 对象，底层的几何体是一个PlaneGeometry

curPatches 用于存放当前组成earth的块， 当细节层次需要改变的时候这些块将被丢弃，而重新构造新的块。

patches用于存储当前块的细节层次。

``````myGame.Earth.prototype.setDetails = function(camera){
var diff = new THREE.Vector3();
var standard = this.patch_width;
var pos = new THREE.Vector3();
for(var i = 0; i < this.height; i++)
{
for(var j = 0; j < this.width; j++)
{
pos.set(-this.width/2*this.patch_width+j*this.patch_width+this.patch_width/2,
0,
-this.height/2*this.patch_height+i*this.patch_height+this.patch_height/2);

var dist = diff.sub(camera.position, pos).length();
if(dist < 2*standard)
this.patches[i*this.width+j] = 0;
else if(dist < 4*standard)
this.patches[i*this.width+j] = 1;
else if(dist < 6*standard)
this.patches[i*this.width+j] = 2;
else
this.patches[i*this.width+j] = 3;
}
}
for(var i = 0; i < this.curPatches.length; i++)
{
this.remove(this.curPatches[i]);
}
var mat = new THREE.MeshBasicMaterial({color:0xff0000, wireframe:true});
for(var i = 0; i < this.patches.length; i++)
{
var pl;
var detail = this.patches[i];
console.log(detail);
if(detail == 0)
pl = new THREE.PlaneGeometry(this.patch_width, this.patch_height, 10, 10);
else if(detail == 1)
pl = new THREE.PlaneGeometry(this.patch_width, this.patch_height, 5, 5);
else if(detail == 2)
pl = new THREE.PlaneGeometry(this.patch_width, this.patch_height, 2, 2);
else
pl = new THREE.PlaneGeometry(this.patch_width, this.patch_height, 1, 1);
var obj = new THREE.Mesh(pl, mat);
obj.position.set(-this.width/2*this.patch_width+i%this.width*this.patch_width+this.patch_width/2,
-this.height/2*this.patch_height+ (this.height-~~(i/this.width))*this.patch_height+this.patch_height/2,
0);
this.curPatches.push(obj);
}
};``````

``````function animate()
{
requestAnimationFrame(animate);
controls.update(clock.getDelta());
var vec = new THREE.Vector3();
var dist = vec.sub(camera.position, camera.oldPosition).length();
if(dist > earth.patch_width)
{
camera.oldPosition.copy(camera.position);
earth.setDetails(camera);
}
render();
}``````

### liyong2

three.js创建简单的法向贴图

Bruce_wjh
2018/09/21
0
0
three.js创建简单的凹凸贴图

Bruce_wjh
2018/09/12
0
0
[译文] 如何高效渲染庞大的地形 - Rendering large terrains

Mahabharata_
2017/05/17
0
0

oschina
2015/09/22
7.3K
13
three.js简介 —— 3D框架

threejs 随着HTML5的普及，网页的表现能力越来越强大，浏览器提供了WebGL接口，可以通过调用对应API进行3D图形的绘制，Three.js在这些基础接口之上又做了一层封装。 原文链接 特点 Three.js...

bestvist
2017/12/26
0
0

springboot全家桶，集成shiro，rabbitmq，redis， mybatis，druid，swagger

devils_os
9分钟前
2
0

9分钟前
2
0

20分钟前
1
0

24分钟前
1
0
【Git】ignore文件不生效

Areya
26分钟前
1
0