Przeglądaj źródła

Docs: Implemented scene.environment in material browser

Mr.doob 4 lat temu
rodzic
commit
ec5926a7ce
1 zmienionych plików z 23 dodań i 5 usunięć
  1. 23 5
      docs/scenes/material-browser.html

+ 23 - 5
docs/scenes/material-browser.html

@@ -29,6 +29,7 @@
 
 			import * as THREE from '../../build/three.module.js';
 			import * as DAT from '../../examples/jsm/libs/dat.gui.module.js';
+			import { RoomEnvironment } from '../../examples/jsm/environments/RoomEnvironment.js';
 
 			const constants = {
 
@@ -650,6 +651,12 @@
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshStandardMaterial( gui, mesh, material, geometry );
 
+						// only use scene environment
+
+						light1.visible = false;
+						light2.visible = false;
+						light3.visible = false;
+
 						return material;
 
 						break;
@@ -660,6 +667,12 @@
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshPhysicalMaterial( gui, mesh, material, geometry );
 
+						// only use scene environment
+
+						light1.visible = false;
+						light2.visible = false;
+						light3.visible = false;
+
 						return material;
 
 						break;
@@ -704,17 +717,22 @@
 
 			const gui = new DAT.GUI();
 
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.outputEncoding = THREE.sRGBEncoding;
+			document.body.appendChild( renderer.domElement );
+
+			const environment = new RoomEnvironment();
+			const pmremGenerator = new THREE.PMREMGenerator( renderer );
+
 			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0x444444 );
+			scene.environment = pmremGenerator.fromScene( environment ).texture;
 
 			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 			camera.position.z = 30;
 
-			const renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			document.body.appendChild( renderer.domElement );
-
 			const ambientLight = new THREE.AmbientLight( 0x000000 );
 			scene.add( ambientLight );