【three.js学习笔记】光

最新推荐文章于 2024-04-19 15:46:38 发布

weixin_34235135

最新推荐文章于 2024-04-19 15:46:38 发布

阅读量129

点赞数

原文链接：https://segmentfault.com/a/1190000014399229

版权

Lightapi

光源的基类。

Light( color, intensity )

color 光源颜色的RGB数值
intensity 光源强度的数值。

看到的颜色

使用反光材料的物体，看到的颜色是由光的颜色和物体本身的颜色所决定（物理光）。

绿色光照在红色物体上，看到为黑色。
显示真正颜色使用白色光：0xffffff;

AmbientLight（环境光）

环境光是一种无处不在的光，就好像现实世界中的空气。环境光的光线来自任何方向，因此，当你仅为场景指定环境光时，所有的物体无论向量如何，都将表现为同样的明暗程度。

环境光的位置对呈现的效果无任何效果

环境光的构造函数THREE.AmbientLight只有一个参数——16进制的颜色值。

AmbientLight( hex )

var light = new THREE.AmbientLight(0xff0000);

scene.add( light );

给场景添加红色的环境光后，立方体和地面都显示为红色：

AreaLight（区域光）

DirectionalLight（平行光）

平行光是一组具有方向的没有衰减的平行光线，它类似太阳光：虽然遥远但打在物体上的光都来自同一个方向。

环境光的构造函数THREE.DirectionalLight有两个参数——16进制的颜色值和光线的强度（默认为1）。

DirectionalLight(hex, intensity)

var light = new THREE.DirectionalLight(0xffffff, 0.5);

light.position.set(100, 150, 50);

scene.add(light);

HemisphereLight（半球光）

PointLight（点光源）

点光源的光线来自同一点，并向外发射。就好像蜡烛发出的光和萤火虫发出的光。

点光源的构造函数THREE. PointLight有三个参数，比平行光多了一个距离参数，光会从光源经过distance的距离一路衰减为0。

PointLight(hex, intensity, distance)

var light = new THREE.PointLight(0xffffff, 1, 300);

light.position.set(50, 50, 50);

scene.add(light);

SpotLight（聚光灯）

投影

Three.js的光源默认不会导致物体间的投影，打开投影需要执行以下几步：

打开渲染器的地图阴影: renderer.shadowMapEnabled = true;
启用光线的投影：light.castShadow = true;
把模型设置为生成投影：mesh.castShadow = true;
把模型设置为接收阴影：mesh.receiveShadow= true;

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>我的第一个WebGL程序</title>

    <style>body { margin: 0; overflow: hidden; }; canvas { width: 100%;  height: 100%; }</style>

</head>

<body>

    <script src="three.min.js"></script>

    <script>

        //创建场景

        var scene = new THREE.Scene();

        //创建摄影机

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);

        camera.position.set(300, 300, 300);

        //创建绿色立方体

        var box = new THREE.Mesh(

            new THREE.CubeGeometry(5, 5, 40),

            new THREE.MeshLambertMaterial({

                color: 0x00ff00

            }));

        box.position.set(0, 15, 0);

        box.castShadow = true;

        scene.add(box);

        //创建红色地面

        var ground = new THREE.Mesh(

            new THREE.CubeGeometry(200, 1, 200),

            new THREE.MeshLambertMaterial({

                color: 0xff0000,

            }));

        ground.receiveShadow = true;

        scene.add(ground);

        //创建渲染器并把设置背景为蓝色

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.setClearColor(0x0000ff);

        renderer.shadowMapEnabled = true;

        document.body.appendChild(renderer.domElement);

        //添加聚光灯

        var light = new THREE.SpotLight( 0xffffff, 3 );

        light.position.set( 100, 200, 50 );

        light.castShadow = true;        

        light.shadowCameraNear = 50;

        light.shadowCameraFar = 300;

        light.shadowCameraFov = 30;

        

        scene.add( light );

        //渲染画面

        var render = function() {

            requestAnimationFrame(render);

            

            box.rotation.y += 0.01;

            ground.rotation.y += 0.01;

            

            camera.lookAt(scene.position);

            renderer.render(scene, camera);

        };

        render();

    </script>

</body>

</html>

weixin_34235135

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