devbox
小舞很执着
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小舞很执着 | 2024-08-04 16:13:18

赞

踩

threejs点击模型弹出信息框

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

标签指示线参考我的上一篇文章
three.js模型双击高亮选中轮廓

引言

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

准备工作

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

npm install three

  • 1

对于后处理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";

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

配置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; // 存储定时器

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

创建双击交互事件onMouseDblclick

addEventListener("dblclick", onMouseDblclick, false);

  • 1

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

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);
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

获取与射线相交的对象数组函数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);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

定义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);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

渲染函数设置

        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); // 请求下一帧
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

全部代码

<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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
  • 466
  • 467
  • 468
  • 469
  • 470
  • 471
  • 472
  • 473
  • 474
  • 475
  • 476
  • 477
  • 478
  • 479
  • 480
  • 481
  • 482
  • 483
  • 484
  • 485
  • 486
  • 487
  • 488
  • 489
  • 490
  • 491
  • 492
  • 493
  • 494
  • 495
  • 496
  • 497
  • 498
  • 499
  • 500
  • 501
  • 502
  • 503
  • 504
  • 505
  • 506
  • 507
  • 508
  • 509
  • 510
  • 511
  • 512
  • 513
  • 514
  • 515
  • 516
  • 517
  • 518
  • 519
  • 520
  • 521
  • 522
  • 523
  • 524
  • 525
  • 526
  • 527
  • 528
  • 529
  • 530
  • 531
  • 532
  • 533
  • 534
  • 535
  • 536
  • 537
  • 538
  • 539
  • 540
  • 541
  • 542
  • 543
  • 544
  • 545
  • 546
  • 547
  • 548
  • 549
  • 550
  • 551
  • 552
  • 553
  • 554
  • 555
  • 556
  • 557
  • 558
  • 559
  • 560
  • 561
  • 562
  • 563
  • 564
  • 565
  • 566
  • 567
  • 568
  • 569
  • 570
  • 571
  • 572
  • 573
  • 574
  • 575
  • 576
  • 577
  • 578
  • 579
  • 580
  • 581
  • 582
  • 583
  • 584
  • 585
  • 586
  • 587
  • 588
  • 589
  • 590
  • 591
  • 592
  • 593
  • 594
  • 595
  • 596
  • 597
  • 598
  • 599
  • 600
  • 601
  • 602
  • 603
  • 604
  • 605
  • 606
  • 607
  • 608
  • 609
  • 610
  • 611
  • 612
  • 613
  • 614
  • 615
  • 616
  • 617
  • 618
  • 619
  • 620
  • 621
  • 622
  • 623
  • 624
  • 625
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/928589
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号