three.js官方案例webgpu_reflection.html学习记录

目录

​1 判断浏览器是否支持

2 THREE.DirectionalLight

2.1DirectionalLightShadow

3 Texture

3.1 .wrapS

3.2 .wrapT

3.3  .colorSpace

4 创建地面

5 WebGPURenderer

6 OrbitControls 控制器

7 屏幕后处理

---

	import * as THREE from 'three';
			import { MeshPhongNodeMaterial, color, pass, reflector, normalWorld, texture, uv, viewportTopLeft } from 'three/nodes';//引入一些类

			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';//引入加载器

			import WebGPU from 'three/addons/capabilities/WebGPU.js';//引入WebGPU
			import WebGL from 'three/addons/capabilities/WebGL.js';//引入WebGL

			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';//WebGPU渲染
			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';//后处理

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';//控制器

			import Stats from 'three/addons/libs/stats.module.js';//性能检测

			let camera, scene, renderer;//相机 场景 渲染器
			let model, mixer, clock;//模型 动画混合器  时钟
			let postProcessing;//后期处理
			let controls;//控制器
			let stats;//性能检测

1 判断浏览器是否支持

if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {

					document.body.appendChild( WebGPU.getErrorMessage() );

					throw new Error( 'No WebGPU or WebGL2 support' );//不支持

				}

2 THREE.DirectionalLight

.shadow : DirectionalLightShadow

DirectionalLightShadow 对象，用于计算该平行光产生的阴影。

2.1DirectionalLightShadow

        这是用于在DirectionalLights内部计算阴影
与其他阴影类不同，它是使用OrthographicCamera来计算阴影，而不是PerspectiveCamera。这是因为来自DirectionalLight的光线是平行的。

 //模拟太阳
				const sunLight = new THREE.DirectionalLight( 0xFFE499, 5 );
                //.castShadow : Boolean  此属性设置为 true 灯光将投射阴影。注意：这样做的代价比较高，需要通过调整让阴影看起来正确。 查看 DirectionalLightShadow 了解详细信息。 默认值为 false。
				sunLight.castShadow = true;
                //.shadow DirectionalLightShadow 对象，用于计算该平行光产生的阴影
                //.camera : Camera  在光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中
				sunLight.shadow.camera.near = .1;//摄像机视锥体近端面
				sunLight.shadow.camera.far = 5;//摄像机视锥体远端面
				sunLight.shadow.camera.right = 2;
				sunLight.shadow.camera.left = - 2;//摄像机视锥体左侧面
				sunLight.shadow.camera.top = 2;//摄像机视锥体上侧面
				sunLight.shadow.camera.bottom = - 2;
               // .mapSize : Vector2 一个Vector2定义阴影贴图的宽度和高度。
//较高的值会以计算时间为代价提供更好的阴影质量。值必须是2的幂，直到给定设备的WebGLRenderer.capabilities.maxTextureSize， 虽然宽度和高度不必相同（例如，（512,1024）有效）。 默认值为（512,512）。
				sunLight.shadow.mapSize.width = 2048;
				sunLight.shadow.mapSize.height = 2048;
                //.bias : Float
//阴影贴图偏差，在确定曲面是否在阴影中时，从标准化深度添加或减去多少。
//默认值为0.此处非常小的调整（大约0.0001）可能有助于减少阴影中的伪影
				sunLight.shadow.bias = - 0.001;
                //.position : Vector3   假如这个值设置为 Object3D.DEFAULT_UP (0, 1, 0)，光线将会从上往下照射
				sunLight.position.set( .5, 3, .5 );

半球光（HemisphereLight）

光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。半球光不能投射阴影。

3 Texture

包裹模式

THREE.RepeatWrapping THREE.ClampToEdgeWrapping THREE.MirroredRepeatWrapping

这些常量定义了纹理贴图的 wrapS 和 wrapT 属性，定义了水平和垂直方向上纹理的包裹