Lightsource thinks my objects are in the middle of the screen

Questions
1

So I’m creating something together with my friend ChatGPT :slight_smile:

But we can’t figure out why the lightsource keeps thinking and behaving like my objects are in the middle of the screen.

See the screenshot for the example. You can see the sphere that is a bit lower then the center. We’ve made something so the lightsource is always on my mouse. As you can see I got the light source in the center of the screen, if you look at the sphere the light has to come from above it, but it’s exactly in the middle of it. So the lightsource thinks and behaves like the sphere is in the middle of the scren.

Anybody who please can help me?

image
image1919×908 21 KB

This is my code:

// Basis Three.js setup

// Scene maken
const scene = new THREE.Scene();

// Stel de achtergrondkleur in op transparant
scene.background = null;

// Camera maken (perspective camera)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 7;

// Renderer maken en toevoegen aan de DOM
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Kubus maken met één kleur
const cubeParams = {
size: 1, // Grootte van de kubus
scrollSpeedFactor: -0.005,
rotationSpeed: 0.01,
xPos: -2, // X positie van de kubus
yPos: 0, // Y positie van de kubus
};

// Kubus geometrie en materiaal
const cubeGeometry = new THREE.BoxGeometry(cubeParams.size, cubeParams.size, cubeParams.size);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // Groen
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

// Piramide maken
const pyramidParams = {
size: 1, // Grootte van de piramide
scrollSpeedFactor: -0.003,
rotationSpeed: 0.02,
xPos: 2, // X positie van de piramide
yPos: 0, // Y positie van de piramide
};

// Piramide geometrie en materiaal
const pyramidGeometry = new THREE.TetrahedronGeometry(pyramidParams.size, 0);
const pyramidMaterial = new THREE.MeshStandardMaterial({ color: 0xff6600 }); // Oranje
const pyramid = new THREE.Mesh(pyramidGeometry, pyramidMaterial);
scene.add(pyramid);

// Sphere maken
const sphereParams = {
size: 0.7, // Grootte van de sphere
scrollSpeedFactor: -0.004,
rotationSpeed: 0.015,
xPos: 0, // X positie van de sphere
yPos: 2, // Y positie van de sphere
};

// Sphere geometrie en materiaal
const sphereGeometry = new THREE.SphereGeometry(sphereParams.size, 16, 16);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff }); // Blauw
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

// Functie om objectposities opnieuw in te stellen
function updatePositions() {
cube.position.set(cubeParams.xPos, -cubeParams.yPos, 0); // Negatieve yPos voor kubus
pyramid.position.set(pyramidParams.xPos, -pyramidParams.yPos, 0); // Negatieve yPos voor piramide
sphere.position.set(sphereParams.xPos, -sphereParams.yPos, 0); // Negatieve yPos voor sphere
}

// Startposities instellen
updatePositions();

// Variabele om de scrollpositie te tracken
let scrollY = 0;

// Luister naar het scroll-evenement
window.addEventListener(‘scroll’, () => {
scrollY = window.scrollY;
});

// Directional Light toevoegen
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
scene.add(directionalLight);

// Variabelen voor muispositie
let mouse = { x: 0, y: 0 };

// Luister naar muisbewegingen
window.addEventListener(‘mousemove’, (event) => {
// Normaleer muispositie naar een waarde tussen -1 en 1
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

// Event listener voor venster grootte wijziging
window.addEventListener(‘resize’, () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
updatePositions(); // Bijwerken van de objectposities
});

// Animatielus
function animate() {
requestAnimationFrame(animate);

// Rotatie en positie aanpassen op basis van scrollpositie

// Kubus rotatie en beweging
cube.rotation.x = scrollY * cubeParams.rotationSpeed;
cube.rotation.y = scrollY * cubeParams.rotationSpeed;

// Piramide rotatie en beweging
pyramid.rotation.x = scrollY * pyramidParams.rotationSpeed;
pyramid.rotation.y = scrollY * pyramidParams.rotationSpeed;

// Sphere rotatie en beweging
sphere.rotation.x = scrollY * sphereParams.rotationSpeed;
sphere.rotation.y = scrollY * sphereParams.rotationSpeed;

// Update de positie van de Directional Light naar de muispositie
directionalLight.position.set(mouse.x * 5, mouse.y * 5, 5); // Pas de waarde aan voor betere verlichting

// Render de scene met de camera
renderer.render(scene, camera);

}

// Start de animatie
animate();

2

Right now it’s already dark in the land of bikes, so you’ll likely need to wait until tomorrow to do an experiment. Take any non-metallic spherical object and go outside when it’s sunny - stand in one place and look at the object you’re holding. Then take a single step to the left (or 100 steps if so you desire) without rotating yourself or the object, then take a look at the object again - did the direction of the light change?

See docs for more details. What you’re looking for may be a PointLight or RectAreaLight instead.

3

Love your storytelling! I asked my 1-year-old son if I could borrow a cube, he did not answer. Under the guise of he who is silent is understood to consent, I stepped outside with the cube. I indeed understand what you mean.

Now I tried it with a SpotLight, but unfortunately it still doesn’t work well. The SpotLight behaves as if the objects are in the center of the canvas.

As you can see on the screenshot, my mouse is just a bit under the center of the canvas. And as you can see on the sphere the light is also underneath it. But I want the light to be above is because that is where my mouse is.

image
image934×902 16.2 KB

// Basis Three.js setup

// Scene maken
const scene = new THREE.Scene();

// Stel de achtergrondkleur in op transparant
scene.background = null;

// Camera maken (perspective camera)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 7;

// Renderer maken en toevoegen aan de DOM
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Kubus maken met één kleur
const cubeParams = {
    size: 1, // Grootte van de kubus
    scrollSpeedFactor: -0.005,
    rotationSpeed: 0.01,
    xPos: -2, // X positie van de kubus
    yPos: 0, // Y positie van de kubus
};

// Kubus geometrie en materiaal
const cubeGeometry = new THREE.BoxGeometry(cubeParams.size, cubeParams.size, cubeParams.size);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // Groen
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

// Piramide maken
const pyramidParams = {
    size: 1, // Grootte van de piramide
    scrollSpeedFactor: -0.003,
    rotationSpeed: 0.02,
    xPos: 2, // X positie van de piramide
    yPos: 0, // Y positie van de piramide
};

// Piramide geometrie en materiaal
const pyramidGeometry = new THREE.TetrahedronGeometry(pyramidParams.size, 0);
const pyramidMaterial = new THREE.MeshStandardMaterial({ color: 0xff6600 }); // Oranje
const pyramid = new THREE.Mesh(pyramidGeometry, pyramidMaterial);
scene.add(pyramid);

// Sphere maken
const sphereParams = {
    size: 0.7, // Grootte van de sphere
    scrollSpeedFactor: -0.004,
    rotationSpeed: 0.015,
    xPos: 0, // X positie van de sphere
    yPos: 2, // Y positie van de sphere
};

// Sphere geometrie en materiaal
const sphereGeometry = new THREE.SphereGeometry(sphereParams.size, 16, 16);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff }); // Blauw
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

