在Three.js中实现模型点击高亮：整合EffectComposer与OutlinePass的终极指南

54 阅读 0 评论 0 点赞

效果【后期实现鼠标点击选中轮廓后给出一个弹窗显示相应的模型信息】

引言

Three.js不仅让WebGL的3D图形编程变得简单易懂，还通过其强大的扩展库支持丰富的后期处理效果，为3D场景增添无限魅力。本篇文章将引导您深入了解如何在Three.js项目中，利用EffectComposer结合一系列后期处理Pass（如OutlinePass、SMAAPass等）来实现场景中模型的点击高亮效果，提升用户交互体验。

准备工作

首先，确保您的项目中已正确安装并引入了Three.js及其相关后处理库。可以通过以下命令安装必要的依赖：

npm install three

对于后处理Pass，由于它们通常位于three/examples目录下，可能需要手动下载或使用npm包管理器安装对应的库。

导入所需模块

在您的JavaScript文件顶部，导入实现高亮效果所需的模块：

// 用于模型边缘高亮
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";
import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";

配置EffectComposer与Passes

EffectComposer：创建一个EffectComposer实例，它是所有后期处理效果的容器。
RenderPass：首先添加一个RenderPass，用于渲染基础场景到一张纹理上。
OutlinePass：紧接着添加OutlinePass，并配置要高亮的模型。
FXAA/SMAA Pass：可选地加入抗锯齿Pass，如FXAAShader或SMAAPass，提高边缘平滑度。
UnrealBloomPass：如果需要，还可以添加UnrealBloomPass以增强光照和视觉效果。

初始化`EffectComposer`与`Passes`

let composer;
let outlinePass;
let renderPass;
let effectFXAA;
let smaaPass;
let unrealBloomPass;
let previousPopup = null; // 存储之前的弹窗
let popupTimeout = null; // 存储定时器

创建双击交互事件`onMouseDblclick`

addEventListener("dblclick", onMouseDblclick, false);

实现双击交互，获取与射线相交的对象数组

function onMouseDblclick(event) {
  let intersects = getIntersects(event);
  if (intersects.length !== 0 && intersects[0].object instanceof THREE.Mesh) {
    let selectedObject = intersects[0].object;
    let selectedObjects = [];
    selectedObjects.push(selectedObject.parent);
    outlineObj(selectedObjects);
  }
}

获取与射线相交的对象数组函数`getIntersects`

//获取与射线相交的对象数组
function getIntersects(event) {
  let rayCaster = new THREE.Raycaster();
  let mouse = new THREE.Vector2();

  //通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; //这里为什么是-号，没有就无法点中

  //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
  rayCaster.setFromCamera(mouse, camera);
  return rayCaster.intersectObjects(scene.children, true);
}

定义`outlineObj`函数，进行高亮显示

其中轮廓高亮弹窗自行设置

function outlineObj(selectedObjects) {
  // 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
  // 用于模型边缘高亮
  composer = new EffectComposer(renderer);
  composer.renderTarget1.texture.outputColorSpace = THREE.sRGBEncoding;
  composer.renderTarget2.texture.outputColorSpace = THREE.sRGBEncoding;
  composer.renderTarget1.texture.encoding = THREE.sRGBEncoding;
  composer.renderTarget2.texture.encoding = THREE.sRGBEncoding;

  // 新建一个场景通道  为了覆盖到原来的场景上
  renderPass = new RenderPass(scene, camera);
  composer.addPass(renderPass);
  // 物体边缘发光通道
  outlinePass = new OutlinePass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    scene,
    camera,
    selectedObjects
  );
  outlinePass.selectedObjects = selectedObjects;
  outlinePass.edgeStrength = 10.0; // 边框的亮度
  outlinePass.edgeGlow = 0.5; // 光晕[0,1]
  outlinePass.usePatternTexture = false; // 是否使用父级的材质
  outlinePass.edgeThickness = 1.0; // 边框宽度
  outlinePass.downSampleRatio = 1; // 边框弯曲度
  outlinePass.pulsePeriod = 5; // 呼吸闪烁的速度
  outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)); // 呼吸显示的颜色
  outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0); // 呼吸消失的颜色
  outlinePass.clear = true;
  composer.addPass(outlinePass);
  // 自定义的着色器通道 作为参数
  // effectFXAA = new ShaderPass(FXAAShader);
  // effectFXAA.uniforms.resolution.value.set(
  //   1 / window.innerWidth,
  //   1 / window.innerHeight
  // );
  // effectFXAA.renderToScreen = true;
  // composer.addPass(effectFXAA);
  // // 抗锯齿
  // smaaPass = new SMAAPass();
  // composer.addPass(smaaPass);
  // // 发光效果
  unrealBloomPass = new UnrealBloomPass();
  unrealBloomPass.strength = 0.1;
  unrealBloomPass.radius = 0;
  unrealBloomPass.threshold = 1;
  composer.addPass(unrealBloomPass);

  scene.background = new THREE.Color(0x1b1824);
}

