three.js光源

首页 > 代码库 > three.js光源

2024-08-18 07:58:00 219人阅读

在Threejs中，光源用Light表示，它是所有光源的基类。它的构造函数是：

THREE.Light ( hex )

它有一个参数hex，接受一个16进制的颜色值。例如要定义一种红色的光源，我们可以这样来定义：

Var redLight = new THREE.Light(0xFF0000);

Three.js内置了多种光源可以直接调用：

AmbientLight（环境光）
AreaLight（区域光）
DirectionalLight（平行光）
HemisphereLight（半球光）
PointLight（点光源）
SpotLight（聚光灯）

<!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="libs/three.js"></script>

    <script>

        //创建场景

        var scene = new THREE.Scene();

        //创建摄影机

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

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

        camera.lookAt(scene.position);

        //创建绿色立方体

        var box = new THREE.Mesh(

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

            new THREE.MeshLambertMaterial({

                color: 0x00ff00

            }));

        box.position.set(10, 20, 10);

        scene.add(box);

        //创建红色地面

        var ground = new THREE.Mesh(

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

            new THREE.MeshLambertMaterial({

                color: 0xff0000,

            }));

        ground.position.set(0, 5, 0);

        ground.receiveShadow = true;

        scene.add(ground);

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

        var renderer = new THREE.WebGLRenderer();

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

        renderer.setClearColor(0x0000ff, 1);

        document.body.appendChild(renderer.domElement);

        

        //渲染画面

        renderer.render(scene, camera);

    </script>

</body>

</html>

技术分享

现在运行页面，我们只能看到蓝色的背景和一块黑色的几何体，因为我们还没有加入灯光，所以一切的物体都是黑色的。立方体和地面的材质均为MeshLambertMaterial（类似纸张，可以均匀反射接收到的光线）。

<!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="libs/three.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>

技术分享

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="libs/three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer;
            function initThree() {
                width = document.getElementById(‘canvas-frame‘).clientWidth;
                height = document.getElementById(‘canvas-frame‘).clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById(‘canvas-frame‘).appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            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() {
            }

            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 = new THREE.Vector3(0,0,0);
                scene.add(mesh);
            }

            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>

技术分享

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="libs/three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer;
            function initThree() {
                width = document.getElementById(‘canvas-frame‘).clientWidth;
                height = document.getElementById(‘canvas-frame‘).clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById(‘canvas-frame‘).appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            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() {
            // A start
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);
            // A end

            }

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

            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>

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="libs/three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer;
            function initThree() {
                width = document.getElementById(‘canvas-frame‘).clientWidth;
                height = document.getElementById(‘canvas-frame‘).clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById(‘canvas-frame‘).appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            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() {
            // A start
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);
            // A end

            }

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

            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>

技术分享

three.js光源

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > three.js光源

three.js光源

看完仍有疑问？有类似问题直接问程序猿