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 );

results matching ""

    No results matching ""