渲染函数设置

if (composer) { composer.render(scene, camera); }: 这部分代码检查是否存在一个composer对象（即EffectComposer实例），如果存在，则调用其render方法。EffectComposer是Three.js的一个后处理工具，用于组合多种后期处理效果（如模糊、高光、抗锯齿等），它在基础渲染之上添加额外的视觉效果。这行代码确保了所有的后期处理Pass（如之前提到的OutlinePass、SMAAPass等）被正确执行。

//渲染循环函数
function render() {
  renderer.render(scene, camera); // 执行渲染操作
  renderer.autoClear = true;
  controls.update(); // 更新控制器
  proxy.labelRender.render(scene, camera); // 渲染 CSS3D 标签
  if (composer) {
    composer.render(scene, camera);
  }
  requestAnimationFrame(render); // 请求下一帧
}

全部代码

<template>
  <!-- 用于展示Three.js场景的HTML容器 -->
  <div id="my-three"></div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import * as THREE from "three"; // 导入Three.js库
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 导入轨道控制器以实现场景的旋转、缩放等交互
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; // 导入GLTF模型加载器
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
import {
  CSS2DRenderer,
  CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import {
  CSS3DRenderer,
  CSS3DSprite,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";

// 用于模型边缘高亮
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";
import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";

const state = reactive({
  pointerLineX: 90,
  pointerLineY: 90,
  pointerLineZ: -10,
});

let composer;
let outlinePass;
let renderPass;
let effectFXAA;
let smaaPass;
let unrealBloomPass;
let previousPopup = null; // 存储之前的弹窗
let popupTimeout = null; // 存储定时器
// 初始化CSS2DRenderer
// const labelRenderer = new CSS2DRenderer();
// labelRenderer.setSize(window.innerWidth, window.innerHeight);
// labelRenderer.domElement.style.position = "absolute";
// labelRenderer.domElement.style.top = "0px";
// document.body.appendChild(labelRenderer.domElement);

const { proxy } = getCurrentInstance(); // 获取当前Vue组件实例

const gui = new GUI();

// 设置cube纹理加载器,立方体纹理加载器
// const cubeTextureLoader = new THREE.CubeTextureLoader();
// // 设置环境贴图
// const envMapTexture = cubeTextureLoader.load([
//   "../../public/csjkbz.jpg",
//   "../../public/csjkbz.jpg",
//   "../../public/csjkbz.jpg",
//   "../../public/csjkbz.jpg",
//   "../../public/csjkbz.jpg",
//   "../../public/csjkbz.jpg",
// ]);
onMounted(() => {
  document.getElementById("my-three")?.appendChild(renderer.domElement); // 将渲染器的DOM元素挂载到页面上
  init(); // 初始化场景、相机和光源
  // renderModel(); // 设置渲染参数
  gltfModel1(); // 加载GLTF模型
  render(); // 启动渲染循环
});

// 定义场景宽度和高度
const width = window.innerWidth,
  height = window.innerHeight;
const scene = new THREE.Scene(); // 创建场景
const renderer = new THREE.WebGLRenderer(); // 创建渲染器
const loader = new GLTFLoader(); // 创建GLTF加载器
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); // 创建透视相机
const controls = new OrbitControls(camera, renderer.domElement); // 创建控制器
let glbModel;

function outlineObj(selectedObjects) {
  // 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
  // 用于模型边缘高亮
  composer = new EffectComposer(renderer);
  composer.renderTarget1.texture.outputColorSpace = THREE.sRGBEncoding;
  composer.renderTarget2.texture.outputColorSpace = THREE.sRGBEncoding;
  composer.renderTarget1.texture.encoding = THREE.sRGBEncoding;
  composer.renderTarget2.texture.encoding = THREE.sRGBEncoding;

  // 新建一个场景通道  为了覆盖到原来的场景上
  renderPass = new RenderPass(scene, camera);
  composer.addPass(renderPass);
  // 物体边缘发光通道
  outlinePass = new OutlinePass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    scene,
    camera,
    selectedObjects
  );
  outlinePass.selectedObjects = selectedObjects;
  outlinePass.edgeStrength = 10.0; // 边框的亮度
  outlinePass.edgeGlow = 0.5; // 光晕[0,1]
  outlinePass.usePatternTexture = false; // 是否使用父级的材质
  outlinePass.edgeThickness = 1.0; // 边框宽度
  outlinePass.downSampleRatio = 1; // 边框弯曲度
  outlinePass.pulsePeriod = 5; // 呼吸闪烁的速度
  outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)); // 呼吸显示的颜色
  outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0); // 呼吸消失的颜色
  outlinePass.clear = true;
  composer.addPass(outlinePass);
  // 自定义的着色器通道 作为参数
  // effectFXAA = new ShaderPass(FXAAShader);
  // effectFXAA.uniforms.resolution.value.set(
  //   1 / window.innerWidth,
  //   1 / window.innerHeight
  // );
  // effectFXAA.renderToScreen = true;
  // composer.addPass(effectFXAA);
  // // 抗锯齿
  // smaaPass = new SMAAPass();
  // composer.addPass(smaaPass);
  // // 发光效果
  unrealBloomPass = new UnrealBloomPass();
  unrealBloomPass.strength = 0.1;
  unrealBloomPass.radius = 0;
  unrealBloomPass.threshold = 1;
  composer.addPass(unrealBloomPass);

  scene.background = new THREE.Color(0x1b1824);
}

