I hope to make a background with color 0x062058 then add a white spotlight on it, make its left part glowing, then add some geometries so that I will get some proper shadows. But I cannot find a example to handle my material and spotlight in right way, What’s the problems of my code?
UPDATED: Fixed camera and background material and spotlight direction. But Why my spotlight still doing nothing?
https://jsfiddle.net/Boring_Days/c7g6jwor/21/
Well, there are many problems.
OrthographicCamera instantiation is incorrect. You are inverting top and bottom frustum planes, also never added your camera to the scene. scene.add( camera )
.
MeshPhongMaterial requires a light source in order to be rendered correctly. Your spotlight wasn’t turned to the plane in question. You also had emissive
component enabled to full white. That would completely prevent the color from showing correctly.
Scene has a background
property that you can set, in order to apply a fixed color to the scene. That way, you don’t need to create a plane to cover the entire screen.
Examples has a lot of implementation examples that can be used to learn three.js.
Useful Links also contains a lot of free resources for beginners.
if I use scene.background, what about the shadow effect?