#Light behaves like the object is in the center

1 messages · Page 1 of 1 (latest)

pastel berry
#

I've got a spotlight in the right top corner and a sphere in the xPos middle and yPos on the top.
My spotlight thinks and behaves like the sphere is in the center as you can see on where the light hits the sphere.

image.png
#

This is my code:

// Import Three.js vanuit de module via unpkg CDN
import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';

// Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // Schaduw inschakelen
document.getElementById('container').appendChild(renderer.domElement);

// Geometry, Material, Mesh (Sphere)
const geometry = new THREE.SphereGeometry(0.5, 32, 32); // Maak een sphere met een straal van 0.5
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // Gebruik een materiaal dat licht ondersteunt
const sphere = new THREE.Mesh(geometry, material);
sphere.castShadow = true; // Sta toe dat de sphere schaduwen werpt
sphere.receiveShadow = true; // Sta toe dat de sphere schaduwen ontvangt
sphere.position.y = 3; // Verplaats de sphere omhoog
scene.add(sphere);

// Position the camera
camera.position.z = 5;

// Add Spotlight
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(5, 5, 5); // Positie rechtsboven
spotLight.angle = Math.PI / 4; // Lichtstraalhoek
spotLight.penumbra = 0.2; // Zachte rand aan de lichtstraal
spotLight.castShadow = true; // Schaduwen genereren
scene.add(spotLight);

// Optional: Add a spotlight target
spotLight.target = sphere; // Zorg dat het licht op de sphere gericht is

// Add Ambient Light to brighten the scene
const ambientLight = new THREE.AmbientLight(0x404040); // Zacht omgevingslicht
scene.add(ambientLight);

#

// Animation loop
function animate() {
requestAnimationFrame(animate);

// Rotate the sphere
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;

// Render the scene
renderer.render(scene, camera);
}

// Handle window resize
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});

animate();

bitter cosmos
#

You probably dont want to add your sphere as the target of your spotlight

last oyster
#

light.target = sphere maybe..

pastel berry
pastel berry
pastel berry
bitter cosmos
#

What is your expected behavior here?

#

spotlights/directional lights have a target which by default is [0,0,0]

#

in your codepen, you're also moving the directional light rather than the spotlight

#

I would also suggest requesting the animationframe at the end so everything is initialized correctly

fading thistle
pastel berry
#

I want a light that is on my mouse, and when I move the mouse the light also moves, so you see a dynamic light shining on the object.

But currently it behaves like the sphere is in the middle of the screen.

fading thistle
#

Mouse movement is on 2D screen, just can return x, y
And Light's position is in 3D world, just return x, y and also z.
So you need your idea how to convert mouse movement to movement of light in 3D.

bitter cosmos
#

You will most likely have to create an empty Object3D and either attach it to your spotlight so your spotlight always points in the same direction or place the spotlight at camera position and move the empty object with your mouse