文档章节

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

liyong2
 liyong2
发布于 2012/09/18 10:49
字数 632
阅读 264
收藏 0

 

 

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

这里采用最简单的LOD 方法。

 

首先地形有n*n 的块构成, 这些块共同构成一个大平面;

首先根据每个块到照相机的距离 计算细节层次, 

例如假设由5*5 个块构成地形, 每个块1*1大小, 有4个细节层次, 

当块距离照相机 小于2 层次 0

距离小于4  层次 1

小于6 层次 2

其它层次 3

 

首先构造一个Object3D 作为整个地面的代表。

 

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用于存储当前块的细节层次。

 

关键的setDetails 函数用于调节块的细节, 首先计算所有块到照相机的距离 得到细节层次; 接着删除旧的所有平面, 接着再构建新的块加入到场景中。 

 

 

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);
        this.add(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

liyong2

粉丝 51
博文 196
码字总数 64732
作品 0
广州
程序员
私信 提问
three.js创建简单的法向贴图

版权声明:本文为博主原创文章,欢迎读者转载学习,转载请注明文章出处。 https://blog.csdn.net/qq_37338983/article/details/82804197 在上一节,我们用了three.js创建了简单的凹凸贴图效果...

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

版权声明:本文为博主原创文章,欢迎读者转载学习,转载请注明文章出处。 https://blog.csdn.net/qq_37338983/article/details/82663063 有时候我们需要某个场景或者物体突出其凹凸特征,让物...

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

翻译:RyuZhihao123 时间:2017/5/16(大三下学期) 原文链接:Render large terrains - pheelicks Rendering large terrains Today we’ll look at how to efficiently render a large terr......

Mahabharata_
2017/05/17
0
0
如何在 Web 上构建虚拟现实

有人认为虚拟现实将在 2020 年达到 70 亿美元的价值。在那之前,web 肯定不会一直停留于 2D 环境。实际上,已经有一些简单的方法可以将虚拟现实带进浏览器了。而且那弄起来也非常有趣! 要开...

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

搭建了一个SpringBoot的模板,下载即可作为单体应用的服务后台模板 项目地址:https://gitee.com/devilscode/springboot_template 项目集成框架 springboot 作为基础框架 shiro 权限管理 ra...

devils_os
9分钟前
2
0
云服务器的优势有哪些?

与传统的服务器相比,云服务器有多种显著的优势,因此近年来云服务器租用一直都很受消费者的欢迎。 那么云服务器都有哪些优势呢? 云服务器的稳定性很好 虚拟主机是很多用户建站的首选方案,这...

云漫网络Ruan
9分钟前
2
0
好程序员web前端学习路线分享CSS浮动-清除浮动篇

好程序员web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动   这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响。那么到底会有什么影响呢? 1.高度塌陷   ...

好程序员官方
20分钟前
1
0
我有酒,你有故事吗?

记录学习的每一秒,巨杉技术社区有奖征文全新启动! 如果, 你热爱数据技术,乐于尝(zhe)试(teng), 又喜欢写点什么~ 那么, 无论你是架构大佬,还是DBA大神, 只要你愿意通过文字分享你...

巨杉数据库
24分钟前
1
0
【Git】ignore文件不生效

简介 使用git的过程中, 某些文件可能不希望上传到服务器,例如日志、本地化配置等信息。这时候,我们可以通过配置.gitignore文件忽略这些文件的提交。 配置.gitignore 常见的配置如下: HELP...

Areya
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部