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

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

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

引言

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/847612.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

探索煤化工厂巡检机器人的功能、应用及前景

探索煤化工厂巡检机器人的功能、应用及前景

大家都知道、煤化工厂是以煤为原料生产化工产品的工厂&#xff0c;存在易燃易爆、高温、中毒等隐患等。因此&#xff0c;对煤化工厂进行巡检是非常必要的。巡检旨在是定时对厂内设备运行异常、泄漏等问题&#xff0c;并及时进行处理&#xff0c;保障工作场所的安全。除了以上存…
阅读更多...
统计信号处理-匹配滤波器实现与验证（matlab仿真）

统计信号处理-匹配滤波器实现与验证（matlab仿真）

什么是匹配滤波器 匹配滤波器是一种信号处理技术&#xff0c;它用于从噪声中提取信号&#xff0c;特别是在信号与噪声比率较低的情况下。匹配滤波器之所以存在&#xff0c;是因为它在信号检测和估计方面具有几个关键的优势&#xff1a; 最大化信噪比&#xff1a;匹配滤波器设计…
阅读更多...
2024年，盘点国内数字人十大品牌！

2024年，盘点国内数字人十大品牌！

出炉了&#xff0c;2024年&#xff0c;国内数字人十大品牌。根据用户的广泛认可度和应用普及多个维度产生的报告。 2024年&#xff0c;国内数字人十大品牌分别有腾讯智影、科大讯飞、商汤数字人、硅基数字人、灰豚AI数字人、奇妙元数字人、有道数字人、万兴播报、元分身、华为…
阅读更多...
SpringCloud微服务远程接口调用

SpringCloud微服务远程接口调用

一、概念 使用springcloud将项目拆分成一个一个微服务之后&#xff0c;微服务之间的接口调用就需要通过远程的方式实现&#xff0c;这里将介绍springcloud提供的两个微服务组件来介绍如何进行微服务间的远程接口调用。 1、使用RestTEmplate LoadBalanced来实现远程接口调用及…
阅读更多...
Linux系统--Nacos的安装

Linux系统--Nacos的安装

Nacos&#xff1a;更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 随着云计算技术的不断发展&#xff0c;越来越多的企业开始将业务迁移到云端。在这个背景下&#xff0c;云原生应用的开发变得越来越重要。为了帮助企业更好地构建云原生应用&#xff0c;本文将…
阅读更多...
别再emo了，还不赶紧去考PMP，搞钱要紧~

别再emo了，还不赶紧去考PMP，搞钱要紧~

自从疫情之后经济大不如从前&#xff0c;现在大环境都不好&#xff0c;很多公司都在裁员&#xff0c;像我朋友就在上个月被裁掉了&#xff0c;虽说拿了补偿但也不可能靠那点补偿生活的&#xff0c;所以我朋友找了很久的工作&#xff0c;但是由于大环境的缺失所以导致他的薪资直…
阅读更多...
搭建 3D 智慧农场可视化

搭建 3D 智慧农场可视化

运用图扑自主研发的 HT 产品&#xff0c;全程零代码搭建 3D 轻量化 Low Poly 风格的智慧农场可视化解决方案&#xff0c;无缝融合 2D、3D 技术&#xff0c;1&#xff1a;1 还原农场的区域规划&#xff0c;展开对农作物间的网格化管理。
阅读更多...
webSecurity安全

webSecurity安全

0x01 简介 https://www.electronjs.org/zh/docs/latest/tutorial/security#6-%E4%B8%8D%E8%A6%81%E7%A6%81%E7%94%A8-websecurity 大家好&#xff0c;今天跟大家讨论的是 Electron 的安全配置选项 —— webSecurity 这在之前的文章 《Electron安全与你我息息相关》 中就已经提…
阅读更多...
C# 解决 Excel 自动适应列宽的问题

C# 解决 Excel 自动适应列宽的问题

目录 问题现象 原因分析 范例运行环境 解决问题 生成测试文本 实现自适应 小结 问题现象 通过 COM 操作 Excel 自动适应列宽的方法是 AutoFit 方法&#xff0c;该方法适于自动适应列宽或行高。 最近在我们的一款应用里发现效果并没有符合预期&#xff0c;我们提供了一…
阅读更多...
【调试笔记-20240604-Linux-为 OpenWrt-23.05 添加自己的 feed 软件包】

【调试笔记-20240604-Linux-为 OpenWrt-23.05 添加自己的 feed 软件包】

