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)