【Three.js基础学习】20.Environment map

提示：文章写完后，目次可以主动生成，怎样生成可参考右边的资助文档
  

---

前言

   课程回顾：
      模型的加载
      GLTFLoader
  
      环境贴图实现；
      CubeTextureLoader
  
      LDR:低动态范围
      backgroundBlurriness：设置背景含糊 (不生效 为什么?)
      backgroundIntensity: 设置背景强度，设置的是背景亮度 (不生效 为什么?)
  
      HDRI :  等距矩形环境贴图
      怎样加载使用HDRI文件?
  
      RGBE ：赤色 ，绿色 ，蓝色 ，指数：存储的是亮度 (重点)
      我们需要使用RGBELoader。"RGBE"代表"红绿蓝指数"，指数存储亮度
      这是“HDR”格式的编码。
  
      THREE.EquirectangularReflectionMapping // 等距型反射
      THREE.EquirectangularRefractionMapping // 折射透明
  
      HDRI 缺点
          文件加载渲染较大
      建议只对光照使用HDRI
  
      ?上面实现中有一个题目，怎样办理环境贴图对模型的影响
  
      1.blender怎样生成环田地图?
      在blender制作
  
      2.使用NVIDA Canvas生成环田地图
      https://www.nvidia.cn/studio/canvas/
  
          类型：exr后缀
          扩展名是.exr，而不是.hdr。我们导出的文件也是存储的颜色范围的“HDR”图像，但编码不同
          EXR还可以存储层，并具有alpha通道
     
      3. 环境贴图 (收费)
          https://skybox.blockadelabs.com/
  
     
      时间环田地图
      真实的光 ： 怎样让甜甜圈模型 产生光?
          需要创建自己的立方体纹理，更textureLoad差不多，在每一帧中做处置惩罚；因此使用webgl立方体渲染器目的
     
      这个时间模型还是黑色
  
      需要一个特殊的相机。 如果想要渲染就需要一个相机进行拍摄
      WebGLCubeRenderTarget
  
      分成办理相机渲染，决定显示什么
      object.layers.enable(..)将添加一个图层
      object.layers.disable(...)将移除一个图层
      object.layers.set(...)将主动启用一个图层并禁用全部其他图层
  
  一、代码

