KBLLR commited on
Commit
ed32d9c
·
verified ·
1 Parent(s): cc04566

is it ok to add an env map?

Browse files
Files changed (1) hide show
  1. index.html +30 -19
index.html CHANGED
@@ -430,25 +430,36 @@
430
 
431
  // Loader
432
  loader = new THREE.GLTFLoader();
433
-
434
- // Add lights
435
- const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
436
- scene.add(ambientLight);
437
-
438
- const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
439
- directionalLight.position.set(10, 20, 15);
440
- directionalLight.castShadow = true;
441
- directionalLight.shadow.mapSize.width = 2048;
442
- directionalLight.shadow.mapSize.height = 2048;
443
- directionalLight.shadow.camera.near = 0.5;
444
- directionalLight.shadow.camera.far = 50;
445
- directionalLight.shadow.camera.left = -20;
446
- directionalLight.shadow.camera.right = 20;
447
- directionalLight.shadow.camera.top = 20;
448
- directionalLight.shadow.camera.bottom = -20;
449
- scene.add(directionalLight);
450
-
451
- // Create ground
 
 
 
 
 
 
 
 
 
 
 
452
  const groundGeometry = new THREE.PlaneGeometry(100, 100);
453
  const groundMaterial = new THREE.MeshStandardMaterial({
454
  color: 0x4ade80,
 
430
 
431
  // Loader
432
  loader = new THREE.GLTFLoader();
433
+ // Add environment map
434
+ const envMapLoader = new THREE.CubeTextureLoader();
435
+ const envMap = envMapLoader.load([
436
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
437
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg',
438
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg',
439
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg',
440
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg',
441
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg'
442
+ ]);
443
+ scene.background = envMap;
444
+ scene.environment = envMap;
445
+
446
+ // Add lights
447
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
448
+ scene.add(ambientLight);
449
+
450
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
451
+ directionalLight.position.set(10, 20, 15);
452
+ directionalLight.castShadow = true;
453
+ directionalLight.shadow.mapSize.width = 2048;
454
+ directionalLight.shadow.mapSize.height = 2048;
455
+ directionalLight.shadow.camera.near = 0.5;
456
+ directionalLight.shadow.camera.far = 50;
457
+ directionalLight.shadow.camera.left = -20;
458
+ directionalLight.shadow.camera.right = 20;
459
+ directionalLight.shadow.camera.top = 20;
460
+ directionalLight.shadow.camera.bottom = -20;
461
+ scene.add(directionalLight);
462
+ // Create ground
463
  const groundGeometry = new THREE.PlaneGeometry(100, 100);
464
  const groundMaterial = new THREE.MeshStandardMaterial({
465
  color: 0x4ade80,