在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.rhkb.cn/news/340703.html

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

相关文章

实习面试题（答案自敲）、

实习面试题（答案自敲）、

1、为什么要重写equals方法&#xff0c;为什么重写了equals方法后&#xff0c;就必须重写hashcode方法&#xff0c;为什么要有hashcode方法&#xff0c;你能介绍一下hashcode方法吗&#xff1f; equals方法默认是比较内存地址&#xff1b;为了实现内容比较&#xff0c;我们需要…
阅读更多...
使用from…import语句导入模块

使用from…import语句导入模块

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在使用import语句导入模块时&#xff0c;每执行一条import语句都会创建一个新的命名空间&#xff08;namespace&#xff09;&#xff0c;并且在该命名…
阅读更多...
词法分析器的设计与实现--编译原理操作步骤，1、你的算法工作流程图； 2、你的函数流程图；3，具体代码

词法分析器的设计与实现--编译原理操作步骤，1、你的算法工作流程图； 2、你的函数流程图；3，具体代码

实验原理&#xff1a; 词法分析是编译程序进行编译时第一个要进行的任务&#xff0c;主要是对源程序进行编译预处理之后&#xff0c;对整个源程序进行分解&#xff0c;分解成一个个单词&#xff0c;这些单词有且只有五类&#xff0c;分别时标识符、关键字&#xff08;保留字&a…
阅读更多...
CentOS7配置国内清华源并安装docker-ce以及配置docker加速

CentOS7配置国内清华源并安装docker-ce以及配置docker加速

说明 由于国内访问国外的网站包括docker网站&#xff0c;由于种种的原因经常打不开&#xff0c;或无法访问&#xff0c;所以替换成国内的软件源和国内镜像就是非常必要的了&#xff0c;这里整理了我安装配置的基本的步骤。 国内的软件源有很多&#xff0c;这里选择清华源作为…
阅读更多...
终于来啦！Stable Diffusion 3将在6月12日正式开源

终于来啦！Stable Diffusion 3将在6月12日正式开源

6月3日晚&#xff0c;著名开源大模型平台Stability AI的联合首席执行官Christian Laforte&#xff0c;在AMD的产品发布会上宣布&#xff0c;文生图模型 Stable Diffusion 3将于6月12日在Hugging Face开源权重。 本次开源的是Stable Diffusion 3的Medium模型&#xff0c;有20亿…
阅读更多...
Python中数字比较与获取较大值的深入解析

Python中数字比较与获取较大值的深入解析

目录 一、引言 二、Python数字类型概述 三、数字比较操作符 四、获取较大值的逻辑与实现 五、高级话题&#xff1a;使用内置函数和库 六、性能分析与优化 七、案例分析 八、总结与展望 一、引言 在编程世界中&#xff0c;数字的比较和获取较大值是基础且常见的操作。P…
阅读更多...
Python中上下文管理器解析

Python中上下文管理器解析

文章目录 基本原理上下文管理器的工作原理自定义上下文管理器enter和exitcontextlib 模块 异常处理 Python中的上下文管理器&#xff08;Context Manager&#xff09;是一种用于管理资源的机制&#xff0c;特别是在文件操作、数据库连接和锁定等场景中非常有用。上下文管理器通…
阅读更多...
SpringBoot中MyBatisPlus的使用

SpringBoot中MyBatisPlus的使用

MyBatis Plus 是 MyBatis 的增强工具&#xff0c;提供了许多强大的功能&#xff0c;简化了 MyBatis 的使用。下面是在 Spring Boot 中使用 MyBatis Plus 的步骤&#xff1a; 添加依赖&#xff1a;在 Maven 或 Gradle 的配置文件中添加 MyBatis Plus 的依赖。 配置数据源&#…
阅读更多...
Linux【安全 02】OpenSSH漏洞修复（离线升级最新版本流程）网盘分享3个安装包+26个离线依赖

Linux【安全 02】OpenSSH漏洞修复（离线升级最新版本流程）网盘分享3个安装包+26个离线依赖

OpenSSH离线升级最新版本流程 1. 漏洞信息2. 环境说明3.依赖安装3.1 在线安装3.2 离线安装 4.备份卸载4.1 备份4.2 卸载旧版本 5.安装5.1 zlib5.2 ssl5.3 openssh5.3.1 安装5.3.2 配置 6.脚本整理7.文件资源 本文仅针对CentOS7.8版本&#xff0c;其他版本未测试&#xff0c;安装…
阅读更多...
Excel单元格格式无法修改的原因与解决方法

Excel单元格格式无法修改的原因与解决方法

Excel单元格格式无法更改可能由多种原因造成。以下是一些可能的原因及相应的解决方法&#xff1a; 单元格或工作表被保护&#xff1a; 如果单元格或工作表被设置为只读或保护状态&#xff0c;您将无法更改其中的格式。解决方法&#xff1a;取消单元格或工作表的保护。在Excel中…
阅读更多...
Hadoop伪分布式安装教程

