three.js学习笔记（一）-DirectionalLight

最新推荐文章于 2024-06-21 12:47:59 发布

JingleLee123

最新推荐文章于 2024-06-21 12:47:59 发布

阅读量4.8k

点赞数

分类专栏： three.js 文章标签： html5 javascript three-js

本文链接：https://blog.csdn.net/qq_38195197/article/details/78234171

版权

three.js 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

DirectinalLight-方向光源，可以看做是距离很远的光源。这个光源发出的所有光线都是互相平行的，如太阳光。被方向光光源照亮的整个区域接收到的光强是一样的。方向由位置和原点（0,0,0）来决定，方向光只与方向有关，与离物体的远近无关。

THREE.DirectionalLight = function ( hex, intensity ) { 
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 1, 0 );
this.target = new THREE.Object3D();
this.intensity = ( intensity !== undefined ) ? intensity : 1;
this.castShadow = false;
this.onlyShadow = false;
// more settings about shadow ......
};

hex: 光的颜色。
position：一个位置，以该位置为起点，原点为终点的方向是光线的方向。
intensity：光线的密度，默认为1。因为RGB的三个值均在0~255之间，不能反映出光照的强度变化，光照越强，物体表面就更明亮。
distance：衰减距离，默认值为0，光照无衰减；如果是非0值，光照会从position位置（实际上是position所处的那个平面）开始衰减，衰减到distance距离之后，光照强度intensity为0。
castShadow：布尔值，控制是否产生阴影，默认为false。如果设为true，对于所有表面都会逐像元地计算其在光照方向上是否被遮挡，这会消耗大量的计算。
onlyShadow：布尔值，控制是否只产生阴影而不“照亮”物体，默认为false。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ThreeDirectionalLight</title>
    <script src="js/three.js"></script>
    <style type="text/css">
        div#canvas-frame {
            position:absolute;
            top:10px;
            bottom:10px;
            right:10px;
            left:10px;
            border: 5px solid blue;
            course:pointer;
            background-color: #008855;
            border-radius: 20px;
        }

    </style>
    <script>
        var renderer;
        function initThree() {
            width = document.getElementById('canvasframe').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias : true
            });//生成渲染对象（属性：抗锯齿效果为设置有效）
            renderer.setSize(width, height);//指定渲染器的宽高（和画布框大小一致）
            document.getElementById('canvas-frame').appendChild(renderer.domElement);//将创建的canvas元素(此处的canvas元素为three.js创建)添加到html文档中
            renderer.setClearColor(0xFFFFFF, 0.9);//设置渲染器的清除色和背景透明度
        }

        //此处为设置透视投影的相机，默认情况下，相机的上方向为Y轴，右方向为X轴，沿着Z轴垂直朝里(视眼角:fov;纵横比:aspect；相机离视最近的距离:near;相机离视体积最远距离:far)
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            //设置相机的位置坐标
            camera.position.x = 600;
            camera.position.y = 0;
            camera.position.z = 600;
            //设置相机的上为轴方向
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;
            //设置视野的中心坐标
            camera.lookAt({
                x : 0,
                y : 0,
                z : 0
            });
        }

        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }

        var light;
        function initLight() {
            //第一个参数 Hex:光的颜色 第二个参数 Intensity：光源的强度，默认是1.0，如果为0.5，则强度是一半，意思是颜色会淡一些
            //第三个参数 Distance：光线的强度，从最大值衰减到0，需要的距离。 默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离Distance时，光源强度为0.
            light = new THREE.DirectionalLight(0xFF0000,1, 0);
            // 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不一样
            light.position.set(0,0,1);//光源的向量，即光源的位置
            scene.add(light);//追加光源到场景
        }

        //var cube;
        function initObject() {
            var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
            var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
            var mesh = new THREE.Mesh( geometry,material);
            mesh.position.set(0,0,0);
            scene.add(mesh);

            var geometry2 = new THREE.CubeGeometry( 200, 100, 50,4,4);
            var material2 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
            var mesh2 = new THREE.Mesh( geometry2,material2);
            mesh2.position.set(-300,0,0);
            scene.add(mesh2);

            var geometry3 = new THREE.CubeGeometry( 200, 100, 50,4,4);
            var material3 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
            var mesh3 = new THREE.Mesh( geometry3,material3);
            mesh3.position.set(0,-150,0);
            scene.add(mesh3);

            var mesh4 = new THREE.Mesh( geometry3,material3);
            mesh4.position.set(0,150,0);
            scene.add(mesh4);

            var mesh5 = new THREE.Mesh( geometry3,material3);
            mesh5.position.set(300,0,0);
            scene.add(mesh5);

            var mesh6 = new THREE.Mesh( geometry3,material3);
            mesh6.position.set(0,0,-100);
            scene.add(mesh6);

        }

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene, camera);
        }

    </script>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

运行效果如图：

JingleLee123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
three.js学习笔记（一）-DirectionalLight

DirectinalLight-方向光源，可以看做是距离很远的光源。这个光源发出的所有光线都是互相平行的，如太阳光。被方向光光源照亮的整个区域接收到的光强是一样的。方向由位置和原点（0,0,0）来决定，方向光只与方向有关，与离物体的远近无关。 *THREE.DirectionalLight = function ( hex, intensity ) { THREE.Light.call( th
复制链接

扫一扫

专栏目录