Light光源
Light類別繼承自Object3D類別。
這次我們以球體和點光源作為例子：
會用到的兩個類別：
PointLight(hex, intensity, distance, decay)
SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 500;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var ball =new THREE.Mesh(new THREE.SphereGeometry( 70, 16, 8 ), new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0x111111, shininess: 50 } ));
ball.position.set(0,0,0);
scene.add(ball);
var light1 = new THREE.PointLight( 0xffaa00, 1, 500 );
light1.add( new THREE.Mesh( new THREE.SphereGeometry( 5, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
light1.position.set(70,70,100);
var light2 = new THREE.PointLight( 0x80ff80, 1, 500 );
light2.add( new THREE.Mesh( new THREE.SphereGeometry( 5, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
light2.position.set(-70,-70,100);
scene.add( light1 );
scene.add( light2 );
renderer.render( scene, camera );
</script>
</body>
</html>
建立於點中央，半徑為70的球體：
var ball =new THREE.Mesh(new THREE.SphereGeometry( 70, 16, 8 ), new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0x111111, shininess: 50 } ));
ball.position.set(0,0,0);
scene.add(ball);
建立點光源並用一顆球體標記：
var light1 = new THREE.PointLight( 0xffaa00, 1, 500 );
light1.add( new THREE.Mesh( new THREE.SphereGeometry( 5, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
light1.position.set(70,70,100);
var light2 = new THREE.PointLight( 0x80ff80, 1, 500 );
light2.add( new THREE.Mesh( new THREE.SphereGeometry( 5, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
light2.position.set(-70,-70,100);
scene.add( light1 );
scene.add( light2 );