Threejs -- light

Threejs -- light_第1张图片
lights
Threejs -- light_第2张图片
image.png

1.spotLight






    THREEJS
    

    
    



Threejs -- light_第3张图片
image.png

2 .AmbientLight
This light globally illuminates all objects in the scene equally.
This light cannot be used to cast shadows as it does not have a direction.
直接看效果:


Threejs -- light_第4张图片
image.png

Threejs -- light_第5张图片
image.png

Threejs -- light_第6张图片
image.png

这里有个巨大的坑 进去了好久
ambientLight对材料是有要求的 你会发现图片上的球和方块并没有受到ambientLight的影响, 因为必须要用MeshLambertMaterial (网格朗博材质)/MeshPhongMaterial(网格Phong式材料)
改一下 看看效果:


Threejs -- light_第7张图片
image.png

都受影响了!

3.pointLight
什么光都没有的情况下:


Threejs -- light_第8张图片
没有光照
var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
pointLight.position.set( 1, 2, 3 );
scene.add( pointLight );
Threejs -- light_第9张图片
添加pointLight
var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
pointLight.position.set( 10, 20, 30 );
scene.add( pointLight );
Threejs -- light_第10张图片
变化点的位置

其他几种光源就不详细介绍了
https://threejs.org/docs/index.html#api/en 去这探索发现吧~

你可能感兴趣的:(Threejs -- light)