function init() {
  // 光源设置
  const ambient = new THREE.AmbientLight(0xffffff, 0.5); // 添加环境光
  scene.add(ambient);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 添加平行光
  directionalLight.position.set(95, 585, 39); // 设置光源位置
  scene.add(directionalLight);

  const directionalLight4 = new THREE.DirectionalLight(0xffffff, 0.8); // 添加平行光
  directionalLight.position.set(95, 585, 39); // 设置光源位置
  scene.add(directionalLight4);

  //设置相机位置
  camera.position.set(-20, 300, 700); // 设置相机位置
  //设置相机方向
  camera.lookAt(0, 0, 0); // 设置相机朝向场景中心

  //辅助坐标轴
  const axesHelper = new THREE.AxesHelper(200); //参数200标示坐标系大小，可以根据场景大小去设置
  scene.add(axesHelper);

  // 设置场景背景色 envMapTexture
  scene.background = new THREE.Color(0x1b1824);

  // 设置渲染器像素比，适应设备分辨率
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.antialias = true;
  renderer.antialiasing = "Subpixel Morphological Anti-Aliasing"; // 使用更高级别的抗锯齿算法

  // 设置渲染器参数
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 2.5;

  // 初始化 CSS3DRenderer
  const labelRender = new CSS3DRenderer();
  labelRender.setSize(window.innerWidth, window.innerHeight);
  labelRender.domElement.style.position = "absolute";
  labelRender.domElement.style.top = "0px";
  labelRender.domElement.style.pointerEvents = "none";
  document.getElementById("my-three").appendChild(labelRender.domElement);
  proxy.labelRender = labelRender;
  // 更新控制器
  controls.update();
}

