25 Three.js的点光源THREE.PointLight

最新推荐文章于 2024-03-31 19:12:48 发布
最新推荐文章于 2024-03-31 19:12:48 发布
阅读量3.6k 收藏 2
点赞数
分类专栏： Three.js笔记 文章标签： Three-js 点光源 属性 webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/77282369
版权

介绍

Three.js库中的THREE.PointLight（点光源）是一种单点发光、照射所有方向的光源。比如夜空中的照明弹。

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/27.html

THREE.PointLight的相关属性

属性描述
color（颜色）光源的颜色，详情见上一节
distance（距离）光源照射的距离。默认值为0，意味着光的强度不会随着距离增加而减少。如果填写别的，则将在当前位置慢慢减少为0为止
intensity（强度）光源照射的强度，默认值为1。如果设置为2，则是默认两倍强度。0为没有光。
position（位置）光源在场景中的位置
visible（是否可见）如果该属性设置为”true”（默认值），该光源就会打开，如果设置为”false”，光源就会关闭。

案例

这里写图片描述

详情代码，上面的属性大家自行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
        }

    </style>
</head>
<body onload="draw();">

</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script>
<script>
    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        //告诉渲染器需要阴影效果
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
        document.body.appendChild(renderer.domElement);
    }

    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 100);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

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

    //初始化dat.GUI简化试验流程
    var gui;
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {
            ambientLight:"#111111", //环境光源
            pointLight:"#ffffff", //点光源
            lightY: 30, //灯光y轴的位置
            distance:0, //点光源距离
            intensity:1, //灯光强度
            visible:true //是否可见
        };
        var datGui = new dat.GUI();
        //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
        datGui.addColor(gui,"ambientLight").onChange(function (e) {
            ambientLight.color = new THREE.Color(e);
        });
        datGui.addColor(gui,"pointLight").onChange(function (e) {
            pointLight.color = new THREE.Color(e);
        });
        datGui.add(gui, "lightY", 0, 100);
        datGui.add(gui,"distance",0,100).onChange(function (e) {
            pointLight.distance = e;
        });
        datGui.add(gui,"intensity",0,5).onChange(function (e) {
            pointLight.intensity = e;
        });
        datGui.add(gui,"visible").onChange(function (e) {
            pointLight.visible = e;
        });
    }

    var ambientLight,pointLight;
    function initLight() {
        ambientLight = new THREE.AmbientLight("#111111");
        scene.add(ambientLight);

        pointLight = new THREE.PointLight("#ffffff");
        pointLight.position.set(15, 30, 10);

        //告诉平行光需要开启阴影投射
        pointLight.castShadow = true;

        scene.add(pointLight);
    }

    var cube;
    function initModel() {

        //辅助工具
        var helper = new THREE.AxisHelper(10);
        scene.add(helper);

        // 创建一个立方体
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3

        //立方体
        var cubeGeometry = new THREE.CubeGeometry(10,10,10);

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = 5;
        cube.position.y = 5;
        cube.position.z = -5;

        //告诉立方体需要投射阴影
        cube.castShadow = true;

        scene.add(cube);

        //底部平面
        var planeGeometry = new THREE.PlaneGeometry(100, 100);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa});

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.y = -0;

        //告诉底部平面需要接收阴影
        plane.receiveShadow = true;

        scene.add(plane);

    }

    //初始化性能插件
    var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
    var controls;
    function initControls() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        // 如果使用animate方法时，将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = false;
        //设置相机距离原点的最远距离
        controls.minDistance = 50;
        //设置相机距离原点的最远距离
        controls.maxDistance = 200;
        //是否开启右键拖拽
        controls.enablePan = true;
    }

    function render() {
        renderer.render(scene, camera);
    }

    //窗口变动触发的函数
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {
        //更新控制器
        render();

        //更新性能插件
        stats.update();

        //更新相关位置
        pointLight.position.y = gui.lightY;

        controls.update();

        requestAnimationFrame(animate);
    }

    function draw() {
        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }
</script>
</html>
暮志未晚NAN
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js - 光源使用详解1（环境光 AmbientLight、点光源 PointLint）
hz_love_AI的博客
10-15 2915
Three.js 中有许多不同种类的光源，每种光源都有特别的行为和用法。下面通过一个系列文章介绍它们的用法。
three.js点光源PointLight使用，调整点光源颜色、位置、强度、距离、可见性(vue中使用three.js08)
点燃火柴的博客
09-06 7147
点光源PointLight使用一、点光源介绍二、如何使用点光源1.创建点光源2.点光源的属性2.1颜色-color2.2是否可见-visible2.3强度-intensity2.4距离-distance2.5位置-position三、demo效果四、demo代码 一、点光源介绍 点光源是一种单点发光，照射所有方向的光源，它的发光效果类似于夜空中发射的照明弹，在点光源的照射下，物体的迎光面会亮一些，背光面会暗一些 附：点光源的照射下物体没有产生阴影，是因为点光源会朝所有方向发射光线，这种情况下计算阴影对计算机
three.js 03-02 之 PointLight 光源
zhulx_sz 的博客
11-09 1768
前一篇，我们对 AmbientLight 环境光做了一个简单的介绍。本篇我们来介绍 three.js 中的另一种光源 PointLight（点光源）。照例我们先来一个完整示例： 示例 03.02 - 点光源 body { /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式
Threejs之PointLight
zhanghuaiwei
03-31 204
Threejs之PointLight 【光点围绕物体360°转】
three.js从入门到精通系列教程034 - 创建PointLight光源和辅助线
深南大道
01-21 405
【代码】three.js从入门到精通系列教程034 - 创建PointLight光源和辅助线。
three.min.js 最全的版本
11-01
光照是3D渲染中的关键因素，Three.js提供了多种光照类型，如`THREE.AmbientLight`（环境光）、`THREE.DirectionalLight`（平行光）、`THREE.PointLight`（点光源）等，它们可以模拟不同的照明条件，使3D场景更加逼真...
three. js的人体解剖图.zip
07-14
Three.js支持各种光源，如AmbientLight（环境光）、DirectionalLight（平行光）和PointLight（点光源）。阴影的设置也很关键，可以增强模型的立体感。通过启用阴影和调整阴影参数，可以实现更逼真的效果。 五、交互...
three.js的室内地图展示
05-21
three.js提供了各种类型的灯光，如DirectionalLight（平行光）、PointLight（点光源）和AmbientLight（环境光），可以根据需要组合使用，营造出真实的光照效果。 7. **交互性**：为了让用户能够与地图互动，如点击...
使用 Three.js 的 3D 艺术博物馆.zip
07-14
有各种类型的光源，如DirectionalLight（平行光）、PointLight（点光源）和SpotLight（聚光灯）。 **Three.js在3D艺术博物馆的应用** 1. **3D模型加载**：在艺术博物馆中，可能需要导入艺术家的作品模型。Three.js...
three.js 智慧城市模型
07-06
例如，`new THREE.PointLight( color, intensity, distance )` 创建一个点光源。 四、加载器（Loaders） 1. 对于复杂的智慧城市模型，通常需要加载外部的 3D 模型文件，如 OBJ、GLTF 等格式。Three.js 提供了多种...
图形化开发（五）032-Three.js之光照——PointLight 点光源、SpotLight 聚光灯光源、实现聚光灯阴影、HemisphereLight室外光源
weixin_44867717的博客
09-10 1345
图形化开发（五）032-Three.js之光照——PointLight 点光源、SpotLight 聚光灯光源、实现聚光灯阴影、HemisphereLight室外光源 PointLight 点光源 点光源就是从一个点的位置向四面八方发射出去光，一个简单的例子就是一个裸露的灯泡。 实现一个最普通的点光源很简单： var pointLight = new THREE.PointLight(0xff0000); //创建一个白色的点光源 pointLight.position.set( 50, 50, 50 );
JS星星发光
weixin_44858732的博客
06-17 486
JS星星发光 下面我们使用Visual Studio这个软件来写一个JS.的代码，我们可以用JS的代码写一个简单的方法，就是实现一个用gif图然后结合JS实现发光的效果。 那么这个代码要怎么写呢，首先我们需要先在界面上写一下的Html的代码，我们来看一下界面的代码是什么，看以下截图： 在截图中我们可以看到界面的代码就是非常的简单啦。就是直接用一个body里面直接给他写一个属性，这个属性是背景颜色...
Three.js中的光源
哈哈哈的博客
04-26 697
Threejs中的各种光源 作为3D技术的发展趋势，浏览器端3D技术越来越被一些技术公司重视。由此，Threejs非常注重3D渲染效果的真实性，对渲染真实性来说，使用光源是比不可少的技巧。Threejs，在光源方面提供了多种光源供选择。 1、 光源基类 在Threejs中，光源用Light表示，它是所有光源的基类。它的构造函数是： THREE.Light ( hex )
three.js 源码注释（四十）Light/PointLight.js
omni360的专栏
12-06 1634
PointLight方法根据设置灯光的颜属性color, 强度属性intensity,距离属性 distance 创建点光源.PointLight对象的功能函数采用 定义构造的函数原型对象来实现. TODO: PointLight类型灯光在这个版本内还没有实现阴影.??? Example: var light = new THREE.PointLight(0xff0000,1,100); //创建灯光对象 light.position.set(50,50,30); //设置位置 sc
three.js入门（三）：点光源+动画的实现
weixin_33890499的博客
06-07 787
2019独角兽企业重金招聘Python工程师标准>>> ...
three.js之光源
youhebuke225的博客
12-08 3388
光源是对于自然界光照的模拟，往往为了更好的渲染场景，需要设置不同的光源，设置不同的光照强度。
【Threejs基础教程-光影篇】5.1 常用的灯光
最新发布
qq_42760477的博客
03-31 1370
【Threejs基础教程-光影篇】 5.1 常用的灯光介绍
Threejs入门之四:Threejs中的光
九仞山的专栏
04-01 2866
详细介绍了Threejs中常见的各种光照效果
Three.js提供了多种类型的灯光
小道士写程序
11-11 581
Three.js提供了多种类型的灯光，包括环境光、点光源、平行光源和聚光灯。这些灯光可以用来照亮场景中的物体，使其看起来更加真实。
Three.js场景中的光源运用详解
"本章详细介绍了Three.js库中各种光源的使用，包括 AmbientLight、PointLight、SpotLight、DirectionalLight、HemisphereLight、AreaLight 和 LensFlare，以及如何调整和配置它们以实现不同的光照效果。" 在Three....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值