1. import * as THREE from 'three'
2. import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
3. import GUI from 'lil-gui'
4. import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
5. import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
6. import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
7. import { Mapping, Mesh } from 'three'
10. /*
11. * Loaders
12. */
13. const gltfLoader = new GLTFLoader()
14. const cubeTextrueLoader = new THREE.CubeTextureLoader()
15. const rgbeLoader = new RGBELoader()
16. const exrLoader = new EXRLoader()
17. const textureLoader = new THREE.TextureLoader()
19. /**
20. * gui
21. */
22. const gui = new GUI()
23. const global = {
24. }
26. // Canvas
27. const canvas = document.querySelector('canvas.webgl')
29. /**
30. * scene
31. */
32. const scene = new THREE.Scene()
33. /*
34.     Updata all materials
35. */
36. const updateAllMaterials = () => {
37.     scene.traverse((child)=>{ //  遍历
38.         if(child.isMesh && child.material.isMeshStandardMaterial){
39.             child.material.envMapIntensity = global.envMapIntensity
40.         }
41.     })
42. }
44. /*
45.     environmentMap 环境贴图
46. */
47. scene.backgroundBlurriness = 0
48. scene.backgroundIntensity = 1
49. // global intensity
50. global.envMapIntensity = 1 // 环境贴图强度
51. gui
52.     .add(global,'envMapIntensity')
53.     .min(0)
54.     .max(10)
55.     .step(0.001)
56.     .onChange(updateAllMaterials)
57. gui
58.     .add(scene, 'backgroundBlurriness')
59.     .min(0)
60.     .max(1)
61.     .step(0.001)
62. gui
63.     .add(scene, 'backgroundIntensity')
64.     .min(0)
65.     .max(10)
66.     .step(0.001)
67.    
69. // LDR cube texture  环境贴图的实现
70. // const environmentMap = cubeTextrueLoader.load([
71. //     '/environmentMaps/2/px.png',
72. //     '/environmentMaps/2/nx.png',
73. //     '/environmentMaps/2/py.png',
74. //     '/environmentMaps/2/ny.png',
75. //     '/environmentMaps/2/pz.png',
76. //     '/environmentMaps/2/nz.png',
77. // ])
78. // scene.environment = environmentMap  // 可以实现场景中每一个网格材质对于场景起到作用
79. // scene.background = environmentMap // 将环境贴图应用到场景中
82. // HDR (RGBA) equirectangular
83. // rgbeLoader.load(
84. //     '/environmentMaps/测试hdr生成全景3.hdr',
85. //     (environmentMap)=>{
86. //         environmentMap.mapping = THREE.EquirectangularReflectionMapping
87. //         scene.background = environmentMap
88. //         scene.environment = environmentMap
89. //     }
90. // )
92. // HDR (EXR) equirectangular
93. // exrLoader.load('/environmentMaps/nvidiaCanvas-4k.exr',(environmentMap)=>{
94. //     environmentMap.mapping = THREE.EquirectangularReflectionMapping
95. //     scene.background = environmentMap
96. //     scene.environment = environmentMap
97. // })
99. // LDR equirectangular
100. // const environmentMap = textureLoader.load('') //没资源
101. // environmentMap.mapping = THREE.EquirectangularReflectionMapping
102. // environmentMap.colorSpace = THREE.SRGBColorSpace
103. // scene.background = environmentMap
104. // scene.environment = environmentMap
106. // Ground projected skybox
107. // rgbeLoader.load('/environmentMaps/1/little_paris_eiffel_tower_8k.hdr',(environmentMap)=>{
108. //     environmentMap.mapping = THREE.EquirectangularReflectionMapping
109. //     scene.environment = environmentMap
110. //     scene.background = environmentMap
111. // })
113. /*
114.     Real time environment map
115. */
116. const environmentMap = textureLoader.load('/environmentMaps/blockadesLabsSkybox/interior_views_cozy_wood_cabin_with_cauldron_and_p.jpg')
117. environmentMap.mapping = THREE.EquirectangularReflectionMapping
118. environmentMap.colorSpace = THREE.SRGBColorSpace
120. scene.background = environmentMap
122. /*
123.     holyDount
124. */
125. const holyDonut = new THREE.Mesh(
126.     new THREE.TorusGeometry(8,0.5),
127.     new THREE.MeshBasicMaterial({color:new THREE.Color(10, 4, 2)})
128. )
129. holyDonut.layers.enable(1) // 分层启用
130. holyDonut.position.y = 3.5
131. scene.add(holyDonut)
133. /*
134.     cube render target
135. */
136. const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(
137.     256, // 分辨率
138.     { // 渲染目标的选项
139.         type:THREE.FloatType  // 类型
140.     }
141. )
143. scene.environment = cubeRenderTarget.texture // 使用自己的纹理
145. // Cube Camera
146. const cubeCamera = new THREE.CubeCamera(0.1,100,cubeRenderTarget) // 要每一帧渲染
147. cubeCamera.layers.set(1) // 设置相机分成
149. /**
150. * torus knot
151. */
152. const torusKnot = new THREE.Mesh(
153.     new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
154.     new THREE.MeshStandardMaterial({
155.         roughness: 0,
156.         metalness: 1,
157.         color: 0xaaaaaa
158.     })
159. )
160. torusKnot.position.x = -4
161. torusKnot.position.y = 4
162. scene.add(torusKnot)
164. /*
165. * Models
166. */
167. gltfLoader.load(
168.     '/models/FlightHelmet/glTF/FlightHelmet.gltf',
169.     (gltf)=>{
170.         gltf.scene.scale.set(10,10,10)
171.         scene.add(gltf.scene)
172.         updateAllMaterials()
173.     }
174. )
177. /**
178. * Sizes
179. */
180. const sizes = {
181.     width: window.innerWidth,
182.     height: window.innerHeight
183. }
185. window.addEventListener('resize', () => {
186.     // Update sizes
187.     sizes.width = window.innerWidth
188.     sizes.height = window.innerHeight
190.     // Update camera
191.     camera.aspect = sizes.width / sizes.height
192.     camera.updateProjectionMatrix()
194.     // Update renderer
195.     renderer.setSize(sizes.width, sizes.height)
196.     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
197. })
199. /**
200. * camera
201. */
202. const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
203. camera.position.set(- 8, 4, 8)
204. scene.add(camera)
206. /**
207. * renderer
208. */
209. const renderer = new THREE.WebGLRenderer({
210.     canvas: canvas
211. })
212. // renderer.shadowMap.enabled = true
213. // renderer.shadowMap.type = THREE.PCFSoftShadowMap
214. renderer.setSize(sizes.width, sizes.height)
215. renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
218. /**
219. * control
220. */
221. const controls = new OrbitControls(camera, canvas)
222. controls.target.y = 3.5
223. controls.enableDamping = true
225. /**
226. * tick
227. */
228. const clock = new THREE.Clock()
229. const tick = () => {
230.     // Time
231.     const elapsedTime = clock.getElapsedTime()
233.     if(holyDonut){
234.         holyDonut.rotation.x = Math.sin(elapsedTime) * 2
235.         cubeCamera.update(renderer, scene)
236.     }
238.     controls.update()
239.     renderer.render(scene, camera)
240.     requestAnimationFrame(tick)
241. }
242. tick()

