20 - three.js 笔记 - PointLight 光源

PointLight 点光源，照射所有方向的光源，例如灯泡发出的光，可以投射阴影。
示例浏览地址：http://ithanmang.com/threejshome/pointLight.html

构造函数

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

参数

color：光源的颜色
intensity：光源的强度
distance：光的照射距离
decay：光的衰减指数

属性

.decay : Float：光源的衰减指数
.distance : Float：光的照射距离
.isPointLight : Boolean：判断是否是点光源
.power : Float：光照强度，power = intensity * 4π
.shadow : LightShadow：阴影

方法

.copy ( source : PointLight ) : PointLight：把所有的属性复制到光源

效果

这里写图片描述

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点光源</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="../../libs/build/three.js"></script>
    <script src="../../libs/examples/js/loaders/OBJLoader.js"></script>
    <script src="../../libs/examples/js/loaders/MTLLoader.js"></script>

    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
    <script src="../../libs/examples/js/controls/TrackballControls.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>

    <script src="../../libs/extend/THREEx.WindowResize.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"></div>

<script>

    let stats = initStats();

    let scene, camera, renderer, controls, gui;
    let lights = [];
    let clock = new THREE.Clock();

    function initScene() {

        scene = new THREE.Scene();

    }

    function initCamera() {

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(0, 120, 200);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

    function initRenderer() {

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        renderer = new THREE.WebGLRenderer({antialias : true});
        renderer.setClearColor(0x050505);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        document.body.appendChild(renderer.domElement);

    }

    function initLight() {

        let sphere = new THREE.SphereBufferGeometry(1, 16, 8);
        let cube = new THREE.BoxGeometry(2, 2, 2);
        let cone = new THREE.ConeGeometry(2, 4, 20);

        let light1 = new THREE.PointLight(0xFDF5E6, 1, 200);
        light1.add( new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color : 0xFDF5E6})));

        let light2 = new THREE.PointLight(0xFA8072, 1, 200);
        light2.add(new THREE.Mesh(cube, new THREE.MeshBasicMaterial({color : 0xFA8072})));

        let light3 = new THREE.PointLight(0x9B30FF, 1, 200);
        light3.add(new THREE.Mesh(cone, new THREE.MeshBasicMaterial({color : 0x9B30FF})));

        scene.add(light1);
        scene.add(light2);
        scene.add(light3);

        lights.push(light1);
        lights.push(light2);
        lights.push(light3);

    }

    function initContent() {

        let mtlLoader = new THREE.MTLLoader();
        mtlLoader.setPath('../../models/walt/');

        mtlLoader.load('WaltHead.mtl', function (materials) {

           let objLoader = new THREE.OBJLoader();
           objLoader.setMaterials(materials);
           objLoader.setPath('../../models/walt/');

           objLoader.load('WaltHead.obj',function (object) {

               object.name = "loadObject";
               scene.add(object);

           });
        });

    }

    function initControls() {

        controls = new THREE.TrackballControls(camera, renderer.domElement);

    }

    function initStats() {

        let stats = new Stats();

        stats.setMode(0);

        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';

        document.body.appendChild(stats.domElement);

        return stats;

    }

    function init() {

        initScene();
        initCamera();
        initRenderer();
        initLight();
        initContent();
        initControls();

        THREEx.WindowResize(renderer, camera);

    }

    function update() {

        let object = scene.getObjectByName('loadObject');
        if (object) object.rotation.y -= 0.5 * clock.getDelta();

        let time = Date.now() * 0.0005;

        lights[0].position.x = Math.sin( time * 0.7 ) * 30;
        lights[0].position.y = Math.cos( time * 0.5 ) * 40;
        lights[0].position.z = Math.cos( time * 0.3 ) * 30;

        lights[1].position.x = Math.cos( time * 0.3 ) * 30;
        lights[1].position.y = Math.sin( time * 0.5 ) * 40;
        lights[1].position.z = Math.sin( time * 0.7 ) * 30;

        lights[2].position.x = Math.sin( time * 0.7 ) * 30;
        lights[2].position.y = Math.cos( time * 0.3 ) * 40;
        lights[2].position.z = Math.sin( time * 0.5 ) * 30;


        stats.update();
        controls.update();

    }

    function animate() {

        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        update();

    }

    init();
    animate();

</script>

</body>
</html>

20 - three.js 笔记 - PointLight 光源

构造函数

参数

属性

方法

效果

示例代码

猜你喜欢