Spaces:
Running
Running
is it ok to add an env map?
Browse files- index.html +30 -19
index.html
CHANGED
|
@@ -430,25 +430,36 @@
|
|
| 430 |
|
| 431 |
// Loader
|
| 432 |
loader = new THREE.GLTFLoader();
|
| 433 |
-
|
| 434 |
-
|
| 435 |
-
|
| 436 |
-
|
| 437 |
-
|
| 438 |
-
|
| 439 |
-
|
| 440 |
-
|
| 441 |
-
|
| 442 |
-
|
| 443 |
-
|
| 444 |
-
|
| 445 |
-
|
| 446 |
-
|
| 447 |
-
|
| 448 |
-
|
| 449 |
-
|
| 450 |
-
|
| 451 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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,
|