three.js使用情况贴图或者加载hdr图

1、three.js使用情况贴图

1.1、效果视频


     情况贴图
  
1.2、使用步调（个人以为）

（1）导入引入相关方法
（2）创建场景
（3）创建相机
（4）添加物体材质
（5）添加光源
（6）渲染
1.3、代码

1. // 环境贴图代码
2. import * as THREE from 'three'
4. //目标：使用环境贴图放在球上展示
6. //导入轨道控制器
7. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
9. //1、创建场景
10. const scene = new THREE.Scene()
12. //2、创建相机
13. const camera = new THREE.PerspectiveCamera(
14.     75,
15.     window.innerWidth / window.innerHeight,
16.     0.1,
17.     1000
18. ) // 参数分别代表，相机角度、屏幕宽高比、近端点，远端点
20. //设置相机位置
21. camera.position.set(2, 2, 2)
22. scene.add(camera)
24. //导入纹理
25. const cubeTextureLoader = new THREE.CubeTextureLoader()
26. //一下代码是因为物体有上下左右前后六个面，所以设置6个方向的贴图
27. const envMapTexture = cubeTextureLoader.load([
28.     '/static/texture/environmentMaps/1/px.jpg',
29.     '/static/texture/environmentMaps/1/nx.jpg',
30.     '/static/texture/environmentMaps/1/py.jpg',
31.     '/static/texture/environmentMaps/1/ny.jpg',
32.     '/static/texture/environmentMaps/1/pz.jpg',
33.     '/static/texture/environmentMaps/1/nz.jpg',
34. ])
35. //添加物体
36. const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
37. const material = new THREE.MeshStandardMaterial({
38.     metalness: 0.7, //金属度
39.     roughness: 0.1, //粗糙度，设置为0表面会非常光滑，可以折射出太阳光
40.     // envMap: envMapTexture, //环境贴图
41. })
42. const mesh = new THREE.Mesh(sphereGeometry, material)
43. scene.add(mesh)
45. //给场景添加背景
46. scene.background = envMapTexture
47. //给场景中所有的物体添加默认的贴图
48. scene.environment = envMapTexture
50. //添加环境光
51. const light = new THREE.AmbientLight(0xffffff, 0.5)
52. scene.add(light)
54. //添加直线光源
55. const directionLight = new THREE.DirectionalLight(0xffffff, 1)
56. directionLight.position.set(10, 10, 10)
57. scene.add(directionLight)
59. //初始化渲染器
60. const renderer = new THREE.WebGLRenderer()
62. //设置渲染的尺寸大小
63. renderer.setSize(window.innerWidth, window.innerHeight)
65. //将webGL渲染的canvas添加到app中
66. document.getElementById('app').appendChild(renderer.domElement)
68. //创建控制器
69. const controls = new OrbitControls(camera, renderer.domElement)
71. //设置控制器阻尼，让滑动更有真实感
72. controls.enableDamping = true
74. //创建坐标轴
75. const axesHelper = new THREE.AxesHelper(5)
76. scene.add(axesHelper)
78. render()
80. //渲染函数
81. function render(time) {
82.     controls.update()
83.     renderer.render(scene, camera)
84.     //下一帧渲染完毕再次执行，保证每一帧都渲染
85.     requestAnimationFrame(render)
86. }

复制代码

2、three.js加载hdr图

2.1、效果视频


     加载hdr图
  
2.2、代码

1. // three.js加载hdr图
2. import * as THREE from 'three'
4. //目标：加载hdr图
6. //导入轨道控制器
7. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
9. //导入hdr加载器
10. import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
12. //1、创建场景
13. const scene = new THREE.Scene()
15. //2、创建相机
16. const camera = new THREE.PerspectiveCamera(
17.     75,
18.     window.innerWidth / window.innerHeight,
19.     0.1,
20.     1000
21. ) // 参数分别代表，相机角度、屏幕宽高比、近端点，远端点
23. //设置相机位置
24. camera.position.set(2, 2, 2)
25. scene.add(camera)
27. const rgbeLoader = new RGBELoader()
28. rgbeLoader.loadAsync('static/texture/hdr/003.hdr').then((texture) => {
29.     texture.mapping = THREE.EquirectangularReflectionMapping //正常只是一张图平铺，设置这个可以让图包围环绕整个环境
30.     scene.background = texture //设置环境贴图
31.     scene.environment = texture
32. })
34. //添加物体
35. const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
36. const material = new THREE.MeshStandardMaterial({
37.     metalness: 0.7, //金属度
38.     roughness: 0.1, //粗糙度，设置为0表面会非常光滑，可以折射出太阳光
39. })
40. const mesh = new THREE.Mesh(sphereGeometry, material)
41. scene.add(mesh)
43. //添加环境光
44. const light = new THREE.AmbientLight(0xffffff, 0.5)
45. scene.add(light)
47. //添加直线光源
48. const directionLight = new THREE.DirectionalLight(0xffffff, 1)
49. directionLight.position.set(10, 10, 10)
50. scene.add(directionLight)
52. //初始化渲染器
53. const renderer = new THREE.WebGLRenderer()
55. //设置渲染的尺寸大小
56. renderer.setSize(window.innerWidth, window.innerHeight)
58. //将webGL渲染的canvas添加到app中
59. document.getElementById('app').appendChild(renderer.domElement)
61. //创建控制器
62. const controls = new OrbitControls(camera, renderer.domElement)
64. //设置控制器阻尼，让滑动更有真实感
65. controls.enableDamping = true
67. //创建坐标轴
68. const axesHelper = new THREE.AxesHelper(5)
69. scene.add(axesHelper)
71. render()
73. //渲染函数
74. function render(time) {
75.     controls.update()
76.     renderer.render(scene, camera)
77.     //下一帧渲染完毕再次执行，保证每一帧都渲染
78.     requestAnimationFrame(render)
79. }

复制代码

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