让模型边缘高亮起来吧！——Three.js优化点击选中效果

2022-11-01 21:11:54

在 Three.js 中高效实现点击选中模型和高亮效果

在 Three.js 的世界中，创建交互式 3D 场景时，经常需要实现点击选中模型的功能。然而，对于复杂的场景或大量模型，简单的选中效果可能会对帧率造成负面影响。本文将探讨使用材质和自定义属性的优化技巧，以及如何有效地实现模型边缘高亮效果。

材质优化

使用材质来实现选中效果可以提高帧率。首先，创建一个具有透明度的材质：

const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 0.5
});

将此材质应用于模型，并在自定义属性中存储选中状态：

model.userData.isSelected = false;

在渲染循环中，根据选中状态更新材质颜色：

if (model.userData.isSelected) {
  material.color = new THREE.Color(0xff0000);
} else {
  material.color = new THREE.Color(0xffffff);
}

模型边缘高亮

通过调整材质的透明度，可以优化模型边缘高亮效果。首先，将材质的透明度设置为 0：

material.transparent = true;
material.opacity = 0;

选中时，将透明度设置为 1：

material.opacity = 1;

示例代码

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 立方体模型
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 0
});
const cube = new THREE.Mesh(geometry, material);
cube.userData.isSelected = false;
scene.add(cube);

// 点击事件监听器
cube.addEventListener("click", () => {
  cube.userData.isSelected = !cube.userData.isSelected;
});

// 渲染循环
const animate = () => {
  requestAnimationFrame(animate);

  // 更新材质颜色
  if (cube.userData.isSelected) {
    material.color.set(0xff0000);
  } else {
    material.color.set(0xffffff);
  }

  // 渲染场景
  renderer.render(scene, camera);
};

animate();