Threejs使用LOD根据摄像机距离物体的距离显示不同的物体

1，介绍

该示例使用的是 r95版本Three.js库。

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

效果图如下：

2，动画主要说明

多细节层次（LOD，Levels of Detail）

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

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

LOD – three.js中文文档 (yanhuangxueyuan.com)

如下代码添加物体到场景中时，使用LOD进行添加并设置可见距离


var lod = new THREE.LOD();// 创建一个基础材质的立方体
function createBoxGeometryBasicMaterialImg() {var texture = THREE.ImageUtils.loadTexture("assets/textures/brick-wall.jpg");var mat = new THREE.MeshPhongMaterial();mat.map = texture;// 创建一个立方体并设置大小var cubeGeometry = new THREE.BoxGeometry(8, 8, 8);var cube = new THREE.Mesh(cubeGeometry, mat);// 设置立方体位置cube.position.x = -10;cube.position.y = 3;cube.position.z = 0;return cube;
}// 创建一个基础材质的立方体
function createBoxGeometryBasicMaterial() {// 创建一个立方体并设置大小var cubeGeometry = new THREE.BoxGeometry(14, 14, 4);// MeshBasicMaterial（基础材质不会对光源有反应只会使用指定的颜色渲染）var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 设置立方体位置cube.position.x = -5;cube.position.y = 10;cube.position.z = -30;return cube;
}// 创建一个球形几何体
function createSphereGeometryLambertMaterial() {var textureLoader = new THREE.TextureLoader();// 创建一个球体var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);var cubeMaterial = new THREE.MeshStandardMaterial({map: textureLoader.load("assets/textures/brick-wall.jpg"),});// cubeMaterial.map.wrapS = THREE.RepeatWrapping;// cubeMaterial.map.wrapT = THREE.RepeatWrapping;var sphere = new THREE.Mesh(sphereGeometry, cubeMaterial);// 位置范围sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;return sphere;
}// 将立方体添加到场景中
var cube = createBoxGeometryBasicMaterial();
lod.addLevel(cube, 200);// 将立方体添加到场景中
var cube_img = createBoxGeometryBasicMaterialImg();
lod.addLevel(cube_img, 100);// 将球体添加到场景中
var sphere = createSphereGeometryLambertMaterial();
lod.addLevel(sphere, 300);scene.add(lod);function renderScene() {orbit.update();lod.update(camera)// 使用requestAnimationFrame函数进行渲染renderer.render(scene, camera);requestAnimationFrame(renderScene);
}

需要学习案例、素材、模型，请进入博客首页查看其他文章或者留言

在线预览：左本的博客 (zuoben.top)

Threejs使用LOD根据摄像机距离物体的距离显示不同的物体相关推荐

threejs 物体根据相机位置显示_Threejs学习笔记(一) 基础篇
基本概念此学习笔记主要记录使用threejs的制作http://sqace.163.com网站中用到的API和相关知识点. 一个完整的3D环境包含以下元素: 1.场景(Scene):是物体.光源等元 ...
【Unity3D】游戏物体操作 ① ( 场景简介 | 添加游戏物体 | 操作游戏物体 | 选中游戏物体 | 场景显示效果缩放 | 重命名游戏物体 | 复制游戏物体 | 删除游戏物体 | 移动物体 )
文章目录一.Scene 场景简介二.添加游戏物体三.操作游戏物体 1.选中游戏物体 2.场景显示效果缩放 3.重命名游戏物体 4.复制游戏物体 5.删除游戏物体 6.Inspector 检查器窗 ...
数据科学中常见的9种距离度量方法，包括欧氏距离、切比雪夫距离、半正矢距离等
1.欧氏距离(Euclidean Distance) 欧式距离可解释为连接两个点的线段的长度.欧式距离公式非常简单,使用勾股定理从这些点的笛卡尔坐标计算距离. 代码实现: import numpy a ...
学习笔记5——距离度量（欧氏距离、马氏距离、闵氏距离、曼哈顿距离等）
参考:深度学习中常用的几种距离度量算法 - 简书 (jianshu.com) 常见的9种距离度量方法-电子发烧友网 (elecfans.com) 1.欧氏距离欧式距离并不是尺度不变的,因此所计算的 ...
【Unity3D】物体、材质的设置、物体位移与旋转
Unity3D和Flash一样,甚至可以说是和C#一样,拖完组件,再写一系列的脚本,完成编程,甚至可以说,就是带编程脚本的3DSMAX.那么如何完成最基本的物体.材质的设置.物体位移与旋转呢?下面用一 ...
【Unity3D自学记录】NGUI之显示2D游戏物体的名字
http://www.unitymanual.com/thread-14635-1-1.html 用NGUI 显示游戏物体的名字,当然也可以显示物体的血条状态信息最终效果第一步首先找到场景中的 ...
曼哈顿距离和切比雪夫距离链接
存一下链接慢慢看曼哈顿距离和切比雪夫距离这个更清晰一些: 关于曼哈顿距离和切比雪夫距离 NN中常用的距离计算公式:欧式距离.曼哈顿距离.马氏距离.余弦.汉明距离
余弦距离（Cosine距离）与编辑距离分别是什么？各有什么优势和使用场景？
余弦距离(Cosine距离)与编辑距离分别是什么?各有什么优势和使用场景? import numpy as np from sklearn.metrics import pairwise_distan ...
2个点马氏距离计算实例_数据分析基础：距离度量方式（欧式距离、马氏距离、曼哈顿距离）...
数据分析中,为了评定数据之间的相似度,有很多不同的距离的计算方法,如欧氏距离,马氏距离等等. 欧氏距离 Euclidean distance:欧几里得距离,m维空间中两个点之间的真实距离离差平方和, ...

Threejs使用LOD根据摄像机距离物体的距离显示不同的物体

1，介绍

2，动画主要说明

多细节层次（LOD，Levels of Detail）

Threejs使用LOD根据摄像机距离物体的距离显示不同的物体相关推荐

最新文章

热门文章