threejs 的聚光灯SpotLight

阅读数:85 评论数:0

跳转到新版页面

分类

html/css/js

正文

聚光灯是从一个方向上的一个点发出,沿着一个圆锥体,它离光越远,它的尺寸就越大。

一、构造器

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )

1、distance

从光源发出光的最大距离,其强度根据光源的距离线性衰减。

2、angle

光线散射角度,最大为Math.PI/2

3、penumbra

聚光锥的半影衰减百分比。在0和1之间的值,默认为0。

4、decay

沿着光距离的衰减量。

二、属性

1、castShadow: Boolean

此属性设置为true,聚光灯将投射阴影,但这样做的代价比较高,而且需要一直调整到阴影看起来正确。

2、position

光源的位置。

3、target: Object3D

默认的光线目标在(0,0,0),

var targetObject = new THREE.Object3D();
scene.add(targetObject);

light.target = targetObject;

完成上述操作后,聚光灯就可以追踪到目标对象了。




相关推荐

一、概述 OrbitControls 是 three.js 中的一个控制器,用于实现对 3D 场景的相机控制,允许用户通过鼠标或触摸操作来旋转、缩放和平移视图。 即轨道控制器,可以使相机围绕目标旋转。

环境光会均匀的照亮场景中的所有物体,它不能用来投射阴影,因为它没有方向。 一、构造函数 Amb

一、概述 THREE.Object3D 是 Three.js 的基础类,用于表示 3D 空间中的一个对象。几乎所有的 3D 对象(如 Mesh、Group、Camera、Light 等)都继承自 TH

一、动画片段 animation clips     每个animationClip通常保存3D动画对象某个活动的数据。举个例子,假如mesh是一个角色,可能有一个AnimationClip实现步行循

一、概述 CSS2DRenderer 是 three.js 中的一个渲染器,用于将 HTML/CSS 元素(如标签、文本、图片等)渲染到 3D 场景中的指定位置。这种渲染器与 WebGLRendere

一、概述 WebGLRenderer 是 three.js 中的核心渲染器,用于将 3D 场景渲染到网页的 <canvas> 元素上。它使用 WebGL 技术,通过 GPU(图形处理单元)进行硬件加速

一、归一化设备坐标 在屏幕像素坐标系统中: X 轴的正方向是从左到右,和归一化设备坐标系统一致。 Y 轴的正方向是从上到下,这与归一化设备坐标系统 相反。 在归一化设备坐标 (NDC) 系统中:

一、material.emissive 在 Three.js 中,material.emissive 是一个材质属性,用来控制物体的 自发光 效果。这个属性的值通常是一个 颜色,表示物体自发光的颜色,

场景允许你在什么地方、摆放什么东西来交给three.js来渲染,是旋转物体、灯光和相机的地方。 一、构造器 <pre class="language-javascript"

一、概述 THREE.Clock 是 Three.js 中的一个类,用于管理和获取时间的流逝,特别是用于控制动画或其他基于时间的更新。它通常用于在每帧渲染时获取经过的时间,帮助计算帧率或实现平滑的动画