欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

20 - three.js 笔记 - PointLight 光源

程序员文章站 2022-05-23 13:26:17
...

PointLight 点光源,照射所有方向的光源,例如灯泡发出的光,可以投射阴影。
示例浏览地址:http://ithanmang.com/threeJs/home/201807/20180711/01-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:把所有的属性复制到光源

效果

20 - three.js 笔记 - 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>