文档章节

学习threeJS(三)--光源

2
 25903014
发布于 05/21 18:05
字数 437
阅读 6
收藏 0

一、光源的类型

  • AmbientLight(环境光)
  • PointLight(点光源)
  • SpotLight(聚光灯光源,锥形光源)
  • DirectionLight(方向光,太阳光,平行光)
  • HemisphereLight(半球光)
  • AreaLight(面光源)
  • LensFlare(镜头炫光)

二、基础光源

1、AmbientLight

没有特定来源,不会产生阴影,不能单独使用,与其他光源一起使用,目的是弱化阴影或添加颜色。

var ambientLight = new THREE.AmbientLight('#0c0c0c');
scene.add(ambientLight);

不需要指定光源位置

2、PointLight

new THREE.PointLight(color颜色,  intensity强度,  distance距离,  position位置, visible光源开闭)

  var pointColor = '#ccffcc';
  var pointLight = new THREE.PointLight(pointColor, 2, 100);
  pointLight.position.x = -20;
  pointLight.position.y = 10;
  pointLight.position.z = 0;
  pointLight.visible = true;
  scene.add(pointLight);

*点光源不会产生投影,因为点光源向所有方向发射光,计算负担过重。

3、SpotLight

  • castShadow 是否生成阴影
  • shadowCameraNear 投影近点
  • shadowCameraFar 投影远点
  • shadowCameraFov 投影视场(我理解为视角)
  • target 目标,决定光照方向
  • shadowBias 阴影偏移
  • angle 角度、光柱的宽度
  • exponent 光强衰减指数
  • onlyShadow 没有光照只有阴影
  • shadowCameraVisible 投影方式可见
  • shadowDarkness 阴影暗度--场景渲染之后不能修改
  • shadowMapWidth 阴影映射宽度(像素)
  • shadowMapHeight 阴影映射高度(像素)
var spotLight = new THREE.SpotLight('#FFFFFF');
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
spotLight.target = plane;
scene.add(spotLight);

若想指向其他地方,空间其他点位,可以创建一个空的THREE.Object3D()实例

var target = new THREE.Object3D();
target.position = new THREE.Vector3(5, 0, 0);

spotlight.target  = target;

其他属性有待研究

4、DirectinalLight

var directionalLight = new THREE.DirectionalLight('#FFFFFF');
directionalLight.position.set(-20, 50, -20);
directionalLight.castShadow = true;
directionalLight.shadowCameraNear = 2;
directionalLight.shadowCameraFar = 200;
directionalLight.shadowCameraTop = 50;
directionalLight.shadowCameraBottom = -50;
directionalLight.shadowCameraLeft = -50;
directionalLight.shadowCameraRight = 50;
scene.add(directionalLight);

三、特殊光源

待更

© 著作权归作者所有

上一篇: 委托,反射
2
粉丝 0
博文 17
码字总数 2459
作品 0
合肥
私信 提问
three.js快速上手以及在react中运用

github的地址 欢迎star! 之前项目中用到了3D模型演示的问题,整理了一下之前学习总结以及遇到的坑。3D 框架有老牌引擎 Three.js 和微软的 Babylon.js 对比一下还是使用更为普遍的Three.js Th...

sundjly
04/01
0
0
使用THREE.js制作一款3D游戏

使用THREE.js制作一款3D游戏 本文是基于某位大神使用three.js设计游戏的学习心得与知识分享 The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js 前言 这个学期选修了...

黄河滴滴
2018/10/07
0
0
初识three.js,搭建three.js+vue.js项目

WebGL 简介:WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0(OpenGL for Embedded Systems,OpenGL嵌入式版本,针对手机、游戏机等...

mfnn
2018/09/23
0
0
Three.js开发指南(1):介绍

https://github.com/josdirksen/learning-threejs 本地Web服务器的不同环境: 用Python > python -m SimpleHTTPServer 用NPM > npm install -g http-server > http-server 用Mongoose -- 在M......

qfire
2018/04/20
0
0
SegmentFault 技术周刊 Vol.35 - WebGL:打开网页看大片

WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一,它把 Web 带入了 3D 的时代。 初识 WebGL 先通过几个使用 WebGL 的网站来认识下 WebGL 的魅力吧~ 温馨提示:浏览以下网页需要浏览...

keke
2017/10/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你需要知道的 5 个 Linux 新手会犯的失误

Linux 爱好者们分享了他们犯下的一些最大错误。 终身学习是明智的 —— 它可以让你的思维敏捷,让你在就业市场上更具竞争力。但是有些技能比其他技能更难学,尤其是那些小菜鸟错误,当你尝试...

xiangyunyan
2分钟前
0
0
来迟了,用Python助你叠猫猫,抢618大红包!

目录: 0 引言 1 环境 2 需求分析 3 前置准备 4 逛店铺流程回顾 5 代码全景展示 6 总结 0 引言 最近叠猫猫的活动可真是十分的火爆,每天小伙伴们为了合猫猫忙的可谓是如火如荼。为啥要叠猫猫...

上海小胖
8分钟前
0
0
FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
9
0
Oracle分页查询语句的写法

Oracle分页查询语句的写法 Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,Oracle分页查询语句基本上可以按本文给出的格式来进行套用。   Oracle分...

康师傅
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部