8.PointLight（点光源）-照射所有方向的光源

最新推荐文章于 2023-03-31 18:13:25 发布
最新推荐文章于 2023-03-31 18:13:25 发布
阅读量1.1k 收藏
点赞数
分类专栏： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24871849/article/details/112461499
版权

Three.js库中的PointLight是一种单点发光，照射所有方向的光源。夜空中的照明弹就是一个很好地点光源例子。下例可以试验一下点光源。

<!DOCTYPE html>

<html>

<head>
    <title>Example 03.02 - point Light</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 20, 20, 20);
        var planeMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff7777});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.castShadow = true;

        // position the cube
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;

        // add the cube to the scene
        scene.add(cube);

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere
        sphere.position.x = 20;
        sphere.position.y = 0;
        sphere.position.z = 2;
        sphere.castShadow = true;

        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -25;
        camera.position.y = 30;
        camera.position.z = 25;
        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // add subtle ambient lighting
        var ambiColor = "#0c0c0c";
        var ambientLight = new THREE.AmbientLight(ambiColor);
        scene.add(ambientLight);

        // add spotlight for the shadows
        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        // scene.add( spotLight );

        var pointColor = "#ccffcc";
        var pointLight = new THREE.PointLight(pointColor);
        pointLight.distance = 100;
        scene.add(pointLight);


        // add a small sphere simulating the pointlight
        var sphereLight = new THREE.SphereGeometry(0.2);
        var sphereLightMaterial = new THREE.MeshBasicMaterial({color: 0xac6c25});
        var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
        sphereLightMesh.castShadow = true;

        sphereLightMesh.position = new THREE.Vector3(3, 0, 3);
        scene.add(sphereLightMesh);


        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function
        var step = 0;

        // used to determine the switch point for the light animation
        var invert = 1;
        var phase = 0;

        var controls = new function () {
            this.rotationSpeed = 0.03;
            this.bouncingSpeed = 0.03;
            this.ambientColor = ambiColor;
            this.pointColor = pointColor;
            this.intensity = 1;
            this.distance = 100;
        };

        var gui = new dat.GUI();
        gui.addColor(controls, 'ambientColor').onChange(function (e) {
            ambientLight.color = new THREE.Color(e);
        });

        gui.addColor(controls, 'pointColor').onChange(function (e) {
            pointLight.color = new THREE.Color(e);
        });

        gui.add(controls, 'intensity', 0, 3).onChange(function (e) {
            pointLight.intensity = e;
        });

        gui.add(controls, 'distance', 0, 100).onChange(function (e) {
            pointLight.distance = e;
        });


        render();

        function render() {
            stats.update();
            // rotate the cube around its axes
            cube.rotation.x += controls.rotationSpeed;
            cube.rotation.y += controls.rotationSpeed;
            cube.rotation.z += controls.rotationSpeed;

            // bounce the sphere up and down
            step += controls.bouncingSpeed;
            sphere.position.x = 20 + ( 10 * (Math.cos(step)));
            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            // move the light simulation
            if (phase > 2 * Math.PI) {
                invert = invert * -1;
                phase -= 2 * Math.PI;
            } else {
                phase += controls.rotationSpeed;
            }
            sphereLightMesh.position.z = +(7 * (Math.sin(phase)));
            sphereLightMesh.position.x = +(14 * (Math.cos(phase)));
            sphereLightMesh.position.y = 5;

            if (invert < 0) {
                var pivot = 14;
                sphereLightMesh.position.x = (invert * (sphereLightMesh.position.x - pivot)) + pivot;
            }

            pointLight.position.copy(sphereLightMesh.position);

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init


</script>
</body>
</html>
sheerhr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java点光源_JavaFX 类 PointLight用法及代码示例
weixin_35953155的博客
02-26 390
PointLight是JavaFX的一部分。 PointLight定义点光源。 PointLight是空间中的固定光源，可全方位辐射光。该类的构造函数是：PointLight()：创建一个新的pointlight实例PointLight(Color c)：创建特定颜色的点光源的新实例常用方法：方法说明getColor()返回灯光的颜色isLightOn()返回指示灯是否点亮setColor(Col...
Three.js - PointLight 光源
ithanmang
07-11 4725
PointLight 点光源，照射所有方向的光源，例如灯泡发出的光，可以投射阴影。 示例浏览地址：http://ithanmang.com/threejshome/pointLight.html 构造函数 PointLight( color : Integer, intensity : Float, distance : Number, decay : Float ) 参数 co...
improveP8-point.rar_八点算法
07-14
这是一段改进的八点算法，用来求基本矩阵的，并且用matlab进行了实现
13-THREE.JS 点光源
weixin_30279751的博客
10-30 115
<!DOCTYPE html> <html> <head> <title>Example 03.02 - point Light</title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script&...
three.js点光源PointLight使用，调整点光源颜色、位置、强度、距离、可见性(vue中使用three.js08)
点燃火柴的博客
09-06 6458
点光源PointLight使用一、点光源介绍二、如何使用点光源1.创建点光源2.点光源的属性2.1颜色-color2.2是否可见-visible2.3强度-intensity2.4距离-distance2.5位置-position三、demo效果四、demo代码 一、点光源介绍 点光源是一种单点发光，照射所有方向的光源，它的发光效果类似于夜空中发射的照明弹，在点光源的照射下，物体的迎光面会亮一些，背光面会暗一些 附：点光源的照射下物体没有产生阴影，是因为点光源会朝所有方向发射光线，这种情况下计算阴影对计算机
Threejs之PointLight
zhanghuaiwei
03-31 189
Threejs之PointLight 【光点围绕物体360°转】
Unity 3D光源-Point Light点光源详解/灯泡、模拟灯光效果教程
weixin_34166472的博客
05-16 392
Unity4大光源之点光源 本文提供全流程，中文翻译。 Chinar 坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） Chinar —— 心分享、心创新！助力快速理解 Unity 提供的 4 大光源之一点光源系统为新手节省宝贵的时间，避免采坑！ Chinar 教程效果：...
图形化开发（五）032-Three.js之光照——PointLight 点光源、SpotLight 聚光灯光源、实现聚光灯阴影、HemisphereLight室外光源
weixin_44867717的博客
09-10 1260
图形化开发（五）032-Three.js之光照——PointLight 点光源、SpotLight 聚光灯光源、实现聚光灯阴影、HemisphereLight室外光源 PointLight 点光源 点光源就是从一个点的位置向四面八方发射出去光，一个简单的例子就是一个裸露的灯泡。 实现一个最普通的点光源很简单： var pointLight = new THREE.PointLight(0xff0000); //创建一个白色的点光源 pointLight.position.set( 50, 50, 50 );
IEEE802.11--definition-virtual-access-point.pdf
10-27
IEEE802.11--definition-virtual-access-point.pdf
El-Gamal-A.--Kim-Y.-H.-Network-Information-Theory_Coding Theory_
09-19
fundamental theorems on point-to-point communication and the Ford–Fulkerson max-flow min-cut theoremfor graphical unicast networks to general networks withmultiple sources and destinations and shared...
点光源模型演示
05-18
点光源模型演示 http://www.cnblogs.com/zengqh/
FFt.rar_DFT幅度谱_K._k-sparse n-point DFT
09-21
对连续的单一频率离散序列 ，即k=8。 按采样频率 采样，截取长度N分别选N =20和N =16，观察其DFT结果的幅度谱。
LearnGL - 13 - PointLight - 点光源
Jave.Lin 的学习笔记
07-28 708
文章目录点光源与方向光比较光衰减距离衰减作用范围衰减对应的 Inspector 面板参数演示光源的切换ShaderReferences LearnGL - 学习笔记目录 前些篇： LearnGL - 11.1 - 实现简单的Gouraud-Phong光照模型 LearnGL - 11.2 - 实现简单的Phong光照模型 LearnGL - 11.3 - 实现简单的Blinn-Phong光照模型 LearnGL - 11.4 - 实现简单的Flat BlinnPhong光照模型 这些演示光照计算中，都是
25 Three.js的点光源THREE.PointLight
现在学习也不晚
08-17 3592
介绍 Three.js库中的THREE.PointLight（点光源）是一种单点发光、照射所有方向的光源。比如夜空中的照明弹。 案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/27.html THREE.PointLight的相关属性 属性 描述 color（颜色） 光源的颜色，详情见上一节 dis...
three.js 03-02 之 PointLight 光源
zhulx_sz 的博客
11-09 1750
前一篇，我们对 AmbientLight 环境光做了一个简单的介绍。本篇我们来介绍 three.js 中的另一种光源 PointLight（点光源）。照例我们先来一个完整示例： 示例 03.02 - 点光源 body { /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式
UE4 蓝图学习 点亮PointLight
_Afra 的博客
06-11 1144
1.创建一个 PointLight,打开关卡蓝图(下面箭头应该是指向打开关卡蓝图的,而不是只想打开蓝图类,标注的时候没注意) 2.右键创建对 PointLight 的引用节点 3.最后蓝图类如下 4.程序运行3秒之后 PointLight延时3秒设置不可见 未运行程序前: 程序运行后: GoodNight! ...
THREE.JS中常用的4种光源
热门推荐
思念
05-08 1万+
总序如果没有光源，就不可能看到任何渲染结果。 AmbientLight: 环境光，基础光源，它的颜色会被加载到整个场景和所有对象的当前颜色上。 PointLight：点光源，朝着所有方向都发射光线 SpotLight ：聚光灯光源：类型台灯，天花板上的吊灯，手电筒等 DirectionalLight：方向光，又称无限光，从这个发出的光源可以看做是平行光. AmbientLight=>影响整个场景的光
我的threejs学习笔记（五）——点光源属性控制
chenqiong1991的博客
03-23 3886
写在前面主要练习了点光源的距离和密度属性。 理解了threejs里颜色使用的原理。代码pointLight.distance=controls.pointlight_distance; pointLight.intensity=controls.pointlight_intensity; distance（距离）控制光源的照射范围；intensity（密度）控制光源的强度。 全文<!D
在pfc6.0软件中，这段代码的具体含义是什么zone create brick size (4,1,11) point 0 ([zhuan_length*1.5],[-zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 1 ([zhuan_length*5.5],[-zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 2 ([zhuan_length*1.5],[zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 3 ([zhuan_length*1.5],[-zhuan_Width*0.5],[zhuan_height*5.5]) zone create brick size (4,1,11) point 0 ([-zhuan_length*5.5],[-zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 1 ([-zhuan_length*1.5],[-zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 2 ([-zhuan_length*5.5],[zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 3 ([-zhuan_length*5.5],[-zhuan_Width*0.5],[zhuan_height*5.5]) zone create brick size (3,1,4) point 0 ([-zhuan_length*1.5],[-zhuan_Width*0.5],[zhuan_height*1.5]) ... point 1 ([zhuan_length*1.5],[-zhuan_Width*0.5],[zhuan_height*1.5]) ... point 2 ([-zhuan_length*1.5],[zhuan_Width*0.5],[zhuan_height*1.5]) ... point 3 ([-zhuan_length*1.5],[-zhuan_Width*0.5],[zhuan_height*5.5]) zone create brick size (3,1,4) point 0 ([-zhuan_length*1.5],[-zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 1 ([zhuan_length*1.5],[-zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 2 ([-zhuan_length*1.5],[zhuan_Width*0.5],[-zhuan_height*5.5]) ... point 3 ([-zhuan_length*1.5],[-zhuan_Width*0.5],[-zhuan_height*1.5]) zone cmodel assign elastic zone property young [emod] poisson 0.25
最新发布
05-23
每个矩形都通过四个点的坐标来定义，每个点的坐标由“zhuan_length”，“zhuan_Width”和“zhuan_height”乘以不同的系数得到。其中，第一个矩形的长为4，宽为1，高为11，其余三个矩形的长为3，宽为1，高为4或者10，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值