Threejs -- light
2018-12-11 本文已影响20人
docC2Y
lights
image.png
1.spotLight
<!DOCTYPE html>
<html>
<head>
<title>THREEJS</title>
<script type="text/javascript" src="../libs/three.js"></script>
<!-- <script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script> -->
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
var renderer, width, height, camera, scene, light, sphere, cube, plane;
function initThree() {
width = window.innerWidth;
height = window.innerHeight;
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize( width, height );
document.getElementById("WebGL-output").appendChild(renderer.domElement);
}
function initScene() {
scene = new THREE.Scene();
}
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.x = 30;
camera.position.y = 40;
camera.position.z = 30;
// camera.lookAt(new THREE.Vector3(0,0,0));
camera.lookAt(scene.position);
scene.add(camera)
var axes = new THREE.AxisHelper(20)
scene.add(axes)
}
function initLight() {
// 使渲染器支持阴影贴图
renderer.shadowMapEnabled= true;
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-25, 15, 30);
spotLight.castShadow = true;
// 灯光的调试帮助框
spotLight.shadowCameraVisible = true;
// 阴影贴图质量
spotLight.shadowMapWidth = spotLight.shadowMapHeight = 1024*4;
scene.add(spotLight);
//设置模型属性
plane.receiveShadow = true;
sphere.castShadow = true;
sphere.receiveShadow = true;
cube.castShadow = true;
cube.receiveShadow = true;
}
function initMesh() {
//添加一个平面模型
var geometry = new THREE.PlaneGeometry( 20, 40 );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
plane.position.x = 10;
plane.position.y = 0;
plane.position.z = 0;
plane.rotation.x = 0.5 * Math.PI;
var geometry = new THREE.SphereGeometry( 3, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xed2321} );
sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
sphere.position.x = 10;
sphere.position.y = 3;
sphere.position.z = -5;
var geometry = new THREE.BoxGeometry( 3, 3, 3 );
var material = new THREE.MeshBasicMaterial( {color: 0xed2321} );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
cube.position.x = 15;
cube.position.y = 3;
cube.position.z = -7;
}
function rotation() {
// cube.rotation.x += 0.1;
// cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(rotation);
}
function init() {
initThree();
initScene();
initCamera();
initMesh();
initLight()
rotation();
}
window.onload = init
</script>
</body>
</html>
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.
直接看效果:
image.png
image.png
image.png
这里有个巨大的坑 进去了好久
ambientLight对材料是有要求的 你会发现图片上的球和方块并没有受到ambientLight的影响， 因为必须要用MeshLambertMaterial （网格朗博材质）/MeshPhongMaterial（网格Phong式材料）
改一下 看看效果：
image.png
都受影响了!
3.pointLight
什么光都没有的情况下：
没有光照
var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
pointLight.position.set( 1, 2, 3 );
scene.add( pointLight );
添加pointLight
var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
pointLight.position.set( 10, 20, 30 );
scene.add( pointLight );
变化点的位置
其他几种光源就不详细介绍了
https://threejs.org/docs/index.html#api/en 去这探索发现吧~
