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

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

标签指示线参考我的上一篇文章

引言

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到1mouse.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);// 设置场景背景色 envMapTexturescene.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;// 初始化 CSS3DRendererconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";// 创建CSS3DSpriteconst 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>";}// 创建CSS3DSpriteconst 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到1mouse.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>