复制代码

二、知识点

1.LDR

1. import * as THREE from 'three'
2. import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
3. import GUI from 'lil-gui'
4. import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
5. import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
6. import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
7. import { Mapping, Mesh } from 'three'
10. /*
11. * Loaders
12. */
13. const gltfLoader = new GLTFLoader()
14. const cubeTextrueLoader = new THREE.CubeTextureLoader()
15. const rgbeLoader = new RGBELoader()
16. const exrLoader = new EXRLoader()
17. const textureLoader = new THREE.TextureLoader()
19. /**
20. * gui
21. */
22. const gui = new GUI()
23. const global = {
24. }
26. // Canvas
27. const canvas = document.querySelector('canvas.webgl')
29. /**
30. * scene
31. */
32. const scene = new THREE.Scene()
33. /*
34.     Updata all materials
35. */
36. const updateAllMaterials = () => {
37.     scene.traverse((child)=>{ //  遍历
38.         if(child.isMesh && child.material.isMeshStandardMaterial){
39.             child.material.envMapIntensity = global.envMapIntensity
40.         }
41.     })
42. }
44. /*
45.     environmentMap 环境贴图
46. */
47. scene.backgroundBlurriness = 0
48. scene.backgroundIntensity = 1
49. // global intensity
50. global.envMapIntensity = 1 // 环境贴图强度
51. gui
52.     .add(global,'envMapIntensity')
53.     .min(0)
54.     .max(10)
55.     .step(0.001)
56.     .onChange(updateAllMaterials)
57. gui
58.     .add(scene, 'backgroundBlurriness')
59.     .min(0)
60.     .max(1)
61.     .step(0.001)
62. gui
63.     .add(scene, 'backgroundIntensity')
64.     .min(0)
65.     .max(10)
66.     .step(0.001)
67.    
69. // LDR cube texture  环境贴图的实现
70. const environmentMap = cubeTextrueLoader.load([
71.     '/environmentMaps/2/px.png',
72.     '/environmentMaps/2/nx.png',
73.     '/environmentMaps/2/py.png',
74.     '/environmentMaps/2/ny.png',
75.     '/environmentMaps/2/pz.png',
76.     '/environmentMaps/2/nz.png',
77. ])
78. scene.environment = environmentMap  // 可以实现场景中每一个网格材质对于场景起到作用
79. scene.background = environmentMap // 将环境贴图应用到场景中
82. /**
83. * torus knot
84. */
85. const torusKnot = new THREE.Mesh(
86.     new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
87.     new THREE.MeshStandardMaterial({
88.         roughness: 0,
89.         metalness: 1,
90.         color: 0xaaaaaa
91.     })
92. )
93. torusKnot.position.x = -4
94. torusKnot.position.y = 4
95. scene.add(torusKnot)
97. /*
98. * Models
99. */
100. gltfLoader.load(
101.     '/models/FlightHelmet/glTF/FlightHelmet.gltf',
102.     (gltf)=>{
103.         gltf.scene.scale.set(10,10,10)
104.         scene.add(gltf.scene)
105.         updateAllMaterials()
106.     }
107. )
110. /**
111. * Sizes
112. */
113. const sizes = {
114.     width: window.innerWidth,
115.     height: window.innerHeight
116. }
118. window.addEventListener('resize', () => {
119.     // Update sizes
120.     sizes.width = window.innerWidth
121.     sizes.height = window.innerHeight
123.     // Update camera
124.     camera.aspect = sizes.width / sizes.height
125.     camera.updateProjectionMatrix()
127.     // Update renderer
128.     renderer.setSize(sizes.width, sizes.height)
129.     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
130. })
132. /**
133. * camera
134. */
135. const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
136. camera.position.set(- 8, 4, 8)
137. scene.add(camera)
139. /**
140. * renderer
141. */
142. const renderer = new THREE.WebGLRenderer({
143.     canvas: canvas
144. })
145. // renderer.shadowMap.enabled = true
146. // renderer.shadowMap.type = THREE.PCFSoftShadowMap
147. renderer.setSize(sizes.width, sizes.height)
148. renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
151. /**
152. * control
153. */
154. const controls = new OrbitControls(camera, canvas)
155. controls.target.y = 3.5
156. controls.enableDamping = true
158. /**
159. * tick
160. */
161. const clock = new THREE.Clock()
162. const tick = () => {
163.     // Time
164.     const elapsedTime = clock.getElapsedTime()
167.     controls.update()
168.     renderer.render(scene, camera)
169.     requestAnimationFrame(tick)
170. }
171. tick()