调试笔记-系列文章目录 调试笔记-20240604-Linux-为 OpenWrt-23.05 添加自己的 feed 软件包 文章目录 调试笔记-系列文章目录调试笔记-20240604-Linux-为 OpenWrt-23.05 添加自己的 feed 软件包 前言一、调试环境操作系统&#xff1a;Ubuntu 22.04.4 LTS编译环境调试目标 二、…
阅读更多...
HTML、HTML5一览

HTML、HTML5一览

文章目录 HTML简介标签基本标签格式化文本链接图像块级元素列表表格框架表单实体 HTML5 此篇用于优化csdn第一篇文章 HTML 简介 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言&#xff0c;而是一种标记语言…
阅读更多...
数据中心的中台前端风格大屏设计开发

数据中心的中台前端风格大屏设计开发

数据中心的中台前端风格大屏设计开发
阅读更多...
DevOps全面综述：从概念到实践

DevOps全面综述：从概念到实践

一、背景与概述 1.1 DevOps的起源与发展 DevOps&#xff08;Development and Operations的缩写&#xff09;是软件工程领域中的一种文化和实践方法&#xff0c;旨在促进开发团队与运维团队之间的协作&#xff0c;从而实现更高效、更可靠的软件交付。DevOps起源于敏捷软件开发方…
阅读更多...
深入了解 Postman 中的变量

深入了解 Postman 中的变量

在我们进行 API 开发和测试时&#xff0c;使用诸如 Postman 之类的工具可以极大地简化工作流程&#xff0c;提高效率。Postman 的一个强大功能就是变量&#xff08;Variables&#xff09;。利用变量&#xff0c;我们可以使我们的请求变得更加动态和灵活&#xff0c;避免重复输入…
阅读更多...
猫毛过敏的克星！宠物空气净化器，铲屎官的终极武器~

猫毛过敏的克星！宠物空气净化器，铲屎官的终极武器~

现在很多人都喜欢养猫&#xff0c;但约有10%的人会对猫咪产生过敏反应。常见的症状包括打喷嚏、流鼻涕&#xff0c;严重时甚至会呼吸困难。 过敏源依附在宠物的毛发和皮屑上&#xff0c;通过空气传播&#xff0c;遍布家中的各个角落&#xff0c;如地面、衣物和家具。这不仅增加…
阅读更多...
期权和股权有哪些含义？股权和期权有哪些区别？

期权和股权有哪些含义？股权和期权有哪些区别？

今天带你了解期权和股权有哪些含义&#xff1f;股权和期权有哪些区别&#xff1f;股权是有限责任公司或股份有限公司股东对公司享有的人身权和财产权的综合权利。期权是指赋予持有者在特定日期或之前以固定价格购买或出售资产的权利的合同。 期权有哪些含义&#xff1f; 期权是…
阅读更多...
Echarts 取消鼠标滑动时产生的竖线

Echarts 取消鼠标滑动时产生的竖线

文章目录 问题分析问题 当我们在坐标轴中使用多组数据时会产生如下效果，出现两根竖线，不太美观 分析 axisPointer 属性设置为 none（建议使用） 在 ECharts 中，鼠标滑动时产生的竖线是由 tooltip 组件的 axisPointer 属性控制的。要取消这一功能，可以将 tooltip 组件的 …
阅读更多...
震惊！没想到这个国产数据库可以白嫖！

震惊！没想到这个国产数据库可以白嫖！

最近很多网友私信我&#xff0c;问我们MogDB是怎么售卖的&#xff0c;你们的具体策略是怎么样的&#xff1f; 其实这个话题我在一些微信群都已经讲过&#xff0c; 这里干脆来一篇公众号文章&#xff0c;详细说一说&#xff01; MogDB是什么&#xff1f; MogDB是 EnMotech openG…
阅读更多...
Python群发邮件的功能如何实现？怎么使用？

Python群发邮件的功能如何实现？怎么使用？

Python群发邮件需要哪些库支持&#xff1f;如何使用Python发信&#xff1f; 对于Python开发者来说&#xff0c;实现群发邮件功能是一项非常有用的技能&#xff0c;无论是用于营销、通知还是其他目的。AokSend将介绍如何使用Python来实现群发邮件的功能&#xff0c;让你轻松管理…
阅读更多...
【优选算法】字符串 {相关编程题解析}

【优选算法】字符串 {相关编程题解析}

一、相关编程题 1.1 最长公共前缀 题目链接 14. 最长公共前缀 - 力扣&#xff08;LeetCode&#xff09; 题目描述 算法原理 编写代码 // 解法一&#xff1a;两两比较 class Solution { public:string longestCommonPrefix(vector<string>& strs) {int k strs[0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023