阅读three.js 示例 -- css2d_label.html

大松鼠君
492 阅读10分钟

最近在学习three.js 框架，网上冲浪了一波，觉得最好的学习资料还是官方文档和示例。所以打算边阅读示例源码，边学习做笔记，方便日后复习回顾。

一、几个知识点

1. 辅助观察坐标系 AxesHelper

做开发时候，往往我们可以增加个辅助坐标系，方便我们进行开发观察。three.js 坐标轴颜色红R、绿G、蓝B 分别对应坐标系的x、y、z 轴，默认情况下y轴朝上。

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
2. SphereGeometry

SphereGeometry 可以用来创建三维球体。其参数如：

属性是否必须描述
radius否该属性定义球体的半径，默认值是50
widthSegments否该属性指定竖直方向上的分段数，段数越多，球体的表面越光滑，默认值是8，最小值是3
heightSegments否该属性指定水平方向上的分段数，段数越多，球体的表面越光滑，默认值是6，最小值是2
phiStart否该属性用来指定从x轴的什么位置开始绘制，取值范围是0到2*π，默认值0
phiLength否该属性用来指定从phiStart开始画多少，默认2*π（画整球）
thetaStart否该属性用来指定从y轴的什么位置开始绘制，取值范围是0到2*π，默认值0
thetaLength否该属性用来指定从thetaStart开始画多少，默认2*π（画整球
4. MeshPhongMaterial

通过THREE.MeshPhongMaterial， 可以创建一种光亮的材质。与MeshLambertMaterial 中使用的Lambertian不同，他可以模拟具有镜面高光的光泽表面（如上漆木材）。 下面介绍几个常用参数

名称属性
ambient这是材质的环境色，他会和环境光提供的颜色相乘。默认值为白色
emissive这是该材质发射的颜色。它其实并不像光源，只是一种纯粹的、不受其他光照影响的颜色。默认值为黑色
specular该属性指定该材质的光亮程度及高光部分的颜色。如果将它设置成与color属性相同的颜色，将会得到一个更加类似金属的材质。如果将它设置成灰色（grey），材质将变得更像塑料
shininess该属性指定镜面高光部分的亮度。默认值为30
map颜色贴图
specularMap镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为null
normalMap创建法线贴图的纹理。注意： 法线贴图不会改变曲面的实际形状，只会改变光照
normalScale法线贴图对材质的影响程度。典型范围是0 -1， 默认值是 Vector2 设置为（1,1）
5. 法线贴图
const 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' ), // 用于创建法线贴图的纹理
	normalScale: new THREE.Vector2( 0.85, 0.85 ) //  定义法线贴图的缩放比例，影响法线贴图的视觉效果。
});
（1）出现的原因

法线贴图通常使用在一些模型精度不是很高，但是需要展示更多细节的地方。比如，我们需要渲染一面砖墙，我们当然可以在建模工具中将每一块的砖的顶点数据都表示出来。但是这样做的代价就是巨大的人工成本。 而是用法线贴图可以讲砖墙的法线存储在一张图片中，在渲染时候再进行计算。

观察下面两张图（图一没有使用法线贴图，图二应用了法线贴图）。 我们可以发现应用了法线贴图的立方体更加显得有凹凸感。

image.png

image.png

（2）优缺点

优点：

  1. 实现简单，非常直观。我们都不需要模型的原始法线和切线信息，生成模型空间的法线贴图是非常简单的。
  2. 在纹理坐标的缝合处和尖锐的边角部分，可见的突变较少，即可以提供平滑的边界。

缺点：

  1. 不可重用，比如在一个立方体中我们需要给每个面都贴上法线贴图的花。那么对模型空间的法线贴图，我们需要“6”张不同的贴图。（这里的 6 加上引号是因为这 6 张图也可以合并为 1 张大图表示）
  2. 不可压缩，因为模型空间下需要完整的使用 rgb 三个分量的值，所以没有压缩的空间了。
6. 颜色空间
earthMaterial.map.colorSpace = THREE.SRGBColorSpace;
（1）对比是否使用颜色空间的差别

图一是使用了颜色空间，图二是没有使用，可以观察对比下 image.png

image.png

（2）为什么要使用颜色空间

人眼对光照强度的感知并不是线性的，因此为了更符合人眼的视觉效果，人们提出了 sRGB 色彩空间。 sRGB 是当今一般电子设备及互联网图像上的标准颜色空间，较适应人眼的感光。从linear 转换为sRGB时可通过转换 gamma2.2替换。

为了保证颜色一致，我们在导入模型文件后，需要对材质的色彩空间进行转换。 three.js 在渲染时判断贴图为sRGB后，会自动将贴图转换为 Linear 再进行渲染计算。

const textureLoader = new THREE.TextureLoader();
textureLoader.load( path, (textture) => {
    texture.encoding = THREE.sRGBEncoding;
});

