【Three.js基础探寻七——Lamber材质与Phong材质】的更多相关文章

Three.js基础探寻七——Lamber材质与Phong材质

材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong). MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框. MeshLambertMaterial:这种材质对光照有反应,用于创建暗淡的不发光的物体. MeshPhongMaterial:这种材质对光照也有反应,用于创建金属类明亮的物体. 1.基本材质 使用基本材质(Ba…

Three.js基础探寻一

1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SVG标签的渲染器. 这是一个开源项目. 3.环境 找一个喜欢的jsIDE.调试建议使用Chrome或者Firefox. 4.下载 传送门 5.使用 <head> <script type="text/javascript" src="js/three.js&quo…

Three.js基础探寻二——正交投影照相机

本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机. 2.两种相机的区别与适用范围 正交投影: 透视投影: 正交投影就像数学课上画的:而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小. 对于制图.建模软件通常使用正交投影:而对于其他大多数应用,通常使用透视投影. 3.正交投影照相机 正交投影照相机的构造函数: Three.Orthog…

Three.js基础探寻八——法向材质与材质的纹理贴图

4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的颜色与照相机与该物体的角度相关,下面我们只改变照相机位置,观察两个角度的颜色变化: camera.position.set(5, 25, 25);的效果: camera.position.set(25, 25, 25);的效果: 我们观察的是同样的三个面,但是由于观察的角度不同,物体的颜色就不同了.…

Three.js基础探寻九——网格

在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(ParticleSystem)等.创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色.纹理等信息. 本篇将介绍创建较为常用的物体:网格,然后介绍如何修改物体的属性. 1.创建网格 在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质…

Three.js基础探寻四——立方体、平面与球体

前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments) width:x方向上的长度 height:y方向上的长度 depth:z方向上的长度 w…

Three.js基础探寻六——文字形状与自定义形状

1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helvetiker字体为例.引用: <script type="text/javascript" src="你的路径/helvetiker_regular.typeface.json"></script> TextGeometry的构造函数是: THREE.…

Three.js基础探寻十——动画

本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Three.js程序而言,动画的实现是通过在每秒中多次重绘画面实现的. 为了衡量画面切换速度,引入了每秒帧数FPS(Frames Per Second)的概念,是指每秒画面重绘的次数.FPS越大,则动画效果越平滑,当FPS小于20时,一般就能明显感受到画面的卡滞现象. 那么FPS是不是越大越好呢?其实也未必…

js基础第七天

短信发送验证倒计时案例(常用) 关闭定时器clearInterval this 指向的是 事件的调用者 ,或者是函数的使用者. button 不可以用 disabled 不可用的意思 意思是变成灰色不能按. btn.disabled = "disabled" || btn.disabled = true; 因为 button是个双标签 所以要更改他的内容, 需要使用 innerHTML ,而不是value. 一般情况下,我们喜欢 var that = this; <script&…

Three.js基础探寻三——透视投影照相机

本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.PerspectiveCamera(fov, aspect, near, far) - fov 可视角度  - aspect 实际窗口的纵横比  - near 近处的裁面的距离 - far 远处的裁面的距离 只有离相机的距离大于near值,小于far值,且在相机的可视角度之内,才能被相机投影到. 让我们通过几…