复制代码

2.HDR （RGBA）

1. import * as THREE from 'three'
2. import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
3. import GUI from 'lil-gui'
4. import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
5. import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
6. import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
7. import { Mapping, Mesh } from 'three'
9. /*
10. * Loaders
11. */
12. const gltfLoader = new GLTFLoader()
13. const cubeTextrueLoader = new THREE.CubeTextureLoader()
14. const rgbeLoader = new RGBELoader()
15. const exrLoader = new EXRLoader()
16. const textureLoader = new THREE.TextureLoader()
18. /**
19. * gui
20. */
21. const gui = new GUI()
22. const global = {
23. }
25. // Canvas
26. const canvas = document.querySelector('canvas.webgl')
28. /**
29. * scene
30. */
31. const scene = new THREE.Scene()
32. /*
33.     Updata all materials
34. */
35. const updateAllMaterials = () => {
36.     scene.traverse((child)=>{ //  遍历
37.         if(child.isMesh && child.material.isMeshStandardMaterial){
38.             child.material.envMapIntensity = global.envMapIntensity
39.         }
40.     })
41. }
43. /*
44.     environmentMap 环境贴图
45. */
46. scene.backgroundBlurriness = 0
47. scene.backgroundIntensity = 1
48. // global intensity
49. global.envMapIntensity = 1 // 环境贴图强度
50. gui
51.     .add(global,'envMapIntensity')
52.     .min(0)
53.     .max(10)
54.     .step(0.001)
55.     .onChange(updateAllMaterials)
56. gui
57.     .add(scene, 'backgroundBlurriness')
58.     .min(0)
59.     .max(1)
60.     .step(0.001)
61. gui
62.     .add(scene, 'backgroundIntensity')
63.     .min(0)
64.     .max(10)
65.     .step(0.001)
66.    
69. // HDR (RGBA) equirectangular
70. rgbeLoader.load(
71.     '/environmentMaps/测试hdr生成全景3.hdr',
72.     (environmentMap)=>{
73.         environmentMap.mapping = THREE.EquirectangularReflectionMapping
74.         scene.background = environmentMap
75.         scene.environment = environmentMap
76.     }
77. )
80. /**
81. * torus knot
82. */
83. const torusKnot = new THREE.Mesh(
84.     new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
85.     new THREE.MeshStandardMaterial({
86.         roughness: 0,
87.         metalness: 1,
88.         color: 0xaaaaaa
89.     })
90. )
91. torusKnot.position.x = -4
92. torusKnot.position.y = 4
93. scene.add(torusKnot)
95. /*
96. * Models
97. */
98. gltfLoader.load(
99.     '/models/FlightHelmet/glTF/FlightHelmet.gltf',
100.     (gltf)=>{
101.         gltf.scene.scale.set(10,10,10)
102.         scene.add(gltf.scene)
103.         updateAllMaterials()
104.     }
105. )
108. /**
109. * Sizes
110. */
111. const sizes = {
112.     width: window.innerWidth,
113.     height: window.innerHeight
114. }
116. window.addEventListener('resize', () => {
117.     // Update sizes
118.     sizes.width = window.innerWidth
119.     sizes.height = window.innerHeight
121.     // Update camera
122.     camera.aspect = sizes.width / sizes.height
123.     camera.updateProjectionMatrix()
125.     // Update renderer
126.     renderer.setSize(sizes.width, sizes.height)
127.     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
128. })
130. /**
131. * camera
132. */
133. const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
134. camera.position.set(- 8, 4, 8)
135. scene.add(camera)
137. /**
138. * renderer
139. */
140. const renderer = new THREE.WebGLRenderer({
141.     canvas: canvas
142. })
143. // renderer.shadowMap.enabled = true
144. // renderer.shadowMap.type = THREE.PCFSoftShadowMap
145. renderer.setSize(sizes.width, sizes.height)
146. renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
149. /**
150. * control
151. */
152. const controls = new OrbitControls(camera, canvas)
153. controls.target.y = 3.5
154. controls.enableDamping = true
156. /**
157. * tick
158. */
159. const clock = new THREE.Clock()
160. const tick = () => {
161.     // Time
162.     const elapsedTime = clock.getElapsedTime()
166.     controls.update()
167.     renderer.render(scene, camera)
168.     requestAnimationFrame(tick)
169. }
170. tick()

