Threejs使用LOD根据摄像机距离物体的距离显示不同的物体-阿里云开发者社区

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

2022-10-19 888

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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);
}