three.js

Why lights do not work properly in Three.js

I began learning Three js and it has been bothering me that some of the lights does not work for me. While following a tutorial on Youtube (https://www.youtube.com/watch?v=XXzqSAt3UIw&list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho&index=2), everything works fine except for the lights that are supposed to illuminate the planets (like in the video at 4:21). When I tested it out, there is not even the faintest light illuminating any planets. enter image description here

I thought maybe is a syntax error so I tried copying and pasting the code from the video's src file (https://github.com/WaelYasmina/solarsystem/blob/main/src/js/scripts.js) and run it but the problem persists. Why is that light dont work properly for? Thanks.

Solution

  • The cause of your problem is the relation of intensity to distance in PointLight. While they were sufficient in older versions, when the guys changed the light unit, from if I good remember R155 to candela, the values ​​you set are too small. See how old the repo is and what version it was written in... You paste the code from the old version, most likely to the newest one, in your test environment. If you want to stay with the values ​​from the repo, change the Three.js version. If you want to have the current version of Three.js, change the PointLight parameters.

    For instance

    const light = new THREE.PointLight( 0xff0000, 200000, 300 );

    You can try, copy my snippet and tweak versions…

    <script type="importmap">
  {
"imports": {
  "three": "https://unpkg.com/three@0.166.0/build/three.module.js",
  "three/addons/": "https://unpkg.com/three@0.166.0/examples/jsm/"
}
  }
</script>

<script type="module">
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 50;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.SphereGeometry(15, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

const light = new THREE.PointLight( 0xff0000, 200000, 300 );
light.position.set( 50, 50, 50 );
scene.add( light );


function animate() {
requestAnimationFrame(animate);

renderer.render(scene, camera);
}
animate();

</script>