Hadoop伪分布式安装教程

Hadoop伪分布式安装教程 一、安装背景1.1 软件列表1.2 系统软件列表 二、安装Hadoop2.1 安装 Java 环境2.1.1 前期准备2.1.2 文件传输2.1.3 解压文件2.1.4 配置 jdk 的环境变量2.1.5 输入 java、javac、java -version 命令检验 jdk 是否安装成功 2.2 Hadoop 下载地址[hadoop](h…
阅读更多...
一些关于深度聚类以及部分对比学习的论文阅读笔记

一些关于深度聚类以及部分对比学习的论文阅读笔记

目录 资料SwAV问题方法方法的创新点为什么有效有什么可以借鉴的地方聚类Multi-crop 代码 PCL代码 Feature Alignment and Uniformity for Test Time Adaptation代码 SimSiam 资料 深度聚类算法研究综述(很赞&#xff0c;从聚类方法和深度学习方法两个方面进行了总结&#xff0…
阅读更多...
基于聚类和回归分析方法探究蓝莓产量影响因素与预测模型研究附录

基于聚类和回归分析方法探究蓝莓产量影响因素与预测模型研究附录

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 目录 背景数据说明数据来源思考 附录数据预处理导入包以及数据读取数据预览数据处理 相关性分析聚类分析数据处理确定聚类数建立k均值聚类模型 …
阅读更多...
《面试笔记》——MySQL终结篇30

《面试笔记》——MySQL终结篇30

三大范式&#xff1f; 第一范式&#xff1a;字段具有原子性&#xff0c;不可再分&#xff08;字段单一职责&#xff09; 第二范式&#xff1a;满足第一范式&#xff0c;每行应该被唯一区分&#xff0c;加一列存放每行的唯一标识符&#xff0c;称为主键&#xff08;都要依赖主…
阅读更多...
【Linux】深入解析动静态库：原理、制作、使用与动态链接机制

【Linux】深入解析动静态库：原理、制作、使用与动态链接机制

文章目录 前言&#xff1a;1. 什么是动静态库2. 动静态库的制作和使用3. 动态库的查找问题4. 理解动态库的加载4.1. 站在系统的角度理解4.2. 编址、可执行程序4.3. 动态库动态链接和加载问题 总结&#xff1a; 前言&#xff1a; 在软件开发中&#xff0c;动静态库是两种重要的…
阅读更多...
【miniconda】安装miniconda

【miniconda】安装miniconda

☆ 问题描述 ubuntu环境下安装miniconda ★ 解决方案 ubuntu环境下安装miniconda 下载miniconda 包 miniconda官网地址&#xff1a;https://docs.conda.io/en/latest/miniconda.html 清华大学镜像地址&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/anaconda/minicon…
阅读更多...
Arduino ESP8266模块TFT液晶屏

Arduino ESP8266模块TFT液晶屏

ESP8266模块 模块实物图&#xff1a; 模块引脚定义&#xff1a; 工作模式选择&#xff1a; FlashBoot启动模式&#xff1a; GPIO15接GND UART固件下载模式: GPIO15接GND&#xff0c; GPIO0接GND 调试串口&#xff1a; URXD/UTXD 可用来下载固件和调试信息输出 模块使能&…
阅读更多...
天润融通携手好丽友，打造食品零售行业智能客服新标杆

天润融通携手好丽友，打造食品零售行业智能客服新标杆

AI大模型&#xff0c;如何给食品零售行业的客服服务带来质变&#xff1f; 在很多人印象中&#xff0c;食品零售行业是不需要客户服务的。 因为绝大多数食品都是通过经销商、零售商、商场这样的渠道进行销售。所以在食品零售行业&#xff0c;一直都有一句话&#xff0c;叫“渠…
阅读更多...
Mac终端operation not permitted问题、禁用和启用SIP（系统完整性保护）

Mac终端operation not permitted问题、禁用和启用SIP（系统完整性保护）

Mac终端operation not permitted问题、禁用和启用SIP&#xff08;系统完整性保护&#xff09; 注意&#xff1a; 仅在必要时临时禁用SIP&#xff0c;并尽快重新启用它。在测试完成后不重新启用SIP将使您的计算机容易受到恶意代码的攻击 文章目录 Mac终端operation not permitt…
阅读更多...
Spring Boot发送邮件时如何支持定时功能？

Spring Boot发送邮件时如何支持定时功能？

如何使用Spring Boot结合AokSend以实现高效邮件发送&#xff1f; 如何高效地进行sendmail发送邮件并支持定时功能是一个值得探讨的问题。本文将详细介绍如何在Spring Boot中实现定时sendmail发送邮件&#xff0c;并结合AokSend工具实现高效邮件发送。 Spring Boot发送邮件&am…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023