function gltfModel1() {
  // 加载GLTF模型
  loader.load(
    "../../public/yuanqu.glb",
    function (gltf) {
      // 模型加载完成后的回调函数
      glbModel = gltf.scene;
      scene.add(gltf.scene); // 将模型添加到场景中
      glbModel.traverse((object) => {
        if (object.name === "fufachejian") {
          const worldPosition = object.getWorldPosition(new THREE.Vector3());
          console.log("worldPosition", worldPosition);
          const div = document.createElement("div");
          div.className = "workshop-text";
          div.innerHTML = "<div class='fufachejian'></div>";
          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(8, 3, 50); // 调整标签位置
          object.add(tag);
          createPointerLine(
            new THREE.Vector3(200, 17, -150),
            new THREE.Vector3(200, 45, -150),
            0x00ff00,
            1,
            "#ff0000"
          );
        }
        if (object.name === "bangongqu") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          div.innerHTML = "<div class='bangonglou'></div>";

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(8, 3, 93); // 调整标签位置
          object.add(tag);
          createPointerLine(
            new THREE.Vector3(20, 103, -45),
            new THREE.Vector3(20, 131, -45),
            0x00ff00,
            1,
            "#ff0000"
          );
        }
        if (object.name === "qiye_01") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          div.innerHTML = "<div class='qiye'></div>";
          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(8, 3, 60); // 调整标签位置
          object.add(tag);
          createPointerLine(
            new THREE.Vector3(262, 40, 128),
            new THREE.Vector3(262, 68, 128),
            0x00ff00,
            1,
            "#ff0000"
          );
        }
        if (object.name === "qiye_002") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          div.innerHTML = "<div class='qiye'></div>";
          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(12, -5, 80); // 调整标签位置
          object.add(tag);
          createPointerLine(
            new THREE.Vector3(-200, 40, 128),
            new THREE.Vector3(-200, 68, 128),
            0x00ff00,
            1,
            "#ff0000"
          );
        }

        if (object.name === "chejian_06") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          // div.innerHTML = "<p>车间6</p>";

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
        }

        if (object.name === "chejian_03") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          // div.innerHTML = "<p>仓库3</p>";

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
        }

        if (object.name === "chejian_02") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          // div.innerHTML = "<p>仓库2</p>";

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
        }

        if (object.name === "chejian_01") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          // div.innerHTML = "<p>仓库1</p>";

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
        }

        if (object.name === "yuanliaolou") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          // div.innerHTML = "<p>原料楼</p>";

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(-10, -1, 38); // 调整标签位置
          object.add(tag);
        }
        if (object.name === "qizhan") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          // div.innerHTML = "<p>气站</p>";

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(-10, -1, 20); // 调整标签位置
          object.add(tag);
        }
        if (object.name === "yuanpian") {
          const div = document.createElement("div");
          div.className = "workshop-text";
          // div.innerHTML = "<p>原片仓库</p>";

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(-6, 7, 30); // 调整标签位置
          object.add(tag);
        }
        if (
          object.name === "yuchuli002" ||
          object.name === "yuchuli003" ||
          object.name === "yuchuli"
        ) {
          const div = document.createElement("div");
          div.className = "workshop-text";
          if (object.name === "yuchuli002") {
            // div.innerHTML = "<p>预处理车间1</p>";
          } else if (object.name === "yuchuli003") {
            // div.innerHTML = "<p>预处理车间2</p>";
          } else if (object.name === "yuchuli") {
            // div.innerHTML = "<p>预处理车间1</p>";
          }

          // 创建CSS3DSprite
          const tag = new CSS3DSprite(div);
          tag.position.set(-6, 7, 30); // 调整标签位置
          object.add(tag);
        }
      });
    },
    function (xhr) {
      // 加载进度回调
      const percent = Math.floor((xhr.loaded / xhr.total) * 100); // 计算加载进度百分比
      // console.log(`模型加载进度：${percent}%`);
    }
  );
}

function renderModel() {
  //渲染
  renderer.setSize(width, height); //设置渲染区尺寸
  renderer.render(scene, camera); //执行渲染操作、指定场景、相机作为参数
  // renderer.setClearColor(0x00ff00); // 设置背景颜色为绿色/
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  // 设置曝光度
  renderer.toneMappingExposure = 1; // 适当调整曝光度

  // 设置控制器的角度限制
  // controls.minPolarAngle = Math.PI / 4; // 最小极角为 45 度
  controls.maxPolarAngle = Math.PI / 1; // 最大极角为 90 度
}

