three.js光源

在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>

时间： 2024-10-19 09:24:23

three.js光源的相关文章

Three.js的光源投影

Three.js的光源默认不会导致物体间的投影,打开投影需要执行以下几步: 打开渲染器的地图阴影: renderer.shadowMapEnabled = true; 启用光线的投影:light.castShadow = true; 把模型设置为生成投影:mesh.castShadow = true; 把模型设置为接收阴影:mesh.receiveShadow= true;

总序如果没有光源,就不可能看到任何渲染结果. AmbientLight: 环境光,基础光源,它的颜色会被加载到整个场景和所有对象的当前颜色上. PointLight:点光源,朝着所有方向都发射光线 SpotLight :聚光灯光源:类型台灯,天花板上的吊灯,手电筒等 DirectionalLight:方向光,又称无限光,从这个发出的光源可以看做是平行光. AmbientLight=>影响整个场景的光源注意点: 影响整个场景没有特定的来源不会影响阴影的生成不能作为场景中唯一的光源,否则如

使用three.js创建3D机房模型-分享一

序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的评论区终于找到了那位前辈的源码,可惜下载后发现是压缩过的.min.js文件.经过各种研究发现,那是人家公司自己卖钱的库,不能完全共享,所以我司决定,派本人研究一下web3D的技术,于是乎便有了下面的技术分享. 一.本着开源的思想,使用three.js框架,封装常用的模型库.先学着那位前辈的样子,使用

使用Three.js的材质

1.three.js提供哪些材质? MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框 MeshDepthMaterial(网格深度材质)/根据网格到相机的举例,这种材质决定如何给网格染色 MeshNormalMaterial(网格法向材质)/这是一种简单的材质,根据物体表面的方向向量计算颜色 MeshFaceMaterial(网格面材质)/这是一个容器,可以在这个容器里为物体的各个表面指定不同的颜色 MeshLambertMa

Three.js开发指南---使用three.js的材质（第四章）

材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等一材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基类拥有three.js所有材质的公有属性,分为三类:基础属性,融合属性,高级属性基础属性:ID,name,透明度,是否可见,是否需要刷新等融合属性:决定了物体如何与背景融合高级属性:可以控制WEBGL上下文渲染物体的方法,大多数情况下,是不会用这些属性,我们这里不再讨论 1.1 基础属性属性

使用Three.js里的各种光源

1.three.js库提供的光源 three.js库提供了一些列光源,而且没种光源都有特定的行为和用途.这些光源包括: 光源名称/描述 AmbientLight(环境光)/这是一种基础光源,它的颜色会添加到整个场景和所有对象的当前颜色上 PointLight(点光源)/空间中的一点,朝所有的方向发射光线 SpotLight(聚光灯光源)/这种光源有聚光的效果,类似台灯.天花板上的吊灯,或者手电筒 DirectionLight(方向光)/也称为无限光.从这种光源发出的光线可以看着平行的.例如,太阳

Three.js开发指南---创建，加载高级网格和几何体（第八章）

本章的主要内容: 一, 通过Three.js自带的功能来组合和合并已有的几何体,创建出新的几何体二, 从外部资源中加载网格和几何体 1 前面的章节中,我们学习到,一个几何体创建的网格,想使用多个材质的方法: var mesh=THREE.SceneUtils.createMultiMaterialObject(geometry,[material1,,material2]); 看似一个网格中有一个几何体,多个材质,其实该网格拥有与材质数量相对应的几何体,每个几何体都对应一种材质,形成一个网格,

分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探

什么是Three.js three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精采的演示.不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面. 上面摘自百度百科.依我来看就是一个在HTML5画布(ca