// Functie om objectposities opnieuw in te stellen
function updatePositions() {
    cube.position.set(cubeParams.xPos, -cubeParams.yPos, 0); // Negatieve yPos voor kubus
    pyramid.position.set(pyramidParams.xPos, -pyramidParams.yPos, 0); // Negatieve yPos voor piramide
    sphere.position.set(sphereParams.xPos, -sphereParams.yPos, 0); // Negatieve yPos voor sphere
}

// Startposities instellen
updatePositions();

// Variabele om de scrollpositie te tracken
let scrollY = 0;

// Luister naar het scroll-evenement
window.addEventListener('scroll', () => {
    scrollY = window.scrollY;
});

// SpotLight toevoegen
const spotLight = new THREE.SpotLight(0xffffff, 1); // Kleur wit en intensiteit van 1
spotLight.angle = Math.PI / 0.2; // Straalhoek van de spot
spotLight.penumbra = 1; // Zachte randen van de spotlight
spotLight.decay = 1; // Hoe snel het licht afneemt met de afstand
spotLight.distance = 200; // Maximale afstand waarop het licht invloed heeft
scene.add(spotLight);

// Variabelen voor muispositie
let mouse = { x: 0, y: 0 };

// Luister naar muisbewegingen
window.addEventListener('mousemove', (event) => {
    // Normaleer muispositie naar een waarde tussen -1 en 1
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

// Event listener voor venster grootte wijziging
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    updatePositions(); // Bijwerken van de objectposities
});

// Animatielus
function animate() {
    requestAnimationFrame(animate);

    // Rotatie en positie aanpassen op basis van scrollpositie

    // Kubus rotatie en beweging
    cube.rotation.x = scrollY * cubeParams.rotationSpeed;
    cube.rotation.y = scrollY * cubeParams.rotationSpeed;
    cube.position.y = -scrollY * cubeParams.scrollSpeedFactor - cubeParams.yPos; // Negatieve yPos hier

    // Piramide rotatie en beweging
    pyramid.rotation.x = scrollY * pyramidParams.rotationSpeed;
    pyramid.rotation.y = scrollY * pyramidParams.rotationSpeed;
    pyramid.position.y = -scrollY * pyramidParams.scrollSpeedFactor - pyramidParams.yPos; // Negatieve yPos hier

    // Sphere rotatie en beweging
    sphere.rotation.x = scrollY * sphereParams.rotationSpeed;
    sphere.rotation.y = scrollY * sphereParams.rotationSpeed;
    sphere.position.y = -scrollY * sphereParams.scrollSpeedFactor - sphereParams.yPos; // Negatieve yPos hier

    // Pas de grootte van de kubus, piramide en sphere aan
    cube.scale.set(cubeParams.size, cubeParams.size, cubeParams.size);
    pyramid.scale.set(pyramidParams.size, pyramidParams.size, pyramidParams.size);
    sphere.scale.set(sphereParams.size, sphereParams.size, sphereParams.size);

    // Update de positie van de SpotLight naar de muispositie
    spotLight.position.set(mouse.x * 100, mouse.y * 100, 3);
    spotLight.target.position.set(0, 0, 0); // Spotlight richt zich op het midden van de scene

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

// Start de animatie
animate();