CODEWITHSUNDEEP
javascriptthree.js
user2518044
user2518044

Reputation:

Three.js - Light doesn't work on texture

I'm trying to make a simple solar system with three.js, I have finished everything, now I want to add some shading, but apparently it doesn't work when working on textures.

loader.load("earth.jpg", function ( texture ) {
    var geometry = new THREE.SphereGeometry( 100, 20, 20 ),
        material = new THREE.MeshLambertMaterial({
            map: texture,
            overdraw: true,
        }),
        mesh     = new THREE.Mesh( geometry, material );

    group.add( mesh );
});

If I replace map: texture with color: 0xffffff it works very well, but when I add a texture, the light shading disappears.

Why lights doesn't works on textures?

Maybe should I create two spheres for every planet? One with a texture and another transparent with shadow?

Upvotes: 1

Views: 1144

Answers (1)

WestLangley
WestLangley

Reputation: 104783

This is a limitation of CanvasRenderer. It does not support MeshLambertMaterial and diffuse textures in combination.

You will have to switch to WebGLRenderer.

three.js r.65

Upvotes: 1

Related Questions