three.js之光源

最新推荐文章于 2024-05-04 18:11:07 发布
最新推荐文章于 2024-05-04 18:11:07 发布
阅读量3.3k 收藏 10
点赞数 1
分类专栏： three.js 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youhebuke225/article/details/128161049
版权

文章目录

专栏目录请点击

简介

光源是对于自然界光照的模拟，往往为了更好的渲染场景，需要设置不同的光源，设置不同的光照强度

分类

一般光源可以分成以下类别

  1. 环境光(AmbientLight)
  2. 平行光(DirectionalLight)
  3. 点光源(PointLight)
  4. 聚光灯光源(SpotLight)

环境光

环境光是没有特定方向的光源，主要是均匀改变物体明暗的效果，如果没有设置环境光，那么物体会是一个全黑的对象

  • 没有环境光

在这里插入图片描述

  • 有环境光
//环境光:环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
var ambient = new THREE.AmbientLight(0x888888);
scene.add(ambient);//环境光对象添加到scene场景中

当环境光打上之后，物体立马改变了颜色

在这里插入图片描述

点光源

  1. 点光源就像我们生活中的灯泡，当设置点光源的时候，必须设置光源的位置属性position
  2. 他会呈现出阴暗面，我们可以设置光源的位置来感受点光源的特点
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);

在这里插入图片描述
3. 我们修改点光源的位置，看一下他的渲染效果

point.position.set(-400, -200, -300);

在这里插入图片描述
我们拖动一下物体就会发现，亮面在另一面

平行光

  1. 平行光的光线是平行的，也就是说物体的每一个区域接收到的入射角是相同的
  2. 在设置的时候，使用position和target两个属性来一起确定平行光的方向
    • target的属性值可以是threejs场景中任何一个三维模型
// 平行光设置
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
directionalLight.position.set(80, 100, 50);
directionalLight.target = mesh;
scene.add(directionalLight);

在这里插入图片描述
平行光如果不设置position和target属性，那么光线默认从上往下照射，也就可以认为是从(0,1,0)和(0,0,0)两个点确定的直线

聚光灯

  • 聚光灯是一个会沿着特定方向逐渐发散的光源，在一个立体空间会构成一个圆锥体
  • 通过属性angle可以设置聚光灯发散的角度，照射位置和平行光相同是由position和target两个属性实现的
// 聚光灯设置
var spotLight = new THREE.SpotLight(0xffffff);
// 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
spotLight.position.set(200, 200, 200);
spotLight.target = mesh;
// 设置发散的角度
spotLight.angle = Math.PI / 100

scene.add(spotLight);

在这里插入图片描述

光源辅助对象

光源辅助对象，就像AxesHelper一样可以可视化显示坐标，他可以大致显示光照的方向

辅助对象构造函数名
聚光源辅助对象SpotLightHelper
点光源辅助对象PointLightHelper
平行光光源辅助对象DirectionalLightHelper
// 光源对象设置
const sphereSize = 2;
const pointLightHelper = new THREE.PointLightHelper( point, sphereSize,"#000" );
scene.add( pointLightHelper );

在这里插入图片描述

相关计算

颜色计算

  1. 当不同颜色的光源照射到有颜色的材质上面去的时候，当光源的颜色和网格模型材质的颜色值mesh.material.color和光源的颜色值light.color会进行简单的相乘，也就是RGB三个分量分别进行相乘
  2. 平行光漫反射的数学模型:漫反射光的颜色 = 网格模型材质颜色值 x 光线颜色 x 光线入射角余弦值
  3. 漫反射数学模型RGB分量表示：(R2,G2,B2) = (R1,G1,B1) x (R0,G0,B0) x cosθ
R2 = R1 * R0 * cosθ
G2 = G1 * G0 * cosθ
B2 = B1 * B0 * cosθ

阴影

