nice lighting

src/lights.ts

@@ -0,0 +1,17 @@
+export default [
+  [4.42827719500573, 2.3383999633789063, 1.1507636164086559],
+  [4.510255876229651, 2.3383999633789063, 3.568088771364957],
+  [1.6835173343929615, 2.3383999633789063, 2.8173409609427886],
+  [5.540400154593122, 2.3383999633789063, -1.2569507048617259],
+  [2.880899005651321, 2.3394000244140623, -2.980696805844159],
+  [0.5197995545210481, 2.3383999633789063, 3.646172459807002],
+  [1.5810473894625678, 2.3383999633789063, 0.676107890882202],
+  [4.039337921475265, 4.896799926757813, 3.459559542076683],
+  [4.05167585120388, 4.896799926757813, -0.5567214937905808],
+  [1.4557908803072632, 4.896799926757813, -1.5367988603843845],
+  [1.194149245276682, 4.896799926757813, 4.246483129153977],
+  [4.20973913126828, 7.455200195312501, 3.664533837733608],
+  [4.130966261142522, 7.455200195312501, -0.03333632584746254],
+  [2.281014190462247, 1.959034868179131, -5.89967102735971],
+  [2.2221717214418226, 1.986318364836898, 6.025898899742503],
+] as [number, number, number][];

src/main.ts

@@ -4,8 +4,12 @@ import { OBJLoader } from "three/addons/loaders/OBJLoader";
 import { MTLLoader } from "three/addons/loaders/MTLLoader";
 import { XRButton } from "three/addons/webxr/XRButton";
 import { XRControllerModelFactory } from "three/addons/webxr/XRControllerModelFactory";
-import { PointerLockControls } from "three/examples/jsm/Addons.js";
+import {
+  PointerLockControls,
+  RoomEnvironment,
+} from "three/examples/jsm/Addons.js";
 import { TeleportMarker } from "./TeleportMarker";
+import lightPositions from "./lights";
 
 const initialPosition = new THREE.Vector3(5, 0, 2.5);
 const initialQuaternion = new THREE.Quaternion().setFromAxisAngle(
@@ -392,34 +396,52 @@ class ThreeXRController extends THREE.Object3D {
 async function run() {
   const container = document.createElement("div");
   document.body.appendChild(container);
+
+  const renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.xr.enabled = true;
+
+  const environment = new RoomEnvironment();
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+
   const scene = new THREE.Scene();
-  scene.background = new THREE.Color(0x505050);
+  scene.background = new THREE.Color(0xbbbbbb);
+  scene.environment = pmremGenerator.fromScene(environment).texture;
   const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 20);
   camera.position.copy(initialPosition);
   camera.position.add({ x: 0, y: defaultEyeHeight, z: 0 });
 
   camera.quaternion.copy(initialQuaternion);
 
-  scene.add(new THREE.HemisphereLight(0xa5a5a5, 0x898989, 3));
-
-  const light = new THREE.DirectionalLight(0xffffff, 3);
-  light.position.set(0, 6, 0);
-  scene.add(light);
-
-  const renderer = new THREE.WebGLRenderer({ antialias: true });
-  renderer.setPixelRatio(window.devicePixelRatio);
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  renderer.xr.enabled = true;
+  const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.3);
+  hemiLight.position.set(0, 500, 0);
+  scene.add(hemiLight);
+
+  function createLight(x: number, y: number, z: number) {
+    const light = new THREE.Object3D();
+    light.name = "light";
+    light.position.set(x, y, z);
+    // Lights look like cubes.
+    const lightGeometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
+    const lightMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
+    const lightMesh = new THREE.Mesh(lightGeometry, lightMaterial);
+    lightMesh.castShadow = false;
+    light.add(lightMesh);
+
+    const pointLight = new THREE.PointLight(0xfff1f0, 0.8, 0, 1.5);
+    pointLight.castShadow = true;
+    light.add(pointLight);
+
+    scene.add(light);
+  }
 
-  // const floor = new THREE.Mesh(
-  //   new THREE.PlaneGeometry(100, 100, 2, 2)
-  //     .rotateX(-Math.PI / 2)
-  //     .translate(0, 0.0001, 0),
-  //   new THREE.MeshBasicMaterial({
-  //     color: 0xbcbcbc,
-  //   })
-  // );
-  // scene.add(floor);
+  for (const lightPosition of lightPositions) {
+    createLight(...lightPosition);
+  }
 
   document.addEventListener("keydown", (event) => {
     if (event.key === "p") {
@@ -442,6 +464,7 @@ async function run() {
 
   const house = await loadModel("home/home.obj", "home/home.mtl");
   house.scale.set(0.01, 0.01, 0.01);
+  house.castShadow = true;
   scene.add(house);
 
   renderer.setAnimationLoop(render);
@@ -472,7 +495,41 @@ async function run() {
     );
   });
 
-  function mousedown(_e: MouseEvent) {}
+  function mousedown(_e: MouseEvent) {
+    const rayCaster = new THREE.Raycaster();
+    rayCaster.setFromCamera(new THREE.Vector2(0, 0), camera);
+    rayCaster.ray.origin.copy(camera.position);
+    rayCaster.ray.direction
+      .copy(camera.getWorldDirection(new THREE.Vector3()))
+      .normalize();
+    const intersections = rayCaster.intersectObject(scene, true);
+    if (intersections.length === 0) {
+      return;
+    }
+
+    const intersection = intersections[0];
+
+    if (intersection.object?.parent?.name === "light") {
+      scene.remove(intersection.object.parent);
+      return;
+    }
+    if (!intersection.normal) {
+      return;
+    }
+
+    const position = intersection.point.addScaledVector(
+      intersection.normal,
+      0.1
+    );
+
+    createLight(position.x, position.y, position.z);
+
+    console.log(
+      scene
+        .getObjectsByProperty("name", "light")
+        .map((o) => o.position.toArray())
+    );
+  }
 
   renderer.domElement.addEventListener("click", () => {
     pointerLockControls.lock();