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

原创 已于 2022-04-28 10:16:33 修改 · 4.1k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #动画 #javascript

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

方法：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>
Three.js - 使用 Sprite 精灵创建文字标签
ithanmang
08-17 2万+
Sprite精灵在计算机图形学中指包含在场景中的二维动画和图像，即sprite是一个永远朝向相机的平面，类似广告牌，没有z轴的概念，并且sprite不接受阴影。 示例：http://ithanmang.com/threeJs/home/201808/20180815/03-sprite-text.html 示例创建一个三维坐标轴，使用canvas绘制字体，并作为纹理加入到sprite的map属...
threejs——没什么意义的大屏
weixin_41770018的博客
12-13 1228
本文是一次尝试性的创新，代码是作者写的，但是下面的文章内容是把代码扔给AI，让AI写的，作者整理的，感觉比作者之前的文章写的细致，但是有点太细了，不知各位看官是否习惯这样的文章，欢迎大家提意见。五万多个字呢，比以往所有的内容加起来都多
Threejs实现标签，自定义样式显示标签
左本Web3D
08-05 1万+
1，介绍 使用threejs实现标签显示，这里只介绍如何实现显示标签功能，其他可查看往期文章。 效果图如下： 2，主要说明 实现标签使用CSS2DRenderer（2D渲染器）进行渲染。 1，引入渲染器并初始化 2，创建dom元素对象，添加显示的内容和样式 3，把dom元素包装到CSS2DObject对象，并添加到场景中 4，使用CSS2DRenderer进行渲染显示 引入渲染器，并初始化 <script type="text/javascript" sr......
Three.js 玻璃展示墙与可调底板交互
weixin_60886119的博客
06-17 288
本文详细解析了一个基于Three.js的3D玻璃展示墙交互实现。系统核心功能包括：可自定义尺寸的玻璃展示柜（宽度/深度/高度）、可选颜色或纹理的底板、直观的尺寸调整预览界面。关键技术实现包含物理正确的玻璃材质渲染（MeshPhysicalMaterial）、HDR环境贴图应用、实时尺寸调整交互设计。系统通过HTML/CSS构建UI界面，Three.js处理3D渲染，实现以下特性：1）真实玻璃光学效果（透射率1.5、环境反射）；2）两种底板材质模式（纯色/纹理）；3）响应式布局适配不同设备。代码结构清晰，
三维空间中创建label标签(three.js实战7)
点燃火柴的博客
06-27 3625
使用CSS2DRenderer创建文字说明标签1. demo效果2. CSS2DRenderer使用流程2.1 相关文件引入2.2 创建CSS2DRenderer渲染器2.3 创建ShaderMaterial材质2.4 使用BufferGeometry实例和ShaderMaterial材质创建网格对象3. demo代码 1. demo效果 如上图，demo中使用CSS2DRenderer创建label，在物体运动中始终保持面向相机，缩放中也正常显示 2. CSS2DRenderer使用流程 2.1 相关
【ThreeJs】如何给模型打上文字标签？
热门推荐
IT飞牛
03-11 1万+
ThreeJs渲染中创建的网格模型，有时候我们需要给模型添加标签文字，方便识别不同的物体。这时候我们可以使用这两个库，里面提供了三种打标签的方式，随着相机角度的变化，三种标签的显示效果各不相同。
vue + threejs 给3D模型添加label标签（dom的方式）
CodingNoob
04-18 9261
webGL.js封装的代码。 const THREE = window.THREE; // webGL对象配置 export const webglOBJ = { renderDom: null, Scene: null, // 场景 camera: null, // 摄像头 renderer: null, // 渲染器 senceAdd (objList = []) { objList.forEach(v => { webglOBJ.Scene...
vue2项目中在three.js中点击模型后给模型上该点位增加一个标识
最新发布
07-11
首先，我们需要创建一个Vue组件，并在mounted生命周期中初始化Three.js场景。 #### 2. 加载模型 使用GLTFLoader或OBJLoader加载模型（这里以GLTFLoader为例）。 #### 3. 添加点击事件 在渲染器的DOM元素上添加点击...
cesium学习笔记（问题记录）——（三）
CheryW的博客
12-18 2628
cesium学习记录（三）
前端三件套知识点
二氧化硅.的博客
01-11 2906
前端三件套知识点
等高线图在科学可视化中的角色：精确传达复杂数据的关键
![等高线图在科学可视化中的角色：精确传达复杂数据的关键]...此外，本文还讨论了交互性和动画效果在提升等高线图用户体验方面的重要性，并探索了优化等高线图准确性和可读性的方法。最后
Threejs 标签添加（单标签/多标签）
瑾&凌
12-29 962
threejs 添加多标签
THREEJS - 动态标签（dom方式）
Kreme的博客
03-27 4737
在三维场景中，我们会有一种需求：需要给三维场景中的模型打上标签，例如展示模型的名称/性能展示等，三维场景打标签的方式很多，有dom、sprite、Mesh等等，这篇文章来给大家介绍的是一种比较常见的打标签方式：dom。这种方式我们可以自定义任何样式的dom标签，比较容易满足各种场景的需求。 1.创建dom元素： <div id="sign" style="position: absolute;"> <div class="sign"> <div c
threejs添加标签指示
weixin_44380735的博客
04-03 1197
在glb模型中给对应模型插入标签。
THREEJS - 动态标签（texture纹理方式）
Kreme的博客
04-09 2723
前问提到了关于场景中给模型动态标注标签的一种方式 - dom，这篇文章将会讲述另一种方式 -texture纹理方式。 在场景中添加mesh的时候，我们可以给mesh添加想要的纹理材质，利用这个特性，就可以将需要展示的标签内容贴到mesh的面上，这样就可以实现利用纹理特性实现标签的构建，具体思路如下： 1.创建texture纹理材质：这里采用的是标签内容转化为图片的形式 // 利用canvas的属性，我们封装一个函数，根据数据的文字内容，创建一个canvas画布 function getTextTo.
【threejs教程5】threejs添加文字标注，且始终面向屏幕
c_wengy的博客
04-22 6415
在三维场景中，我们经常需要添加文字对场景物体等进行标注说明，本文将介绍如何添加三维场景的文字，并实现文字始终面向屏幕的效果。
threejs实现标签标注的三种方式
Pure_White520的博客
02-02 2514
threejs常见创建标签的三种方式
three.js自定义造型示例
MAILLIBIN的专栏
08-07 1093
  ///////////////////////// //物体造型关键向量点 var vertices = [ new THREE.Vector3(-1,0,-1), new THREE.Vector3(1,0,-1), new THREE.Vector3(1,0,1), new THREE.Vector3(-1,0,1), new THREE.Vector3(0,2,0) ]; ...
ThreeJS教程：CSS3批量标注多个标签
jianshi2023的博客
05-31 2152
推荐：将加入你的3D工具链。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值