有方向的光源的作用下，物体都会形成隐形，想要产生阴影，需要有三个要素

  1. 首先要有光源
  2. 要有投影的模型
  3. 要有接收投影的模型
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- 引入threejs扩展控件OrbitControls.js -->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    var geometry = new THREE.BoxGeometry(40, 100, 40); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    // 设置产生投影的网格模型
    mesh.castShadow = true;
    // mesh.position.set(0,0,0)

    //创建一个平面几何体作为投影面
    var planeGeometry = new THREE.PlaneGeometry(300, 200);
    var planeMaterial = new THREE.MeshLambertMaterial({
      color: 0x999999
    }); //材质对象Material

    // 平面网格模型作为投影面
    var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象Mesh
    scene.add(planeMesh); //网格模型添加到场景中
    planeMesh.rotateX(-Math.PI / 2); //旋转网格模型
    planeMesh.position.y = -50; //设置网格模型y坐标
    // 设置接收阴影的投影面
    planeMesh.receiveShadow = true;
    /**
     * 光源设置
     */
    //环境光   环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient); //环境光对象添加到scene场景中

    // 方向光
    var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // 设置光源位置
    directionalLight.position.set(60, 100, 40);
    scene.add(directionalLight);
    // 设置用于计算阴影的光源对象
    directionalLight.castShadow = true;
    // 设置计算阴影的区域，最好刚好紧密包围在对象周围
    // 计算阴影的区域过大：模糊  过小：看不到或显示不完整
    directionalLight.shadow.camera.near = 0.5;
    directionalLight.shadow.camera.far = 300;
    directionalLight.shadow.camera.left = -50;
    directionalLight.shadow.camera.right = 50;
    directionalLight.shadow.camera.top = 200;
    directionalLight.shadow.camera.bottom = -100;
    // 设置mapSize属性可以使阴影更清晰，不那么模糊
    // directionalLight.shadow.mapSize.set(1024,1024)
    console.log(directionalLight.shadow.camera);
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    // 设置渲染器，允许场景中使用阴影贴图
    renderer.shadowMap.enabled = true;
    // 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
    }
    render();
    //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener('change', render);
  </script>
</body>

</html>

我们可以将上面的代码进行复制，渲染出来的效果如下
在这里插入图片描述

  1. 在这里，我们设置了投影面,并让投影面接收阴影
// 平面网格模型作为投影面
var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象Mesh
scene.add(planeMesh); //网格模型添加到场景中
planeMesh.rotateX(-Math.PI / 2); //旋转网格模型
planeMesh.position.y = -50; //设置网格模型y坐标
// 设置接收阴影的投影面
planeMesh.receiveShadow = true;
  1. 然后设置了阴影的计算区域
// 设置用于计算阴影的光源对象
directionalLight.castShadow = true;
// 设置计算阴影的区域，最好刚好紧密包围在对象周围
// 计算阴影的区域过大：模糊  过小：看不到或显示不完整
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 300;
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 50;
directionalLight.shadow.camera.top = 200;
directionalLight.shadow.camera.bottom = -100;
// 设置mapSize属性可以使阴影更清晰，不那么模糊
// directionalLight.shadow.mapSize.set(1024,1024)

相关属性

castShadow

  • 模型和光源都有这个属性，且都是布尔值
  • 如果是模型的castShadow，它主要用来设置模型对象在光源下是否产生阴影
  • 如果是光源的castShadow，那么光源将会设置动态的阴影，这需要消耗很多动态资源，使投影看起正确

receiveShadow

  • 他也是一个布尔值，用于设置一个模型对象是否在光照下接受其他模型的投影

shadow

  • 光源的shadow属性是一个对象，不同光源的属性值，他们的光阴影对象也是不同的
种类对象阴影对象
平行光DirectionalLightDirectionalLightShadow
聚光源SpotLightSpotLightShadow
LightShadow

LightShadow是所有阴影对象的基类，他有一个属性叫做camera

  • 这个是观察光源的相机对象。这里可以看官网的解释 点击，他用于生成场景的深度图