// 创建指向线的函数
function createPointerLine(start, end, color, width, background) {
  // 创建指向线的几何体
  const geometry = new THREE.BufferGeometry();
  const vertices = new Float32Array([
    start.x,
    start.y,
    start.z,
    end.x,
    end.y,
    end.z,
  ]);
  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  // 创建指向线的材质
  const material = new THREE.LineBasicMaterial({
    color: "#ff0000", // 指定线的颜色
    linewidth: width, // 设置线的宽度
  });

  // 创建指向线对象
  const line = new THREE.Line(geometry, material);

  // 创建一个 Object3D 用于存放线
  const pointerGroup = new THREE.Object3D();
  pointerGroup.add(line);

  // 计算线的方向向量
  const direction = new THREE.Vector3().copy(end).sub(start).normalize();

  // 计算线头和线尾的位置, 设置圆饼偏移量
  const headPosition = new THREE.Vector3()
    .copy(start)
    .addScaledVector(direction, 31.5);
  const tailPosition = new THREE.Vector3()
    .copy(end)
    .addScaledVector(direction, -28);

  //贴图
  // 使用 TextureLoader 加载贴图
  const yxTextureLoader = new THREE.TextureLoader();
  const yxTexture = yxTextureLoader.load("../../public/label/yuandianTop.png"); // 加载贴图
  // 创建线头圆饼
  const headGeometry = new THREE.CircleGeometry(4, 32);
  const headMaterial = new THREE.MeshBasicMaterial({
    color: "#02f1ff", // 指定线尾的颜色
    side: THREE.DoubleSide, // 设置双面可见
    map: yxTexture, // 设置贴图
    transparent: true, // 设置材质为透明
  });
  const headMesh = new THREE.Mesh(headGeometry, headMaterial);
  headMesh.position.copy(headPosition);

  // 创建线尾圆饼
  const tailGeometry = new THREE.CircleGeometry(1, 32);
  const tailMaterial = new THREE.MeshBasicMaterial({
    color: "#02f1ff",
    side: THREE.DoubleSide,
  });

  const tailMesh = new THREE.Mesh(tailGeometry, tailMaterial);
  tailMesh.position.copy(tailPosition);

  // 使用 TextureLoader 加载背景纹理图片
  const backgroundMaterial = new THREE.MeshBasicMaterial({
    // map: backgroundTexture,  // 设置背景的纹理贴图
    side: THREE.DoubleSide, // 设置双面可见
    color: "#02f1ff",
  });
  const backgroundGeometry = new THREE.PlaneGeometry(
    width,
    end.distanceTo(start), // 背景的长度，即线段的长度
    1,
    1
  );
  const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
  // 设置背景的位置为线段的中点
  const midpoint = new THREE.Vector3().copy(start).add(end).multiplyScalar(0.5);
  backgroundMesh.position.copy(midpoint); // 设置背景的朝向
  // 设置背景的朝向（垂直方向上朝向相机位置）,计算垂直方向上背景朝向的点，即与相机位置相同高度的点
  const verticalLookAtPoint = new THREE.Vector3(
    camera.position.x,
    backgroundMesh.position.y,
    camera.position.z
  );
  backgroundMesh.lookAt(verticalLookAtPoint);
  // backgroundMesh.up.set(0, 1, 0);

  // 将线和背景添加到场景中
  function updateOrientation() {
    headMesh.lookAt(camera.position); // 使线头始终朝向相机
    tailMesh.lookAt(camera.position); // 使线尾始终朝向相机
    // 获取相机的水平方向向量
    const cameraDirection = camera
      .getWorldDirection(new THREE.Vector3())
      .normalize();
    const cameraHorizontalDirection = new THREE.Vector3(
      cameraDirection.x,
      0,
      cameraDirection.z
    ).normalize();
    // 让背景朝向相机的水平方向
    backgroundMesh.lookAt(
      backgroundMesh.position.clone().add(cameraHorizontalDirection)
    );
  }
  // 在渲染循环中调用更新函数
  function render() {
    updateOrientation();
    requestAnimationFrame(render);
  }
  render();
  scene.add(headMesh);
  scene.add(backgroundMesh);
  scene.add(tailMesh);
}