复制代码

3.HDR （EXR）

1. import * as THREE from 'three'
2. import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
3. import GUI from 'lil-gui'
4. import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
5. import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
6. import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
7. import { Mapping, Mesh } from 'three'
9. /*
10. * Loaders
11. */
12. const gltfLoader = new GLTFLoader()
13. const cubeTextrueLoader = new THREE.CubeTextureLoader()
14. const rgbeLoader = new RGBELoader()
15. const exrLoader = new EXRLoader()
16. const textureLoader = new THREE.TextureLoader()
18. /**
19. * gui
20. */
21. const gui = new GUI()
22. const global = {
23. }
25. // Canvas
26. const canvas = document.querySelector('canvas.webgl')
28. /**
29. * scene
30. */
31. const scene = new THREE.Scene()
32. /*
33.     Updata all materials
34. */
35. const updateAllMaterials = () => {
36.     scene.traverse((child)=>{ //  遍历
37.         if(child.isMesh && child.material.isMeshStandardMaterial){
38.             child.material.envMapIntensity = global.envMapIntensity
39.         }
40.     })
41. }
43. /*
44.     environmentMap 环境贴图
45. */
46. scene.backgroundBlurriness = 0
47. scene.backgroundIntensity = 1
48. // global intensity
49. global.envMapIntensity = 1 // 环境贴图强度
50. gui
51.     .add(global,'envMapIntensity')
52.     .min(0)
53.     .max(10)
54.     .step(0.001)
55.     .onChange(updateAllMaterials)
56. gui
57.     .add(scene, 'backgroundBlurriness')
58.     .min(0)
59.     .max(1)
60.     .step(0.001)
61. gui
62.     .add(scene, 'backgroundIntensity')
63.     .min(0)
64.     .max(10)
65.     .step(0.001)
66.    
69. // HDR (EXR) equirectangular
70. exrLoader.load('/environmentMaps/nvidiaCanvas-4k.exr',(environmentMap)=>{
71.     environmentMap.mapping = THREE.EquirectangularReflectionMapping
72.     scene.background = environmentMap
73.     scene.environment = environmentMap
74. })
76. /**
77. * torus knot
78. */
79. const torusKnot = new THREE.Mesh(
80.     new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
81.     new THREE.MeshStandardMaterial({
82.         roughness: 0,
83.         metalness: 1,
84.         color: 0xaaaaaa
85.     })
86. )
87. torusKnot.position.x = -4
88. torusKnot.position.y = 4
89. scene.add(torusKnot)
91. /*
92. * Models
93. */
94. gltfLoader.load(
95.     '/models/FlightHelmet/glTF/FlightHelmet.gltf',
96.     (gltf)=>{
97.         gltf.scene.scale.set(10,10,10)
98.         scene.add(gltf.scene)
99.         updateAllMaterials()
100.     }
101. )
104. /**
105. * Sizes
106. */
107. const sizes = {
108.     width: window.innerWidth,
109.     height: window.innerHeight
110. }
112. window.addEventListener('resize', () => {
113.     // Update sizes
114.     sizes.width = window.innerWidth
115.     sizes.height = window.innerHeight
117.     // Update camera
118.     camera.aspect = sizes.width / sizes.height
119.     camera.updateProjectionMatrix()
121.     // Update renderer
122.     renderer.setSize(sizes.width, sizes.height)
123.     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
124. })
126. /**
127. * camera
128. */
129. const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
130. camera.position.set(- 8, 4, 8)
131. scene.add(camera)
133. /**
134. * renderer
135. */
136. const renderer = new THREE.WebGLRenderer({
137.     canvas: canvas
138. })
139. // renderer.shadowMap.enabled = true
140. // renderer.shadowMap.type = THREE.PCFSoftShadowMap
141. renderer.setSize(sizes.width, sizes.height)
142. renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
145. /**
146. * control
147. */
148. const controls = new OrbitControls(camera, canvas)
149. controls.target.y = 3.5
150. controls.enableDamping = true
152. /**
153. * tick
154. */
155. const clock = new THREE.Clock()
156. const tick = () => {
157.     // Time
158.     const elapsedTime = clock.getElapsedTime()
160.     controls.update()
161.     renderer.render(scene, camera)
162.     requestAnimationFrame(tick)
163. }
164. tick()

