THREEJS实现标签，自定义样式显示标签，在场景图上动态标识一些文字方法一（css2d_label）

WFF的赵本山

已于 2022-04-28 10:16:33 修改

阅读量3.9k

点赞数

文章标签：前端动画 javascript

于 2022-04-02 15:39:31 首次发布

本文链接：https://blog.csdn.net/weixin_44870969/article/details/123921676

版权

方法：css2d_label
特点：显示的标签大小固定，不会随窗口的大小而变化。
注意：

1.引入CSS2DRenderer.js
2.添加渲染器CSS2DRenderer
3.进行渲染CSS2DRenderer

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<title>three.js css2d - label</title>
	<style>
		body {
			background-color: #000;
			margin: 0;
			overflow: hidden;
		}

		#info {
			position: absolute;
			top: 0px;
			width: 100%;
			color: #FFF;
			padding: 5px;
			font-family: Monospace;
			font-size: 13px;
			text-align: center;
			z-index: 1;
		}

		.label {
			color: #FFF;
			font-family: sans-serif;
			padding: 2px;
			background: rgba(0, 0, 0, .6);
		}

		a {
			color: #000000;
		}
	</style>
</head>

<body>
	<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - three.js css2d - label</div>

	<script src="../js/three.js"></script>

	<script src="../js/OrbitControls.js"></script>

	<script src="../js/CSS2DRenderer.js"></script>

	<script src="../js/stats.js"></script>

	<script>

		var camera, scene, renderer, labelRenderer;

		var clock = new THREE.Clock();
		var textureLoader = new THREE.TextureLoader();

		var earth, moon;
		var diqiu = 12
		var yueliang = 11

		// init();
		// animate();

		start()


		// 渲染器
		function initThree() {
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.setClearColor(0x000000, 1.0);
			document.body.appendChild(renderer.domElement);

			labelRenderer = new THREE.CSS2DRenderer();
			labelRenderer.setSize(window.innerWidth, window.innerHeight);
			labelRenderer.domElement.style.position = 'absolute';
			labelRenderer.domElement.style.top = 0;
			document.body.appendChild(labelRenderer.domElement);
		}

		// 场景
		function initScene() {
			scene = new THREE.Scene();
			var axesHelper = new THREE.AxesHelper(5);
			scene.add(axesHelper);
		}

		// 相机
		function initCamera() {
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
			camera.position.set(10, 5, 20);
		}

		// 物体
		var EARTH_RADIUS;
		var MOON_RADIUS;
		function initObject() {
			EARTH_RADIUS = 1;
			MOON_RADIUS = 0.27;

			var earthGeometry = new THREE.SphereBufferGeometry(EARTH_RADIUS, 16, 16);
			var earthMaterial = new THREE.MeshPhongMaterial({
				specular: 0x333333,
				shininess: 5,
				map: textureLoader.load('../planets/earth_atmos_2048.jpg'),
				specularMap: textureLoader.load('../planets/earth_specular_2048.jpg'),
				normalMap: textureLoader.load('../planets/earth_normal_2048.jpg'),
				// map: textureLoader.load('../js/1.png'),
				// specularMap: textureLoader.load('../js/1.png'),
				// normalMap: textureLoader.load('../js/1.png'),
				normalScale: new THREE.Vector2(0.85, 0.85)
			});
			earth = new THREE.Mesh(earthGeometry, earthMaterial);
			scene.add(earth);

			var moonGeometry = new THREE.SphereBufferGeometry(MOON_RADIUS, 16, 16);
			var moonMaterial = new THREE.MeshPhongMaterial({
				shininess: 5,
				map: textureLoader.load('../planets/moon_1024.jpg')
				// map: textureLoader.load('../js/1.png')
			});
			moon = new THREE.Mesh(moonGeometry, moonMaterial);
			scene.add(moon);

			//调用标签函数
			label()
		}

		// 标签
		var earthLabel
		function label() {
			// 添加标签<div class='label'>diqiu</div>
			var earthDiv = document.createElement('div');
			earthDiv.className = 'label';
			earthDiv.textContent = diqiu;
			earthDiv.style.marginTop = '-1em';
			// var earthLabel = new THREE.CSS2DObject(earthDiv);
			earthLabel = new THREE.CSS2DObject(earthDiv);
			earthLabel.position.set(0, EARTH_RADIUS, 0);
			earth.add(earthLabel);

			var moonDiv = document.createElement('div');
			moonDiv.className = 'label';
			moonDiv.textContent = 'Moon';
			moonDiv.style.marginTop = '-1em';
			var moonLabel = new THREE.CSS2DObject(moonDiv);
			moonLabel.position.set(0, MOON_RADIUS, 0);
			moon.add(moonLabel);

		}

		// 灯光
		function initLight() {
			var dirLight = new THREE.DirectionalLight(0xffffff);
			dirLight.position.set(0, 0, 1);
			scene.add(dirLight);
		}

		// 开始渲染
		function initRender() {
			requestAnimationFrame(initRender);

			var elapsed = clock.getElapsedTime();

			moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed)*5);

			renderer.render(scene, camera);
			labelRenderer.render(scene, camera);
		}

		// 控制器
		function initControls() {
			var controls = new THREE.OrbitControls(camera);
		}

		// 性能监测
		function initStats() {
			var stats = new Stats();
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.left = '0px';
			stats.domElement.style.top = '0px';
			document.body.appendChild(stats.domElement);
		}

		// 网格
		function initGrid() {
			var helper = new THREE.GridHelper(20, 14);
			// helper.setColors(0x0000ff, 0x808080);
			scene.add(helper);
		}

		// 开始
		function start() {
			initThree();
			initScene();
			initCamera();
			initObject();
			initLight();
			initControls();
			initStats();
			initGrid();
			initRender();

			// setInterval(() => {
			// 	diqiu = diqiu + 1;
			// 	earth.remove(earthLabel);
			// 	label()
			// }, 10)
		}


		function init() {
			// var EARTH_RADIUS = 1;
			// var MOON_RADIUS = 0.27;

			// camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
			// camera.position.set(10, 5, 20);

			// var controls = new THREE.OrbitControls(camera);

			// scene = new THREE.Scene();

			// var dirLight = new THREE.DirectionalLight(0xffffff);
			// dirLight.position.set(0, 0, 1);
			// scene.add(dirLight);

			// var axesHelper = new THREE.AxesHelper(5);
			// scene.add(axesHelper);

			// var earthGeometry = new THREE.SphereBufferGeometry(EARTH_RADIUS, 16, 16);
			// var earthMaterial = new THREE.MeshPhongMaterial({
			// 	specular: 0x333333,
			// 	shininess: 5,
			// 	// map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
			// 	// specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
			// 	// normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
			// 	map: textureLoader.load('../js/1.png'),
			// 	specularMap: textureLoader.load('../js/1.png'),
			// 	normalMap: textureLoader.load('../js/1.png'),
			// 	normalScale: new THREE.Vector2(0.85, 0.85)
			// });
			// earth = new THREE.Mesh(earthGeometry, earthMaterial);
			// scene.add(earth);

			// var moonGeometry = new THREE.SphereBufferGeometry(MOON_RADIUS, 16, 16);
			// var moonMaterial = new THREE.MeshPhongMaterial({
			// 	shininess: 5,
			// 	// map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
			// 	map: textureLoader.load('../js/1.png')
			// });
			// moon = new THREE.Mesh(moonGeometry, moonMaterial);
			// scene.add(moon);

			// var earthDiv = document.createElement('div');
			// earthDiv.className = 'label';
			// earthDiv.textContent = diqiu;
			// earthDiv.style.marginTop = '-1em';
			// var earthLabel = new THREE.CSS2DObject(earthDiv);
			// earthLabel.position.set(0, EARTH_RADIUS, 0);
			// earth.add(earthLabel);

			// var moonDiv = document.createElement('div');
			// moonDiv.className = 'label';
			// moonDiv.textContent = 'Moon';
			// moonDiv.style.marginTop = '-1em';
			// var moonLabel = new THREE.CSS2DObject(moonDiv);
			// moonLabel.position.set(0, MOON_RADIUS, 0);
			// moon.add(moonLabel);

			// //

			// renderer = new THREE.WebGLRenderer();
			// renderer.setPixelRatio(window.devicePixelRatio);
			// renderer.setSize(window.innerWidth, window.innerHeight);
			// document.body.appendChild(renderer.domElement);

			// labelRenderer = new THREE.CSS2DRenderer();
			// labelRenderer.setSize(window.innerWidth, window.innerHeight);
			// labelRenderer.domElement.style.position = 'absolute';
			// labelRenderer.domElement.style.top = 0;
			// document.body.appendChild(labelRenderer.domElement);
		}


		function animate() {
			// requestAnimationFrame(animate);
			// var elapsed = clock.getElapsedTime();
			// moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);
			// renderer.render(scene, camera);
			// labelRenderer.render(scene, camera);
		}
	</script>
</body>

</html>

WFF的赵本山

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
THREEJS实现标签，自定义样式显示标签，在场景图上动态标识一些文字方法一（css2d_label）

方法：css2d_label特点：显示的标签大小固定，不会随窗口的大小而变化。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>three.
复制链接

扫一扫