我的threejs学习笔记（七）——spotLight

最新推荐文章于 2024-06-23 11:56:22 发布
最新推荐文章于 2024-06-23 11:56:22 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： 学习笔记 three.js学习笔记 文章标签： three-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenqiong1991/article/details/65951169
版权
本文介绍了threejs中的spotLight特性，将其比喻为手电筒或舞台探照灯，强调其锥形发光区域、近场区、远场区和发散系数等属性。并探讨了点光源与聚光灯的区别。同时，文章讨论了three.js新旧版本中关于阴影设置的变化，包括shadowCameraVisible的使用，并提供了实现spotLight阴影效果的关键步骤。
摘要由CSDN通过智能技术生成

写在前面

点光源（pointlight)的特点就像夜空中的烟雾弹，向四面八方发射光线；而聚光灯（spotlight）就像手电筒或者像舞台上的探照灯，效果是一个锥形的发光区域。相比于点光源，它有照射的近场区，远场区，和发散系数。

点光源属性

var spotLight=new THREE.SpotLight({color:"#f2f"});
    spotLight.intensity=1;
    spotLight.target=cube;
    spotLight.castShadow=true;
    spotLight.shadow.camera.near=2;
    spotLight.shadow.camera.far=200;
    spotLight.shadow.camera.fov=30;
    //shadowCameraVisible只有在老版本的threejs库中才支持，新版本已废除。
    //spotLight.shadowCameraVisible=true;
    var helper=new THREE.CameraHelper(spotLight.shadow.camera);
    scene.add(helper);
    scene.add(spotLight);

three.js更新的速度还是挺快的，比如之前版本的shadowCameraNear,shadowCameraFar,shadowCameraFov以及shadowCameraVisible都不能直接使用，而新版本中则用分开的形式来代替，而shadowCameraVisible的使用更复

