导语
在Three.js
中,使用CSS3DRenderer
和CSS3DSprite
可以轻松地实现模型标签文字的效果,为场景中的模型提供更直观的信息展示。本文将介绍如何使用这两个工具来实现模型标签文字,并提供相应的代码示例。
引言
Three.js
是一款强大的JavaScript 3D
库,用于在Web上
创建交互式的3D
图形应用程序。在Three.js
中,CSS3DRenderer
和CSS3DSprite
是两个重要的工具,它们可以用于在3D
场景中渲染HTML
元素,为用户提供更丰富的交互体验。
需要达到的效果
在导入模型,遍历模型的时候,使用CSS3DRenderer
和CSS3DSprite
对指定模型加上标签文字,并在标签文字下创建指示线(由几何图形绘制而成
),标签文字可以随着x,y,z
的旋转则一直对着详细展示,指示线则只沿着x,z两个方向根据相机旋转给用户展示。其中指示线+标签文字根据循环的每个模型进行自动定位,但是指示线要结合标签文字位置慢慢调试,即可达到效果。
实现的效果
实现模型标签文字的步骤
步骤一、导入所需库
// Three.js库
import * as THREE from 'three';
// CSS3DRenderer用于渲染CSS3D对象
import { CSS3DRenderer, CSS3DSprite } from "three/examples/jsm/renderers/CSS3DRenderer.js";
步骤二、初始化CSS3DRenderer
const labelRenderer = new CSS3DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器尺寸
labelRenderer.domElement.style.position = 'absolute'; // 设置渲染器样式
labelRenderer.domElement.style.top = '0'; // 设置渲染器样式
document.body.appendChild(labelRenderer.domElement); // 将渲染器挂载到页面上
步骤三、创建css3D标签
const div = document.createElement('div');
div.className = 'workshop-text'; // 添加样式类
div.innerHTML = '<p>浮法车间</p>'; // 添加标签文字
步骤四、创建CSS3DSprite对象
const sprite = new CSS3DSprite(div);
sprite.position.set(8, 3, 42); // 设置标签位置,这里根据模型具体位置调整
步骤五、将CSS3DSprite添加到模型中,并通过GUI控制器控制文字位置
object.add(sprite); // object是模型对象,这里需要替换为实际的模型对象
// 在GUI中添加文件夹用于调整标签位置
const tagFolder = gui.addFolder('浮法车间标签');
tagFolder.add(sprite.position, 'x', -200, 200).name('X Position'); // 调整标签x位置
tagFolder.add(sprite.position, 'y', -200, 200).name('Y Position'); // 调整标签y位置
tagFolder.add(sprite.position, 'z', -200, 200).name('Z Position'); // 调整标签z位置
tagFolder.open(); // 打开文件夹,默认显示控制器
步骤六、添加好tag标签后,创建指示线createPointerLine
- 创建指向线函数
/**
* 创建指向线的函数,用于在 Three.js 场景中创建指向线
* @param {THREE.Vector3} start 指向线的起点坐标
* @param {THREE.Vector3} end 指向线的终点坐标
* @param {string} color 指向线的颜色,格式为 CSS 颜色值,例如 "#ff0000" 表示红色
* @param {number} width 指向线的宽度
* @param {string} background 背景贴图的路径
*/
// 创建指向线的函数
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);
}
- 所有代码:
<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";
const state = reactive({
pointerLineX: 90,
pointerLineY: 90,
pointerLineZ: -10,
});
// 添加雾效果
const fog = new THREE.Fog(new THREE.Color(0xa0a0a0), 500, 2000);
const { proxy } = getCurrentInstance(); // 获取当前Vue组件实例
// const gui = new GUI();
// 设置cube纹理加载器,立方体纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader();
// // 设置环境贴图
const envMapTexture = cubeTextureLoader.load([
"../../public/posx.jpg",
"../../public/negx.jpg",
"../../public/posy.jpg",
"../../public/negy.jpg",
"../../public/posz.jpg",
"../../public/negz.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;
import { watch } from "vue";
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);
//设置相机位置
camera.position.set(-20, 300, 700); // 设置相机位置
//设置相机方向
camera.lookAt(0, 0, 0); // 设置相机朝向场景中心
//辅助坐标轴
const axesHelper = new THREE.AxesHelper(200); //参数200标示坐标系大小,可以根据场景大小去设置
scene.add(axesHelper);
// 设置场景背景色 envMapTexture
// new THREE.Color(0x1b1824)
envMapTexture.encoding = THREE.SRGBColorSpace;
scene.background = envMapTexture;
//添加雾效果
scene.fog = fog;
// 设置渲染器像素比,适应设备分辨率
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 标签
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) {
console.log("event");
let intersects = getIntersects(event);
if (intersects.length !== 0 && intersects[0].object instanceof THREE.Mesh) {
const selectedObject = intersects[0].object;
let selectedObjects = [];
selectedObjects.push(selectedObject);
console.log(selectedObjects);
// outlinePass.selectedObjects = 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);
}
</script>
<style>
.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>
效果:
更多效果敬请期待~