RoomEnvironment.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. import {
  2. BackSide,
  3. BoxGeometry,
  4. InstancedMesh,
  5. Mesh,
  6. MeshBasicMaterial,
  7. MeshStandardMaterial,
  8. PointLight,
  9. Scene,
  10. Object3D,
  11. } from 'three';
  12. /**
  13. * This class represents a scene with a basic room setup that can be used as
  14. * input for {@link PMREMGenerator#fromScene}. The resulting PMREM represents the room's
  15. * lighting and can be used for Image Based Lighting by assigning it to {@link Scene#environment}
  16. * or directly as an environment map to PBR materials.
  17. *
  18. * The implementation is based on the [EnvironmentScene](https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts)
  19. * component from the `model-viewer` project.
  20. *
  21. * ```js
  22. * const environment = new RoomEnvironment();
  23. * const pmremGenerator = new THREE.PMREMGenerator( renderer );
  24. *
  25. * const envMap = pmremGenerator.fromScene( environment ).texture;
  26. * scene.environment = envMap;
  27. * ```
  28. *
  29. * @augments Scene
  30. * @three_import import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
  31. */
  32. class RoomEnvironment extends Scene {
  33. constructor() {
  34. super();
  35. const geometry = new BoxGeometry();
  36. geometry.deleteAttribute( 'uv' );
  37. const roomMaterial = new MeshStandardMaterial( { side: BackSide } );
  38. const boxMaterial = new MeshStandardMaterial();
  39. const mainLight = new PointLight( 0xffffff, 900, 28, 2 );
  40. mainLight.position.set( 0.418, 16.199, 0.300 );
  41. this.add( mainLight );
  42. const room = new Mesh( geometry, roomMaterial );
  43. room.position.set( - 0.757, 13.219, 0.717 );
  44. room.scale.set( 31.713, 28.305, 28.591 );
  45. this.add( room );
  46. const boxes = new InstancedMesh( geometry, boxMaterial, 6 );
  47. const transform = new Object3D();
  48. // box1
  49. transform.position.set( - 10.906, 2.009, 1.846 );
  50. transform.rotation.set( 0, - 0.195, 0 );
  51. transform.scale.set( 2.328, 7.905, 4.651 );
  52. transform.updateMatrix();
  53. boxes.setMatrixAt( 0, transform.matrix );
  54. // box2
  55. transform.position.set( - 5.607, - 0.754, - 0.758 );
  56. transform.rotation.set( 0, 0.994, 0 );
  57. transform.scale.set( 1.970, 1.534, 3.955 );
  58. transform.updateMatrix();
  59. boxes.setMatrixAt( 1, transform.matrix );
  60. // box3
  61. transform.position.set( 6.167, 0.857, 7.803 );
  62. transform.rotation.set( 0, 0.561, 0 );
  63. transform.scale.set( 3.927, 6.285, 3.687 );
  64. transform.updateMatrix();
  65. boxes.setMatrixAt( 2, transform.matrix );
  66. // box4
  67. transform.position.set( - 2.017, 0.018, 6.124 );
  68. transform.rotation.set( 0, 0.333, 0 );
  69. transform.scale.set( 2.002, 4.566, 2.064 );
  70. transform.updateMatrix();
  71. boxes.setMatrixAt( 3, transform.matrix );
  72. // box5
  73. transform.position.set( 2.291, - 0.756, - 2.621 );
  74. transform.rotation.set( 0, - 0.286, 0 );
  75. transform.scale.set( 1.546, 1.552, 1.496 );
  76. transform.updateMatrix();
  77. boxes.setMatrixAt( 4, transform.matrix );
  78. // box6
  79. transform.position.set( - 2.193, - 0.369, - 5.547 );
  80. transform.rotation.set( 0, 0.516, 0 );
  81. transform.scale.set( 3.875, 3.487, 2.986 );
  82. transform.updateMatrix();
  83. boxes.setMatrixAt( 5, transform.matrix );
  84. this.add( boxes );
  85. // -x right
  86. const light1 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
  87. light1.position.set( - 16.116, 14.37, 8.208 );
  88. light1.scale.set( 0.1, 2.428, 2.739 );
  89. this.add( light1 );
  90. // -x left
  91. const light2 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
  92. light2.position.set( - 16.109, 18.021, - 8.207 );
  93. light2.scale.set( 0.1, 2.425, 2.751 );
  94. this.add( light2 );
  95. // +x
  96. const light3 = new Mesh( geometry, createAreaLightMaterial( 17 ) );
  97. light3.position.set( 14.904, 12.198, - 1.832 );
  98. light3.scale.set( 0.15, 4.265, 6.331 );
  99. this.add( light3 );
  100. // +z
  101. const light4 = new Mesh( geometry, createAreaLightMaterial( 43 ) );
  102. light4.position.set( - 0.462, 8.89, 14.520 );
  103. light4.scale.set( 4.38, 5.441, 0.088 );
  104. this.add( light4 );
  105. // -z
  106. const light5 = new Mesh( geometry, createAreaLightMaterial( 20 ) );
  107. light5.position.set( 3.235, 11.486, - 12.541 );
  108. light5.scale.set( 2.5, 2.0, 0.1 );
  109. this.add( light5 );
  110. // +y
  111. const light6 = new Mesh( geometry, createAreaLightMaterial( 100 ) );
  112. light6.position.set( 0.0, 20.0, 0.0 );
  113. light6.scale.set( 1.0, 0.1, 1.0 );
  114. this.add( light6 );
  115. }
  116. /**
  117. * Frees internal resources. This method should be called
  118. * when the environment is no longer required.
  119. */
  120. dispose() {
  121. const resources = new Set();
  122. this.traverse( ( object ) => {
  123. if ( object.isMesh ) {
  124. resources.add( object.geometry );
  125. resources.add( object.material );
  126. }
  127. } );
  128. for ( const resource of resources ) {
  129. resource.dispose();
  130. }
  131. }
  132. }
  133. function createAreaLightMaterial( intensity ) {
  134. const material = new MeshBasicMaterial();
  135. material.color.setScalar( intensity );
  136. return material;
  137. }
  138. export { RoomEnvironment };