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

李勇2

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();
}``````

李勇2

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

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

2012/09/18
0
0
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
7K
13

o0无忧亦无怖
18分钟前
0
0
Mac Vim配置

1.升级 vim　　 我自己 MacBook Pro 的系统还是 10.11 ，其自带的 vim 版本为 7.3 ，我们将其升至最新版： 使用 homebrew ： brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
30分钟前
0
0
vmware安装Ubuntu上不了网？上网了安装不了net-tools，无法执行ifconfig？

1.重新设置网络适配器还是不行，如下指定nat 2.还需要指定共享网络，我是在无线环境下 3.无法执行ifconfig https://packages.ubuntu.com/bionic/net-tools到这个网站下载net-tools的deb文件...

noob_chr
57分钟前
1
0

svn:E210007 svn: Cannot negotiate authentication mechanism 执行下面代码即可 sudo yum install cyrus-sasl cyrus-sasl-plain cyrus-sasl-ldap...

57分钟前
1
0
java8的时间和`Date`的对比

java8的时间和Date的对比 java8提供了新的时间接口。相对Date,Calendar,个人感觉最大的好处是对时间操作的学习成本很低，比Calendar低。 1. LocalDate,LocalTime,LocalDateTime LocalDate 代...

57分钟前
2
0