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>

时间: 2023-12-27 22:40:37

three.js光源的相关文章

Three.js的光源投影

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

THREE.JS中常用的4种光源

总序 如果没有光源,就不可能看到任何渲染结果. 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