此时, 渲染计算后的模型仍在linear空间，展示到屏幕时需要通过gamma校正，将linear转换回sRGB空间，也就是进行gamma校正，threejs中可通过对renderer进行设置，进行gamma校正，校正后的gamma2.2颜色空间与sRGB相似.

renderer = new THREE.WebGLRenderer(); 
renderer.outputEncoding = THREE.sRGBEncoding;

注意：

  1. 若采用 GLTFLoader 导入模型， GLTFLoader 将在渲染前自动把贴图设置为 sRGBEncoding, 故不需要手动设置
  2. 使用MeshBasicMaterial 这种不受光照影响的材质时，着色器不需要做复杂的计算，故不需要进行色彩空间转换。
7. CSS2DObject

CSS2DObject 可以把一个 HTML元素转化为一个类似 three.js 网格模型的对象，换句话来说就是你可以把 CSS2DObject 当成 threejs 的一个模型一样去设置位置.position， 或者添加到场景中。

const div = document.getElementById('tag');
// HTML元素转化为threejs的CSS2模型对象
const tag = new CSS2DObject(div);

如果你想把HTML标签标注在某个位置，可以通过 .position 属性设置标签模型对象的 xyz 坐标

tag.position.set(50,0,50);

把HTML元素对应的CSS2模型对象添加到其他模型对象或三维场景中

scene.add(tag);

const group = new THREE.Group();
group.add(tag);
8. CSS2DRenderer 在3D场景中添加标签

CSS2DRenderer （css 2D 渲染器）可以把 HTML 元素作为标签标注到三维场景中， CSS2DRenderer 是 CSS3DRenderer（css 3D 渲染器）的简化版，他唯一支持的变换是位移。通过 CSS2DRenderer我们可以将三维物体和基于HTML的标签相结合，来更好的表达场景中的物体信息。

二、完整代码

