Fixing Object-Specific URL Opening in Three.js

I can see the issue in your code. The problem is in how you're handling the intersections and trying to open different URLs based on which object was clicked. Let me explain the issues and provide a solution:

Issues in Your Current Code

1. You're calling window.open() for all three URLs regardless of which object was clicked
2. The syntax window.open('url') (intersectObjects(cube1)) is incorrect
3. You're referencing cube1, cube2, and cube3 which aren't defined in your code
4. You need to identify which specific object was clicked from the intersections array

Solution

Here's how to fix your code to open different URLs based on which object is clicked:

JAVASCRIPTCopied
const loader = new GLTFLoader().setPath('public/foldery/');
loader.load('folder 3d.gltf', (gltf) => {
  const mesh = gltf.scene;

  // Store references to your objects
  let objectsMap = {};

  // Traverse and name your objects for identification
  mesh.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
      
      // Store the object reference by its name
      objectsMap[child.name] = child;
      
      // You can also set a custom property to store the URL
      // This assumes your objects have names in the GLTF file
      if (child.name === "cube1" || child.name.includes("cube1")) {
        child.userData.url = "https://www.amazon.com";
      } else if (child.name === "cube2" || child.name.includes("cube2")) {
        child.userData.url = "https://www.google.com";
      } else if (child.name === "cube3" || child.name.includes("cube3")) {
        child.userData.url = "https://www.facebook.com";
      }
    }
  });

  mesh.position.set(0, 1.35, 0);
  scene.add(mesh);

  const raycaster = new THREE.Raycaster();
  
  document.addEventListener('mousedown', onMouseDown);
  
  function onMouseDown(event) {
    const coords = new THREE.Vector2(
      (event.clientX / renderer.domElement.clientWidth) * 2 - 1,
      -((event.clientY / renderer.domElement.clientHeight) * 2 - 1),
    );
    
    raycaster.setFromCamera(coords, camera);
    
    var intersections = raycaster.intersectObjects(scene.children, true);
    
    if (intersections.length > 0) {
      // Get the first intersected object
      const object = intersections[0].object;
      
      // Check if the object has a URL in userData
      if (object.userData.url) {
        window.open(object.userData.url);
      } else {
        console.log("Clicked on object:", object.name);
      }
    }
  }
});

Alternative Approach Using Object Names

If your objects have specific names in the GLTF file, you can use those names directly:

JAVASCRIPTCopied
function onMouseDown(event) {
  // ... raycaster setup code ...
  
  var intersections = raycaster.intersectObjects(scene.children, true);
  
  if (intersections.length > 0) {
    const object = intersections[0].object;
    
    // Check object name and open appropriate URL
    if (object.name === "cube1" || object.name.includes("cube1")) {
      window.open("https://www.amazon.com");
    } else if (object.name === "cube2" || object.name.includes("cube2")) {
      window.open("https://www.google.com");
    } else if (object.name === "cube3" || object.name.includes("cube3")) {
      window.open("https://www.facebook.com");
    }
  }
}

Debugging Tips

1. To see the names of your objects, add this to your traverse function:

   JAVASCRIPTCopied
   mesh.traverse((child) => {
     if (child.isMesh) {
       console.log("Mesh name:", child.name);
       // rest of your code
     }
   });

2. To see which object was clicked, add this to your intersection handler:

   JAVASCRIPTCopied
   if (intersections.length > 0) {
     console.log("Clicked on:", intersections[0].object.name);
     // rest of your code
   }

This should help you correctly identify which object was clicked and open the appropriate URL.

Achieving Watch Lighting Effects in Three.js

Based on the reference images you've shared, the impressive lighting effects on these watches are likely achieved through a combination of techniques. While I can't see the exact images you've referenced (as I can't process the images directly), I can provide guidance on how to achieve high-quality watch rendering in Three.js.

Recommended Approach

To create realistic watch lighting similar to professional product photography, you would typically use:

1. HDRI Environment Maps - For realistic reflections and ambient lighting
2. Strategic Light Placement - Using multiple light sources
3. PBR Materials - For physically accurate material rendering

Implementation in Three.js

1. Environment Mapping

JAVASCRIPTCopied
// Load an HDR environment map
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

new THREE.RGBELoader()
  .setDataType(THREE.UnsignedByteType)
  .load('path/to/studio_hdri.hdr', function(texture) {
    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
    scene.environment = envMap;
    
    texture.dispose();
    pmremGenerator.dispose();
  });

2. Strategic Lighting Setup

JAVASCRIPTCopied
// Main key light (simulates main studio light)
const keyLight = new THREE.DirectionalLight(0xffffff, 1.0);
keyLight.position.set(1, 1, 2);
scene.add(keyLight);

// Fill light (reduces harsh shadows)
const fillLight = new THREE.DirectionalLight(0xffffff, 0.3);
fillLight.position.set(-1, 0.5, 1);
scene.add(fillLight);

// Rim light (highlights edges)
const rimLight = new THREE.DirectionalLight(0xffffff, 0.6);
rimLight.position.set(0, 0, -2);
scene.add(rimLight);

// Optional soft ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);

3. PBR Materials for Watch Components

JAVASCRIPTCopied
// For metallic parts (case, bracelet)
const metalMaterial = new THREE.MeshStandardMaterial({
  color: 0x888888,
  metalness: 0.9,
  roughness: 0.1,
  envMapIntensity: 1.0
});

// For glass/crystal
const glassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transmission: 1.0, // Transparent
  thickness: 0.5,    // Glass thickness
  envMapIntensity: 0.8,
  clearcoat: 1.0,
  clearcoatRoughness: 0.1
});

// For watch face
const faceMaterial = new THREE.MeshStandardMaterial({
  color: 0x111111,
  metalness: 0.1,
  roughness: 0.8,
  envMapIntensity: 0.3
});

Advanced Techniques

For even more realism, you might consider:

• Using RectAreaLight for studio-like soft box lighting effects
• Adding SpotLight with shadows for dramatic highlights
• Implementing post-processing effects like subtle bloom for the metallic highlights
• Creating custom shaders for specific effects like anisotropic reflections on brushed metal

The combination of proper environment mapping, strategic light placement, and physically accurate materials will get you very close to the professional product rendering look you're aiming for.