//渲染循环函数
function render() {
  renderer.render(scene, camera); // 执行渲染操作
  renderer.autoClear = true;
  controls.update(); // 更新控制器
  proxy.labelRender.render(scene, camera); // 渲染 CSS3D 标签
  if (composer) {
    composer.render(scene, camera);
  }
  requestAnimationFrame(render); // 请求下一帧
}

// 画布跟随窗口变化
window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight); // 重设渲染器尺寸
  camera.aspect = window.innerWidth / window.innerHeight; // 更新相机的长宽比
  renderer.autoClear = true;

  camera.updateProjectionMatrix(); // 更新相机的投影矩阵
};
window.addEventListener("keydown", function (event) {
  switch (event.key) {
    case "ArrowLeft": // 按左箭头键
      moveLeft();
      break;
    case "ArrowRight": // 按右箭头键
      moveRight();
      break;
  }
});

// 交互事件
addEventListener("dblclick", onMouseDblclick, false);
function onMouseDblclick(event) {
  let intersects = getIntersects(event);
  if (intersects.length !== 0 && intersects[0].object instanceof THREE.Mesh) {
    let selectedObject = intersects[0].object;
    let selectedObjects = [];
    selectedObjects.push(selectedObject.parent);
    outlineObj(selectedObjects);
  }
}

function moveLeft() {
  if (glbModel) {
    glbModel.position.x -= 10; // 向左移动10单位
  }
}

function moveRight() {
  if (glbModel) {
    glbModel.position.x += 10; // 向右移动10单位
  }
}
//获取与射线相交的对象数组
function getIntersects(event) {
  let rayCaster = new THREE.Raycaster();
  let mouse = new THREE.Vector2();

  //通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; //这里为什么是-号，没有就无法点中

  //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
  rayCaster.setFromCamera(mouse, camera);
  return rayCaster.intersectObjects(scene.children, true);
}
</script>

<style>
#my-three {
  /* width: 100vh;
  height: 100vh; */
}
.aline {
  height: 500px;
  background: red !important;
  width: 10px !important; /* 设置线的宽度为 10px */
  background-color: #ff0000 !important; /* 设置线的背景色为红色 */
}
.workshop-textA {
  background: red !important;
  /* height: 50px !important; */
  display: block;
}
.workshop-text .fufachejian {
  height: 20px;
  width: 60px;
  background: url("../../public/label/ffcj.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.workshop-text .bangonglou {
  height: 20px;
  width: 60px;
  background: url("../../public/label/zhglbg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.workshop-text .qiye {
  height: 20px;
  width: 60px;
  background: url("../../public/label/blcyltfwqy.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.workshop-text p {
  font-size: 0.9rem;
  font-weight: bold;
  padding: 10px;
  color: #0ff;
}

#tag {
  padding: 0px 10px;
  border: #00ffff solid 1px;
  height: 40px;
  border-radius: 5px;
  width: 65px;
}
.taga {
  display: block;
  widows: 50px;
  height: 50px;
  background: red;
}
.taga p {
  height: 50px;
  width: 50px;
  background: red;
}
</style>

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » 在Three.js中实现模型点击高亮：整合EffectComposer与OutlinePass的终极指南

点赞(0) 打赏

本文分类：文章资讯
本文标签：在Three.js中实现模型点击高亮：整合EffectComposer与OutlinePass的终极指南
浏览次数：54 次浏览
本文链接：https://freeymw.com/article/11036.html

上一篇 > PHP 寿光蔬菜大棚宣传平台-计算机毕业设计源码88288
下一篇 > 笔记 | 软件工程04：软件项目管理

评论列表共有 0 条评论

暂无评论

在Three.js中实现模型点击高亮：整合EffectComposer与OutlinePass的终极指南

效果【后期实现鼠标点击选中轮廓后给出一个弹窗显示相应的模型信息】

引言

准备工作

导入所需模块

配置EffectComposer与Passes

初始化EffectComposer与Passes

创建双击交互事件onMouseDblclick

实现双击交互，获取与射线相交的对象数组

获取与射线相交的对象数组函数getIntersects

定义outlineObj函数，进行高亮显示