最低0.47元/天 解锁文章
chenqiong1991
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js - 光源使用详解2（聚光灯 SpotLight、平行光 DirectionLight）
hz_love_AI的博客
10-15 2062
Three.js 中有许多不同种类的光源，每种光源都有特别的行为和用法。下面通过一个系列文章介绍它们的用法。
three.js聚光灯SpotLight使用，调整聚光灯颜色、位置、角度、强度、距离、衰减指数、方向、可见性、是否产生阴影属性(vue中使用three.js09)
点燃火柴的博客
09-11 6955
聚光灯SpotLight使用一、聚光灯介绍二、如何使用聚光灯1.创建聚光灯2.聚光灯的属性2.1颜色-color2.2是否可见-visible2.3角度-angle2.4强度-intensity2.5距离-distance2.6光照衰减指数-decay2.7照射面光影衰减百分比-penumbra2.8目标-target2.9是否产生阴影-castShadow2.10位置-position三、demo效果四、demo代码 一、聚光灯介绍 聚光灯是一个沿着特定方向方散发的光源，照射范围在三维空间中构成一个圆锥体
【Three.js】学习-03.使用Three.js各种光源
最新发布
喝奶茶要半糖的博客
06-23 699
在第一章创建场景的时候，当我们使用函数时，如果不使用光源则会出现场景为一片黑的情况，而这时就需要光源的介入，让我们整个场景亮起来。
three.js 学习笔记
好好学习天天向上
01-07 1159
渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix，但是不会每渲染一帧，都通过相机的属性计算投影矩阵(节约计算资源)。比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。没有特定方向，整体改变场景的光照，会均匀的照亮场景中的所有物体。(物体表面)的影响，如果使用受光照影响的材质，在不开灯的情况下是看不见的。反射的光线越多，光越亮，反射的光线越少光越暗。
Three.js学习笔记
FondIllusions的博客
05-17 299
1.three.js的引入 进入官网Three.js – JavaScript 3D Library，下载文件 解压文件，复制three.js-master\build\three.min.js文件 在项目中，引入该文件。 2.
threejs学习笔记(1)
weixin_30566111的博客
09-26 86
demo地址：http://www.adanghome.com/js_demo/31/需要支持webgl的浏览器，比如pc上的chrome。先吐个槽，threejs的学习资料真心少，官方的文档和教程几乎可以忽略不计。。。好了，笔记开始。1）threejs的基本思路是，有一个render，通常选用THREE.WebGLRenderer类，有一个camera,通常选用THREE.Perspectiv...
threejs笔记
09-17
### Three.js 基础知识点概述 #### 一、Three.js 概述 Three.js 是一个基于 WebGL 的 3D 库，它简化了 WebGL 的复杂性，使得开发者能够更轻松地创建和显示 3D 图形。Three.js 提供了一系列的 API 和工具，帮助...
threejs示例 随便下载 不要分：）
01-06
《Three.js 深入探索：通过实例学习WebGL图形编程》 Three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建复杂的3D图形变得简单易行。本篇文章将深入探讨通过“threejs示例”来学习WebGL图形编程的关键...
threejs-volumetric-spotlight:Three.js的体积聚光灯
04-11
而"threejs-volumetric-spotlight"是一个专为Three.js设计的扩展模块，它引入了一个独特的特性——体积聚光灯（Volumetric Spotlight）。体积聚光灯能够模拟真实世界中的光束效果，比如光线在空气中散射产生的雾气、...
threejs夹杂3d模型
05-22
Three.js提供了多种光照类型，如点光源（PointLight）、平行光（DirectionalLight）、聚光灯（SpotLight）等。通过调整光源的位置、强度和颜色，可以影响模型表面的阴影和反射，从而增加立体感。 渲染和交互是Three...
threejs-learn.zip
09-14
《深入学习Three.js》 Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建复杂的3D图形。Three.js极大地简化了WebGL的使用，使得非图形专业人士也能轻松地构建互动的3D场景。在"threejs-learn.zip...
threejs的学习笔记
weixin_30685029的博客
02-28 80
很多时候，我们在开发3d效果的时候，容易搞不清楚x,y,z坐标分别指示哪个方向 在开发threejs的时候可以先把坐标系添加到场景中，起到一个启示作用。 js // show axes in the screen var axes = new THREE.AxisHelper(20); scene.add(axes); 坐标系中的X,Y,Z坐标轴分别...
ThreeJs学习笔记
糯米
04-03 470
Raycaster官方文档原理示例鼠标在屏幕上点击的时候，得到二维坐标p(x, y),再加上深度坐标的范围(0, 1), 就可以形成两个三位坐标A(x1, y1, 0), B(x2, y, 1), 由于它们的Z轴坐标是0和1，则转变到投影坐标系的话，一定分别是前剪切平面上的点和后剪切平面上的点，也就是说，在投影坐标系中，A点一定在能看见的所有模型的最前面，B点一定在能看见的所有的模型的最后边，将A...
threejs学习笔记（一）
abb4018的博客
03-29 125
得到webgl的渲染管线 转载于:https://www.cnblogs.com/apesplan/p/10618860.html
threejs学习笔记（仅供学习参考）
c_qianxia5040的博客
01-13 1864
更多案例 http://www.yanhuangxueyuan.com/3D.html 物联网粮仓3D可视化案例：http://www.yanhuangxueyuan.com/3D/liangcang/index.html 沙发在线预览： http://app.xuanke3d.com/apps/trayton/#/show 服装在线预览： http://suit.xuantech.cn/ 洗衣机在线交互预览：https://cdn.weshape3d.com/hir001/1021/web/index.
ThreeJS 学习笔记——简介
weixin_33713707的博客
12-11 224
一、前言 Three.js (github) 是一个纯 JavaScript 实现的 3D 渲染库，其在前端 3D 渲染的地位不言而喻，看其在 github 上的 start 4.6 k，fork 1.7 k 这个量级便知道了。准确来说 ThreeJs 是一个基于 WebGL 的封装，而 WebGL 就是前端界的 OpenGL。 二、Github 首页解读 1.简介 该项目的目的是创建一个易于使...
ThreeJS学习笔记一：场景、相机、渲染器、光源
to_the_Future的博客
10-12 897
在three中，场景、相机、渲染器是最核心的三个概念。我们通过相机拍摄场景，再通过渲染器把场景呈现在视图中。本文主要记录了threeJS中场景、相机、渲染器、光源的基本概念，以及实现了一个简单的3D场景。下次再见。
我的threejs学习笔记（一）
chenqiong1991的博客
03-12 1277
生成three.js场景的基本步骤一、引入jquery和threejs（注意顺序，jquery在后） 1. <script src="../three.js-master/build/three.js"></script> 2. <script src="../jquery/jquery.js"></script>二、内联css控制场景布满页面<style> body{
26 Three.js的聚光灯光源THREE.SpotLight
现在学习也不晚
08-17 4456
介绍 THREE.SpotLight（聚光灯灯源）是最常使用的光源之一。THREE.SpotLight是一种具有锥形效果的光源。比如：手电筒。 案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/28.html 相关属性 由于Three.js的版本更新过快，有可能有我没有测试的属性已经被抛弃了，如果大家有知道的已经被抛弃掉的记得给我留言。...
WebGL three.js学习笔记 阴影与实现物体的动画
05-30
好的，我会为您解答关于WebGL three.js的阴影与实现物体动画的问题。首先，让我们来了解一下WebGL three.js是什么。 WebGL three.js是一款基于WebGL的JavaScript 3D库，可以帮助我们快速搭建3D场景和应用。接下来我们来讲解阴影和实现物体动画的方法。 一、阴影 阴影是模拟物体之间的阴影效果，让3D场景更加真实。在three.js中，我们可以通过设置Mesh的castShadow和receiveShadow属性来实现阴影效果。 1. 首先，我们需要在场景中添加光源，例如SpotLight或DirectionalLight。 2. 然后，在需要投射阴影的物体上设置castShadow为true。 3. 最后，在需要接收阴影的物体上设置receiveShadow为true。 代码示例： ```javascript // 添加光源 const light = new THREE.SpotLight(0xffffff); light.position.set(0, 100, 0); light.castShadow = true; scene.add(light); // 添加需要投射阴影的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.castShadow = true; scene.add(cube); // 添加需要接收阴影的物体 const plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff })); plane.receiveShadow = true; plane.rotation.x = -Math.PI / 2; scene.add(plane); ``` 二、物体动画 在three.js中，我们可以通过Tween.js库来实现物体的动画效果。Tween.js是一款JavaScript动画库，可以帮助我们实现非常丰富的动画效果。 1. 首先，我们需要在HTML文件中引入Tween.js库文件。 2. 然后，在需要动画的物体上设置初始状态。 3. 最后，通过Tween.js库来设置物体的目标状态和动画效果，例如缓动动画（ease）或弹跳动画（bounce）。 代码示例： ```javascript // 引入Tween.js库文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script> // 添加需要动画的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.position.set(0, 0, 0); scene.add(cube); // 设置初始状态 const start = { x: 0, y: 0, z: 0 }; // 设置目标状态 const end = { x: 50, y: 50, z: 50 }; // 设置动画效果 const tween = new TWEEN.Tween(start) .to(end, 1000) .easing(TWEEN.Easing.Quadratic.InOut) .onUpdate(() => { cube.position.set(start.x, start.y, start.z); }) .start(); ``` 以上是关于WebGL three.js阴影与实现物体动画的方法，希望能够对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值