Spotlight missing target information

[lstoex]

It seems like the spotlight class (and possibly other classes) is lacking threejs's target property. Hence it always points towards the origin, regardless of the assigned transformation.

I'd love to help fixing this, but on first look it seemed like its quite deep within viser's machinery. If you can point me to the right places I'd be happy to put in a PR.

[brentyi]

Hi @lstoex, thanks for catching this!

What do you think about adding a direction: tuple[float, float, float] field? Which would be the direction that the light points in its local frame.

The steps would be:

• Add a new field to SpotLightProps in _messages.py.
• Add an argument to add_light_spot() in _scene_api.py, pass it to the SpotLightProps object.
• Sync the type definitions: python sync_client_server.py --sync-messages.
• Update the "SpotLightMessage" handler in SceneTree.tsx. One possible solution is to create an intermediate component like ViserSpotLight, which can be similar to ViserImage, but contains (i) the spot light and (ii) a dummy object or group that serves as the target.
• We could also add the spot light to the lighting example?

[lstoex]

All things python should be fine, but as I have absolutely zero webdev knowledge, I am struggling with the SpotLightMessage handler. I tried to hack it like

case "SpotLightMessage": {
      return {
        makeObject: (ref, children) => {
          const spotlightRef = React.useRef<THREE.SpotLight>(null);
          const targetRef = React.useRef<THREE.Object3D>(null);

          // Create spotlight with message arguments. Then add a target object
          useEffect(() => {
            if (spotlightRef.current && targetRef.current) {
              const target = targetRef.current;
              // Set the target position in the spotlight's local frame
              const direction = message.props.direction || [0, 0, -1];
              target.position.set(direction[0], direction[1], direction[2]);
              // Add target as child of spotlight
              spotlightRef.current.add(target);
            }
          }, [message.props.direction]);
          return (
              <spotLight
                ref={spotlightRef}
                intensity={message.props.intensity}
                color={(message.props.color[0] << 16) | (message.props.color[1] << 8) | message.props.color[2]}
                distance={message.props.distance}
                angle={message.props.angle}
                penumbra={message.props.penumbra}
                decay={message.props.decay}
                castShadow={message.props.cast_shadow}
                shadow-mapSize-width={1024}
                shadow-mapSize-height={1024}
              >
              <object3D ref={targetRef} />
              {children}
            </spotLight>
          );
        },
      };
    }

but all it gives me is a white rectangle in the origin of the frame. Any idea? I understand that three.js expects the target object to exist in the scene, but I really have no idea how this handler fits in the big picture, which makes things quite hard haha

[brentyi]

Interesting, thanks @lstoex! That looks reasonable from a skim, would you be able to make a PR with what you have so far? And when I have a chance I can try debugging on top of it.