<!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>
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			.label {
				color: #FFF;
				font-family: sans-serif;
				padding: 2px;
				background: rgba( 0, 0, 0, .6 );
			}
		</style>
	</head>
	<body>
		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';

			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			let gui;

			let camera, scene, renderer, labelRenderer;

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

			let moon;

			init();
			animate();

			function init() {

				const EARTH_RADIUS = 1;
				const MOON_RADIUS = 0.27;

				// 添加投影相机、设置相机位置
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
				camera.position.set( 10, 5, 20 );
				// 通常情况下，当您希望相机可以看到场景中的所有对象时，可以使用 camera.layers.enableAll() 来启用所有图层。这样相机将不会受到图层的限制，可以看到整个场景中的所有对象。
				// 请注意，启用所有图层可能会影响渲染性能，尤其是在包含大量对象的复杂场景中。因此，在实际开发中，建议根据需要选择性地启用相机的图层，以提高性能并实现更好的渲染效果。
				camera.layers.enableAll(); 

				// 场景
				scene = new THREE.Scene();

				// DirectionalLight: 平行光
				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
				dirLight.position.set( 0, 0, 1 );
				// 类似于启用相机的所有图层，启用光源的所有图层也意味着光源将不会受到图层的限制，可以照射到整个场景中的所有对象。
				// 需要注意的是，在实际开发中，启用所有图层可能会对渲染性能产生影响，特别是在包含大量对象的复杂场景中。因此，在使用图层时，建议根据需要选择性地启用光源的图层，以提高性能并实现更好的渲染效果。
				dirLight.layers.enableAll();
				scene.add( dirLight );

				// AxesHelper: 坐标轴对象
				const axesHelper = new THREE.AxesHelper( 5 );
				axesHelper.layers.enableAll();
				scene.add( axesHelper );

				// 添加地球到场景中
				const earthGeometry = new THREE.SphereGeometry( EARTH_RADIUS, 16, 16 ); // 球缓冲几何体
				// MeshPhongMaterial: Phong网格材质(MeshPhongMaterial)， 镜面
				const 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' ), // 用于创建法线贴图的纹理
					normalScale: new THREE.Vector2( 0.85, 0.85 ) //  定义法线贴图的缩放比例，影响法线贴图的视觉效果。
				} );
				// 颜色空间
				earthMaterial.map.colorSpace = THREE.SRGBColorSpace;
				// 地球模型
				const earth = new THREE.Mesh( earthGeometry, earthMaterial );
				scene.add( earth );

				// 添加月球到场景中
				const moonGeometry = new THREE.SphereGeometry( MOON_RADIUS, 16, 16 );
				const moonMaterial = new THREE.MeshPhongMaterial( {
					shininess: 5,
					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
				} );
				moonMaterial.map.colorSpace = THREE.SRGBColorSpace;
				moon = new THREE.Mesh( moonGeometry, moonMaterial );
				scene.add( moon );

				//通过调用 earth.layers.enableAll() 方法，将地球对象设置为在所有图层上可见。这意味着无论在哪个图层上设置地球对象，它都会在所有图层上可见。
				earth.layers.enableAll();
				// 通过调用 moon.layers.enableAll() 方法，将月球对象设置为在所有图层上可见。
				moon.layers.enableAll();

				// 设置地球和月球上的文字说明

				const earthDiv = document.createElement( 'div' );
				earthDiv.className = 'label';
				earthDiv.textContent = 'Earth';
				earthDiv.style.backgroundColor = 'transparent';

				// 科普： CSS2DObject https://juejin.cn/post/7259354549165310013
				const earthLabel = new CSS2DObject( earthDiv );
				// position.set(x, y, z) 方法用于设置对象的位置，其中 x、y 和 z 分别代表对象在三维空间中的 x、y、z 坐标位置。
				earthLabel.position.set( 1.5 * EARTH_RADIUS, 0, 0 );
				earthLabel.center.set( 0, 1 );
				// 将地球标签添加到地球对象（earth）中，使其与地球一起移动和旋转。
				earth.add( earthLabel );
				earthLabel.layers.set( 0 );

				const earthMassDiv = document.createElement( 'div' );
				earthMassDiv.className = 'label';
				earthMassDiv.textContent = '5.97237e24 kg';
				earthMassDiv.style.backgroundColor = 'transparent';

				const earthMassLabel = new CSS2DObject( earthMassDiv );
				earthMassLabel.position.set( 1.5 * EARTH_RADIUS, 0, 0 );
				earthMassLabel.center.set( 0, 0 );
				earth.add( earthMassLabel );
				earthMassLabel.layers.set( 1 );

				const moonDiv = document.createElement( 'div' );
				moonDiv.className = 'label';
				moonDiv.textContent = 'Moon';
				moonDiv.style.backgroundColor = 'transparent';

				const moonLabel = new CSS2DObject( moonDiv );
				moonLabel.position.set( 1.5 * MOON_RADIUS, 0, 0 );
				moonLabel.center.set( 0, 1 );
				moon.add( moonLabel );
				moonLabel.layers.set( 0 );

				const moonMassDiv = document.createElement( 'div' );
				moonMassDiv.className = 'label';
				moonMassDiv.textContent = '7.342e22 kg';
				moonMassDiv.style.backgroundColor = 'transparent';

				const moonMassLabel = new CSS2DObject( moonMassDiv );
				moonMassLabel.position.set( 1.5 * MOON_RADIUS, 0, 0 );
				moonMassLabel.center.set( 0, 0 );
				moon.add( moonMassLabel );
				moonMassLabel.layers.set( 1 );

				// 渲染器添加到场景中
				renderer = new THREE.WebGLRenderer();
				// 通过调用 setPixelRatio 方法，渲染器设置了设备像素比（device pixel ratio），以确保渲染的图像在高 DPI 屏幕上显示良好。这样可以提高渲染的清晰度和质量。
				renderer.setPixelRatio( window.devicePixelRatio ); 
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

				// CSS2D 渲染器用于渲染 2D 元素，比如 HTML 元素，这样就可以在 3D 场景中显示2D内容，比如标签、文字等。
				labelRenderer = new CSS2DRenderer();
				labelRenderer.setSize( window.innerWidth, window.innerHeight );
				labelRenderer.domElement.style.position = 'absolute';
				labelRenderer.domElement.style.top = '0px';
				document.body.appendChild( labelRenderer.domElement );

				// domElement: 用于事件监听的HTML元素。
				const controls = new OrbitControls( camera, labelRenderer.domElement );
				// 设置了控制器允许的相机最小缩放距离为 5 单位。这意味着用户无法将相机拉近到小于 5 的距离。
				controls.minDistance = 5; 
				// 设置了控制器允许的相机最大缩放距离为 100 单位。这意味着用户无法将相机拉远到超过 100 的距离。
				controls.maxDistance = 100; 

				//

				window.addEventListener( 'resize', onWindowResize );

				initGui();

			}

			// 窗口大小变化
			function onWindowResize() {
				// 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新透视投影矩阵
				camera.updateProjectionMatrix();
				// 重置渲染器输出画布canvas尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );

				labelRenderer.setSize( window.innerWidth, window.innerHeight );

			}


			function animate() {

				requestAnimationFrame( animate );

				const elapsed = clock.getElapsedTime();

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

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

			}

			//

			function initGui() {
				const layers = {
					// 添加了方法

					'Toggle Name': function () {
						// 切换指定图层的状态（启用/禁用）
						camera.layers.toggle( 0 );

					},
					'Toggle Mass': function () {

						camera.layers.toggle( 1 );

					},
					'Enable All': function () {

						camera.layers.enableAll();

					},

					'Disable All': function () {

						camera.layers.disableAll();

					}

				};

				gui = new GUI();

				gui.title( 'Camera Layers' );

				gui.add( layers, 'Toggle Name' );
				gui.add( layers, 'Toggle Mass' );
				gui.add( layers, 'Enable All' );
				gui.add( layers, 'Disable All' );

				gui.open();

			}

		</script>
	</body>
</html>
avatar
文章
阅读
粉丝