场景标注标签信息

// 引入threejs
import * as THREE from "three";
// 引入轨道控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 引入glb加载器
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
// 引入CSS2DRenderer.js  可以实现坐标转化
import {
	CSS2DRenderer,
	CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js";

/* 创建三维场景 */
const scene = new THREE.Scene();

/* 创建相机 */
const camera = new THREE.PerspectiveCamera( // PerspectiveCamera透视投影相机
	50, // fov默认50
	window.innerWidth / window.innerHeight, //
	0.1,
	100000
);
// 设置相机位置
camera.position.set(150, 150, 150);
// 设置相机观察目标：接受坐标 or 物体
camera.lookAt(0, 0, 0);

/* 创建渲染器：需要放到最后 */
const renderer = new THREE.WebGLRenderer({
	// 抗锯齿
	antialias: true,
	// 深度冲突
	logarithmicDepthBuffer: true,
});
renderer.setSize(window.innerWidth, window.innerHeight); // 设置canvas画布宽高
renderer.render(scene, camera); // 执行一个渲染操作
// 修改渲染器编码方式
renderer.outputEncoding = THREE.sRGBEncoding;

/* CSS2DRenderer：CSS2渲染器和WebGL渲染器虽然不同，但是大体类似 */
const css2Renderer = new CSS2DRenderer();
css2Renderer.setSize(window.innerWidth, window.innerHeight);

// 添加自适应
window.addEventListener("resize", () => {
	renderer.setSize(window.innerWidth, window.innerHeight); // 设置canvas画布宽高
	camera.aspect = window.innerWidth / window.innerHeight; // 设置相机长宽比
	camera.updateProjectionMatrix(); // 当相机属性发生变化时，需要更新相机投影矩阵


	// css2Renderer也需要重新设置
	css2Renderer.setSize(window.innerWidth, window.innerHeight);
});

document.body.appendChild(renderer.domElement); // 将canvas画布添加到html中
document.body.appendChild(css2Renderer.domElement); // 将css2Renderer画布添加到html中

const render = () => {
	window.requestAnimationFrame(render);
	renderer.render(scene, camera);
	css2Renderer.render(scene, camera);
};
render();

/* 添加坐标辅助器 */
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

/* 添加轨道控制器 */
const controls = new OrbitControls(camera, renderer.domElement);

/* 添加环境光 */
const ambientLight = new THREE.AmbientLight(0xffffff, 2);
scene.add(ambientLight);

// 实例化一个加载器
const loader = new GLTFLoader();

// 加载三维模型
let mesh = null;
loader.load("./models/工厂.glb", gltf => {
	// 记载的三维模型一般是MeshStandardMaterial或者MeshPhysicalMaterial材质
	mesh = gltf.scene;
	scene.add(mesh);
});

// CSS2DObject：可以将一个HTML元素转化为一个类似于threejs网格模型的对象，也就是说可以将DOM元素当作模型来设置position或添加到场景中
const div = document.getElementById("tag");
// 转化
const tag = new CSS2DObject(div);
// 设置标签位置方法一：
tag.position.set(0, 0, 0);

// 相对于某个mesh设置坐标
// tag.position.copy(mesh.position);

// 相对于某个mesh设置坐标
// const worldPosition = new THREE.Vector3();
// mesh.getWorldPosition(worldPosition);
// tag.position.copy(worldPosition);

// 标注几何体的某个几何定点
// const pos = geometry.attributes.position;
// tag.position.set(pos.getX(0), pos.getY(0), pos.getZ(0));

scene.add(tag);