复制代码

4.时间环田地图

1. import * as THREE from 'three'
2. import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
3. import GUI from 'lil-gui'
4. import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
5. import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
6. import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
7. import { Mapping, Mesh } from 'three'
10. /*
11. * Loaders
12. */
13. const gltfLoader = new GLTFLoader()
14. const cubeTextrueLoader = new THREE.CubeTextureLoader()
15. const rgbeLoader = new RGBELoader()
16. const exrLoader = new EXRLoader()
17. const textureLoader = new THREE.TextureLoader()
19. /**
20. * gui
21. */
22. const gui = new GUI()
23. const global = {
24. }
26. // Canvas
27. const canvas = document.querySelector('canvas.webgl')
29. /**
30. * scene
31. */
32. const scene = new THREE.Scene()
33. /*
34.     Updata all materials
35. */
36. const updateAllMaterials = () => {
37.     scene.traverse((child)=>{ //  遍历
38.         if(child.isMesh && child.material.isMeshStandardMaterial){
39.             child.material.envMapIntensity = global.envMapIntensity
40.         }
41.     })
42. }
44. /*
45.     environmentMap 环境贴图
46. */
47. scene.backgroundBlurriness = 0
48. scene.backgroundIntensity = 1
49. // global intensity
50. global.envMapIntensity = 1 // 环境贴图强度
51. gui
52.     .add(global,'envMapIntensity')
53.     .min(0)
54.     .max(10)
55.     .step(0.001)
56.     .onChange(updateAllMaterials)
57. gui
58.     .add(scene, 'backgroundBlurriness')
59.     .min(0)
60.     .max(1)
61.     .step(0.001)
62. gui
63.     .add(scene, 'backgroundIntensity')
64.     .min(0)
65.     .max(10)
66.     .step(0.001)
67.    
69. /*
70.     Real time environment map
71. */
72. const environmentMap = textureLoader.load('/environmentMaps/blockadesLabsSkybox/interior_views_cozy_wood_cabin_with_cauldron_and_p.jpg')
73. environmentMap.mapping = THREE.EquirectangularReflectionMapping
74. environmentMap.colorSpace = THREE.SRGBColorSpace
76. scene.background = environmentMap
78. /*
79.     holyDount
80. */
81. const holyDonut = new THREE.Mesh(
82.     new THREE.TorusGeometry(8,0.5),
83.     new THREE.MeshBasicMaterial({color:new THREE.Color(10, 4, 2)})
84. )
85. holyDonut.layers.enable(1) // 分层启用
86. holyDonut.position.y = 3.5
87. scene.add(holyDonut)
89. /*
90.     cube render target
91. */
92. const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(
93.     256, // 分辨率
94.     { // 渲染目标的选项
95.         type:THREE.FloatType  // 类型
96.     }
97. )
99. scene.environment = cubeRenderTarget.texture // 使用自己的纹理
101. // Cube Camera
102. const cubeCamera = new THREE.CubeCamera(0.1,100,cubeRenderTarget) // 要每一帧渲染
103. cubeCamera.layers.set(1) // 设置相机分成
105. /**
106. * torus knot
107. */
108. const torusKnot = new THREE.Mesh(
109.     new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
110.     new THREE.MeshStandardMaterial({
111.         roughness: 0,
112.         metalness: 1,
113.         color: 0xaaaaaa
114.     })
115. )
116. torusKnot.position.x = -4
117. torusKnot.position.y = 4
118. scene.add(torusKnot)
120. /*
121. * Models
122. */
123. gltfLoader.load(
124.     '/models/FlightHelmet/glTF/FlightHelmet.gltf',
125.     (gltf)=>{
126.         gltf.scene.scale.set(10,10,10)
127.         scene.add(gltf.scene)
128.         updateAllMaterials()
129.     }
130. )
133. /**
134. * Sizes
135. */
136. const sizes = {
137.     width: window.innerWidth,
138.     height: window.innerHeight
139. }
141. window.addEventListener('resize', () => {
142.     // Update sizes
143.     sizes.width = window.innerWidth
144.     sizes.height = window.innerHeight
146.     // Update camera
147.     camera.aspect = sizes.width / sizes.height
148.     camera.updateProjectionMatrix()
150.     // Update renderer
151.     renderer.setSize(sizes.width, sizes.height)
152.     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
153. })
155. /**
156. * camera
157. */
158. const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
159. camera.position.set(- 8, 4, 8)
160. scene.add(camera)
162. /**
163. * renderer
164. */
165. const renderer = new THREE.WebGLRenderer({
166.     canvas: canvas
167. })
168. // renderer.shadowMap.enabled = true
169. // renderer.shadowMap.type = THREE.PCFSoftShadowMap
170. renderer.setSize(sizes.width, sizes.height)
171. renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
174. /**
175. * control
176. */
177. const controls = new OrbitControls(camera, canvas)
178. controls.target.y = 3.5
179. controls.enableDamping = true
181. /**
182. * tick
183. */
184. const clock = new THREE.Clock()
185. const tick = () => {
186.     // Time
187.     const elapsedTime = clock.getElapsedTime()
189.     if(holyDonut){
190.         holyDonut.rotation.x = Math.sin(elapsedTime) * 2
191.         cubeCamera.update(renderer, scene)
192.     }
194.     controls.update()
195.     renderer.render(scene, camera)
196.     requestAnimationFrame(tick)
197. }
198. tick()

复制代码

    真实时间环田地图
  

---

总结

环田地图多种加载方式，以及用法。尚有关于环田地图资源怎样探求，怎么自己在blender制作环田地图等

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。