系列博文-Three.js入门指南(张雯莉)-光与影

第8章 光与影

图像渲染的丰富效果很大程度上也要归功于光与影的利用。真实世界中的光影效果非常复杂,但是其本质——光的传播原理却又是非常单一的,这便是自然界繁简相成的又一例证。为了使计算机模拟丰富的光照效果,人们提出了几种不同的光源模型(环境光、平行光、点光源、聚光灯等),在不同场合下组合利用,将能达到很好的光照效果。
在Three.js中,光源与阴影的创建和使用是十分方便的。在学会了如何控制光影的基本方法之后,如果能将其灵活应用,将能使场景的渲染效果更加丰富逼真。在本章中,我们将探讨四种常用的光源(环境光、点光源、平行光、聚光灯)和阴影带来的效果,以及如何去创建使用光影。

时间: 2024-08-29 12:40:02

系列博文-Three.js入门指南(张雯莉)-光与影的相关文章

系列博文-Three.js入门指南(张雯莉)-网格 setInterval方法 requestAnimationFrame方法 使用stat.js记录FPS

第6章 动画 在本章之前,所有画面都是静止的,本章将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库,用来观测每秒帧数(FPS). CSS3动画那么强,requestAnimationFrame还有毛线用? window.requestAnimationFrame  MDN

系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素,或者让Three.js帮你生成.这两种选择一般没有多大差别,我们在此手动在HTML中定义: <body > <canvas id="mainCanvas" width="400px" height="300px" ></

系列博文-Three.js入门指南(张雯莉)-照相机

照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式.而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机.我们需要为自己的程序选择合适的照相机. 2.2 正交投影vs透视投影 举个简单的例子来说明正交投影与透视投影照相机的区别.使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果(如下图中的(a)):而使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果,对于在三维空间内平

系列博文-Three.js入门指南(张雯莉)-几何形状

第3章 几何形状 在创建物体时,需要传入两个参数,一个是几何形状(Geometry),另一个是材质(Material).本章将介绍几何形状的创建,第4章介绍材质,第5章介绍如何使用这两者创建网格.几何形状(Geometry)最主要的功能是储存了一个物体的顶点信息.WebGL需要程序员指定每个顶点的位置,而在Three.js中,可以通过指定一些特征来创建几何形状,例如使用半径创建一个球体,从而省去程序员一个个指定顶点的工作量.本节将分别介绍立方体.平面.球体.圆柱体.四面体.八面体等几何形状,以及

Ember.js 入门指南——路由简介

从本文开始,将为大家介绍路由(route),如果你看过前面的<Ember.js 入门指南--{{link-to}} 助手>这篇文章应该初步了解了route.不过在这篇文章中只是简单介绍了路由是定义.路由层次,更深入的route将从本文开始逐一介绍. 当用户使用你的应用时,应用要在不同的状态之间切换.Ember提供了很多工具用于管理那些因应用规模改变而改变的状态. 讲route前先了解URL,在应用中大概会会有如下方式设置URL: 用户第一次加载应用的时: 用户手动改变URL,比如点击按钮之后跳

Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合而成,如有疏漏欢迎提出修改意见,一起成长! Ember官网:http://emberjs.com/ 教程官网:http://guides.emberjs.com/v2.0.0/ 在此简单介绍下 Ember: Ember是一个雄心勃勃的Web应用程序,消除了样板,并提供了一个标准的应用程序架构的JavaSc

Ember.js 入门指南--目录

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站. Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合而成,如有疏漏欢迎提出修改意见,一起成长! Ember官网:http://emberjs.com/ 教程官网:http://guides.emberjs.com/v2.0.0/ 在此简单介绍下 Emb

Ember.js 入门指南——属性传递

1,传递参数到组件上 每个组件都是相对独立的,因此任何组件所需的数据都需要通过组件的属性把数据传递到组件中. 比如上篇<Ember.js 入门指南--组件定义>的第三点"{{component item.pn post=item}}"就是通过属性post把数据传递到组件foo-component或者bar-component上.如果在index.hbs中是如下方式调用组件那么渲染之后的页面是空的. {{component item.pn}} 请读者自己修改index.hbs

Ember.js 入门指南——控制器(controller)

ember new chapter5_controllers cd chapter5_controllers ember server 从本篇开始进入第五章控制器,controller在Ember2.0开始越来越精简了,职责也更加单一--处理逻辑. 下面是准备工作. 从新创建一个Ember项目,仍旧使用的是Ember CLI命令创建. 在浏览器执行项目,看到如下信息说明项目搭建成功. Welcome to Ember 1,控制器简介 控制器与组件非常相似,由此,在未来的新版本中很有可能组件将会完