基类

  • 光源都有一个共同的基类，那就是Light
  • 而Light也有一个基类叫做Object3D
  • 在基类中，光源有两个常用的属性
    • color:他的默认值是0xffffff
    • intensity:他的默认值是1.0
    • 光照计算的时候会把两个属性值进行相乘
youhebuke225
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WebGL 可视化3D绘图框架：Three.js 零基础上手实战
09-15
相对于Flash,Flex，Silverlight等富客户端技术，WebGL之ThreeJS：通过OpenGL ES 2.0，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。这是未来的网游趋势，如果你想做可视化动画三维企业应用，又不想用复杂的C++程序，那么 Three.js 将会是你最好的选择。  本课程主要的功效就是让你学习完本教程后，能够写出在浏览器上流畅运行的3D程序，包括但不限于：大数据可视化，360度全景展示，3D游戏，完成这些事情，会比c++用更少的代码。而且更容易，更酷。 在本课程中，我们将由浅入深的讲解这些效果的实现，这能让你迅速提高开发技能，在职场中处于不败之地。课程共十三章，大大小小贯穿了近10个案例，只要你具备基础的HTML和JavaScript基础即可学习。
Three.js-灯光与阴影
damadashen的博客
07-11 2283
Three中光照及阴影的详解及示例（环境光、平行光、点光源、聚光灯光源的实现及其阴影的实现）
threejs学习之环境光和点光源
最新发布
旅行中的伊蕾娜的博客
05-04 666
点光源，从一个点散发出的光，相当于灯泡，可以设置颜色，亮度、照射最大距离以及光照衰退量。环境光可以均匀照亮场景中所有物体，不能投射阴影，不能设置方向，只能设置颜色和亮度。添加地面，必须把receiveShadow设为true，地面才能接收物体投射出的阴影。创建立方体，必须把参数castShadow设置为true，立方体才能产生阴影。添加点光源，必须把castShadow设为true，光源才能投射阴影。// 镜面指数，越高反射效果越强。// 调整渲染器窗口大小。// 加载物体纹理贴图。
Three.js - 光源使用详解1（环境光 AmbientLight、点光源 PointLint）
hz_love_AI的博客
10-15 2897
Three.js 中有许多不同种类的光源，每种光源都有特别的行为和用法。下面通过一个系列文章介绍它们的用法。
Threejs_13 聚光灯和点光源的使用
a_strong_pig的博客
11-23 382
Threejs 聚光灯和点光源的使用
图形化开发（五）032-Three.js之光照——PointLight 点光源、SpotLight 聚光灯光源、实现聚光灯阴影、HemisphereLight室外光源
weixin_44867717的博客
09-10 1332
图形化开发（五）032-Three.js之光照——PointLight 点光源、SpotLight 聚光灯光源、实现聚光灯阴影、HemisphereLight室外光源 PointLight 点光源 点光源就是从一个点的位置向四面八方发射出去光，一个简单的例子就是一个裸露的灯泡。 实现一个最普通的点光源很简单： var pointLight = new THREE.PointLight(0xff0000); //创建一个白色的点光源 pointLight.position.set( 50, 50, 50 );
three.js光源
12-30
在三维图形渲染的世界里，`three.js`是一个非常流行的JavaScript库，它允许开发者在浏览器上创建复杂的3D场景。光源是任何3D图形的核心组成部分，因为它决定了物体的外观和感觉，赋予场景生命和真实感。在`three.js`...
使用THREE.JS开发的下雨效果
07-05
THREE.JS是一个基于WebGL的JavaScript库，用于在浏览器中创建三维图形和动画。它提供了丰富的API，使得开发者能够方便地构建复杂的3D场景，包括光照、材质、几何体等元素。在这个“使用THREE.JS开发的下雨效果”项目...
three.js-线上运动的光效
10-19
three.js 是一个流行的JavaScript库，用于在Web浏览器中创建3D图形，它利用 WebGL 技术提供丰富的三维渲染功能。在这个项目中，开发者可能探索了如何在场景中添加运动的光源，从而影响物体表面的明暗变化，创造出...
three.js 3d小游戏实例源码
06-12
Three.js 是一款强大的JavaScript库，专为在Web浏览器中创建3D图形而设计。它充分利用了WebGL技术，使得开发者无需深入理解复杂的OpenGL ES 2.0规范，就能在网页上构建丰富的三维场景。本资源是一个基于Three.js实现...
跳动的心（three.js,shader）
01-23
在这个项目中，JavaScript会初始化three.js的场景、相机和光源，加载3D模型，设置动画循环，并与用户交互。例如，心跳的节奏可能会由JavaScript函数控制，根据时间或者用户输入来调整跳动速度。 从压缩包的文件名来...
使用three.js里的各种光源
bdyz1016的博客
06-10 859
本章的主要内容 　　1 three.js有哪些可用的光源 　　2 什么时候用什么光源、 　　3 如何调整配置各种光源 　　4 如何创建镜头炫光 一 光源 　光源大概有7种， 　　其中基础光源有4种 　　　　环境光（AmbientLight会它的颜色会添加到整个场景和所有对象的当前颜色上）， 　　　　点光源（PointLight空间中的一点，朝所有的方向发射光线）， 　　　　聚光灯光源（SpotLight这种光源有聚光的效果，类似于台灯，吊灯，手电筒）， 　　　　方向光（Directio
three.js常见灯光及阴影的使用
xyphf的博客
05-19 1379
three.js常见灯光的使用 环境光(AmbientLight) 点光源(PointLight) 聚光灯(SpotLight) 平行光(DirectinalLight)
threejs导入模型为黑色原因
qq_44929535的博客
12-28 6824
【代码】threejs导入模型为黑色原因。
27 Three.js的平行光THREE.DirectionalLight
热门推荐
现在学习也不晚
08-22 1万+
简介 THREE.DirectionalLight平行光可以看作距离很远的光。它发出的所有光线都是平行的。比如太阳光，由于太阳离我们很远，我们可以把太阳的光线看作是平行的。 案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/29.html 与点光源和聚光灯光源的区别 最大的区别就是，点光源和聚光灯光源距离物体越远光线越暗。光是从一点发出...
【Threejs】05环境光和点光源
qq_54367095的博客
01-26 804
在日常环境中我们日常生活受到光照影响，黑夜里如果没有灯则什么都看不到，而在有光的情况下物体收到的光得以反射我们们眼睛中，所以在有光的情况下我们可以看清物体。threejs中的MeshBasicMaterial物体不受光照影响，也就是说这种材质即使没有光我们也能看见。然而threejs中还有许多材质，需要有光亮才能够被看见，所以这一节我们来学习一下threejs中的灯光。
如何使用THREE光源
读心悦
06-05 454
光源作为场景中重要的部分，如果没有光源，那么渲染的场景将不可见【除非使用的是基础材质或者线框材质】光源THREE中有很多不同类型的光源，例如：THREE.AmbientLight，基本光源，该光源的颜色将会叠加到场景现有物体的颜色上THREE.PointLight，点光源，从空间的一点向所有方向发射光线，点光源不能用来创建阴影THREE.SpotLight，聚光源，类似手电筒，这种光源用来投射阴影；THREE.DirectionalLight，无限光，发出光线可以看做是平行的，类似太阳光，这种光源也可以用来
ThreeJS 3D基础教程
07-11
由于WebGL的出现，在网页端渲染3D物体已经变成了现实，由于Web端不需要安装，直接可以运行，所以它获得了很多编程着的喜爱，但是由于很多人并不懂图形学编程，很难掌握Web端的3D渲染，本教程借助ThreeJS 3D给读者具体讲解如何在Web端渲染3D物体，这样可以让开发者快速的入手3D编程，能够得到事半功倍的学习效果。
three.js学习笔记(四)——Lights灯光
hongsir的博客
12-01 1280
three.js 实现点光源
09-03
### 回答1： 要在 three.js 中实现点光源，你可以使用 `THREE.PointLight` 类。 首先，你需要创建一个 `PointLight` 对象，并设置它的颜色和强度。例如： ``` let pointLight = new THREE.PointLight(0xffffff, 1, 100); ``` 然后，你可以设置点光源的位置，这样它才能对场景中的物体产生影响。例如： ``` pointLight.position.set(50, 50, 50); ``` 最后，你需要将点光源添加到场景中。例如： ``` scene.add(pointLight); ``` 现在，你就可以看到点光源在场景中产生的效果了。 ### 回答2： 在three.js中，我们可以通过使用PointLight对象来实现点光源效果。点光源是一种发出光线的光源，类似于灯泡。下面是一个简单的示例代码，演示了如何在three.js中创建和使用点光源： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建点光源 var pointLight = new THREE.PointLight(0xFFFFFF, 1); pointLight.position.set(0, 0, 0); // 设置光源位置 scene.add(pointLight); // 创建几何体 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // 使用Phong材质 var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 渲染循环 function animate() { requestAnimationFrame(animate); // 使几何体绕y轴旋转 cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` 在上面的代码中，我们首先创建了一个场景、相机和渲染器。然后使用`THREE.PointLight`创建了一个点光源，并设置了它的位置为(0, 0, 0)。接下来，我们创建了一个立方体几何体，并添加到场景中。最后，使用渲染循环来实时更新和渲染场景。 需要注意的是，我们还使用了`THREE.MeshPhongMaterial`来为几何体指定使用Phong材质。这是为了使几何体能够反射和接受光线，从而呈现出光照效果。 通过以上步骤，我们就可以在three.js中实现点光源的效果了。您可以根据需要调整点光源的颜色、强度、位置等参数，以及几何体和材质的设置，以达到您想要的效果。 ### 回答3： three.js 是一个用于在Web浏览器中创建和显示3D图形的JavaScript库。要实现点光源，可以按照以下步骤进行： 1. 首先，我们需要借助 three.js 创建一个场景和一个相机。可以使用如下代码创建一个基本的场景和相机： ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); // 设置相机位置 camera.position.z = 5; ``` 2. 接下来，我们需要创建一个点光源。点光源是从一个点向四面八方发射的光线。可以使用如下代码创建一个点光源： ```javascript var pointLight = new THREE.PointLight(0xffffff, 1, 100); // 设置光源位置 pointLight.position.set(0, 0, 0); // 将光源添加到场景中 scene.add(pointLight); ``` 这段代码创建了一个颜色为白色的点光源，亮度为1，传播范围为100。你可以根据需要调整光源的颜色、亮度和传播范围。 3. 最后，我们需要创建一个可渲染的物体，例如一个立方体，以使点光源的影响可见。可以使用以下代码创建一个立方体并将其添加到场景中： ```javascript var geometry = new THREE.BoxGeometry(); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); // 将立方体添加到场景中 scene.add(cube); ``` 这段代码创建了一个绿色的立方体。你可以根据需要调整立方体的颜色和形状。 4. 最后，我们需要在渲染循环中更新场景和相机，以便在屏幕上渲染出光源和物体。可以使用以下代码创建一个简单的渲染循环： ```javascript function animate() { requestAnimationFrame(animate); // 旋转立方体 cube.rotation.x += 0.01; cube.rotation.y += 0.01; // 渲染场景和相机 renderer.render(scene, camera); } animate(); ``` 这段代码会每帧更新立方体的旋转角度，并将更新后的场景和相机渲染到屏幕上。 通过上述步骤，我们可以使用 three.js 创建一个带有点光源的场景，并在屏幕上渲染出来。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值