three.js - (入门二)

上一章节讲了如何完整的创建一个three.js的简单例子,这一节,分别细说每个必要元素的类别及功能。

讲在前面的话:这一节主要是细说类别。那么我希望大家多去尝试每个功能,就像刚买了新手机一样,每个新鲜的功能都去试一下,

这样自己才能深刻得体会到,这个代码原来是这个效果,这个功能原来是这个代码实现的。让我们进入正题:

1.renderer(渲染器),用法及参数如下:

renderer=new THREE.WebGLRenderer({
  antialias:true,//antialias:true/false是否开启反锯齿
  precision:"highp",//precision:highp/mediump/lowp着色精度选择
  alpha:true,//alpha:true/false是否可以设置背景色透明
  premultipliedAlpha:false,//?
  stencil:false,//?
  preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
  maxLights:1//maxLights:最大灯光数
})

2.camera(相机)

  a.正投影相机:THREE.OrthographicCamera(left, right, top, bottom, near, far) (远近高低比例都相同)

  b.透视投影相机:THREE.PerspectiveCamera(fov, aspect, near, far) (远处的物体比近处的物体小)

  fov相当于视角,当它为0的时候,相当于闭着眼。这里取值多为45左右,当然也可以自己设不同的值试一试效果;

  near:可以认为是眼睛距离近处的距离;

  far:表示你远处的裁面;

  aspect:实际窗口的纵横比,即宽度除以高度

3.light(光源)

  a.环境光THREE.AmbientLight(hex)   // hex:16进制的颜色值

  什么是环境光?

  环境光是经过多次反射而来的光称为环境光,无法确定其最初的方向。环境光是一种无处不在的光。环境光源放出的光线被认为来自任何方向。

  因此,当你仅为场景指定环境光时,所有的物体无论法向量如何,都将表现为同样的明暗程度。(这是因为,反射光可以从各个方向进入您的眼睛)

  b.点光源:PointLight( color, intensity, distance )

  Color:光的颜色;

  Intensity:光的强度;

  distance:光的距离

  c.聚光灯:THREE.SpotLight( hex, intensity, distance, angle, exponent )

  Angle:聚光灯着色的角度;

  exponent:光源模型中,衰减的一个参数,越大衰减约快

  d.平行光:THREE.DirectionalLight = function ( hex, intensity )

4.geometry(各种形状)

  a.长方体:THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);

  b.平面:THREE.PlaneGeometry(width, height, widthSegments, heightSegments);

  c.球体:THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength);

  d.圆形:THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);

  e.圆柱体:THREE.CylinderGeometry(radiusTop, radiusBottom, height,radiusSegments, heightSegments, openEnded)  //ps:当openEnded -> 为 true时,上下不封口。

  f.正四面体:THREE.TetrahedronGeometry(radius, detail);

  g.正八面体:THREE.OctahedronGeometry(radius, detail);

  h.正十二面体:THREE.IcosahedronGeometry(radius, detail);

  i.圆环:THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);

  j.圆环结:THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale);

5.material(材质)

  a.基本材质:THREE.MeshBasicMaterial(opt)

  opt对象参数:

  visible :是否可见,默认为 true

  side :渲染面片正面或是反面,默认为正面 THREE.FrontSide ,可设置为反面THREE.BackSide ,或双面 THREE.DoubleSide

  wireframe :是否渲染线而非面,默认为 false

  color :十六进制 RGB 颜色

  map :使用纹理贴图

  b.Lambert 材质(MeshLambertMaterial)

  opt参数:

  color:设置材质颜色

  ambient 表示对环境光的反射能力,只有当设置了 AmbientLight 后,该值才是有效的

  emissive 是材质的自发光颜色,可以用来表现光源的颜色

  c.Phong 材质(MeshPhongMaterial)

  opt参数:

  color,ambient,emissive: 同上;

  specular: 镜面反射系数作说明

  shininess: 当 shininess 值越大时,高光的光斑越小,默认值为 30

介绍到这里,大致的一些属性及种类就介绍到这里了。希望大家最好能一一尝试,这样看是看不出什么的,实际有什么不同的,当尝试之后,会茅塞顿开。

时间: 2024-08-04 21:34:03

three.js - (入门二)的相关文章

backbone js 入门二

为什么分这么篇,因为我知道有一部分人像我这样,长篇的看不下去啊 三:collection  -----------collection 就是model的集合 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>backbone -collection</title> </head> <bod

Node.js入门:模块机制

CommonJS规范  早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来实现的,在这样的背景之下,一没有特色,二没有实用价值.但是随着JavaScript在前端的应用越来越广泛,以及服务端JavaScript的推动,JavaScript现有的规范十分薄弱,不利于JavaScript大规模的应用.那些以JavaScript为宿主语言的环境中,只有本身的基础原生对象和类型,更多的对

Node.js入门:Node.js&amp;NPM的安装与配置

Node.js安装与配置  Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0.6.x的版本上介绍Node.js的安装和配置.(本文一律以0.6.1为例,0.6的其余版本,只需替换版本号即可.从http://nodejs.org/#download可以查看到最新的二进制版本和源代码). Windows平台下的Node.js安装 在过去,Node.js一直不支持在Windows平台下原生

Ember.js入门教程、博文汇总

第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properties) Ember.js 入门指南——观察者(observer) Ember.js 入门指南——绑定(bingding) Ember.js 入门指南——枚举(enumerables) Ember.js 入门指南之七第一章对象模型小结 第二章 模板 Ember.js 入门指南——handlebars基

转 Python爬虫入门二之爬虫基础了解

静觅 » Python爬虫入门二之爬虫基础了解 2.浏览网页的过程 在用户浏览网页的过程中,我们可能会看到许多好看的图片,比如 http://image.baidu.com/ ,我们会看到几张的图片以及百度搜索框,这个过程其实就是用户输入网址之后,经过DNS服务器,找到服务器主机,向服务器发出一个请求,服务器经过解析之后,发送给用户的浏览器 HTML.JS.CSS 等文件,浏览器解析出来,用户便可以看到形形色色的图片了. 因此,用户看到的网页实质是由 HTML 代码构成的,爬虫爬来的便是这些内容

【 D3.js 入门系列 --- 10 】 地图的绘制

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON 文件.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.关于 JSON 的语法格式,可以在: http://www.w3s

Windows 下 Node.js 入门

例子工程在此下载 Windows 下 Node.js 入门 NodeJS的历史就不说了,别人说过了.最最关键Google JavaScript V8 开发成功,运行效率很高,开放二次开发接口(C++库,功能类似常见的Lua,Python等脚本的的开放库).本来V8主要给Chrome浏览器服务的,经不住运行效率太优秀了,所以就有人动起了开发Native端的JavaScript运行环境的主意.NodeJS是这个思路的产物. 这是官网 https://nodejs.org/ 英文 https://no

JavaScript图表库的新选择!LightningChart JS入门须知了解一下

对于LightningChart JS,可能很多用户并不是很了解这个产品,这是由Arction Ltd公司最新推出的JavaScript图表库工具.LightningChart JS是Web上性能最高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源. GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画.非常适合用于贸易,工程,航空航天,医药和其他领域的应用. 入门视频 LightningChart JS入门视频(一):使用JavaScr

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据:  city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh