three.js - (入门二)

Posted Lafitewu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 

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









以上是关于three.js - (入门二)的主要内容,如果未能解决你的问题,请参考以下文章

three.js学习笔记 之一(ITAEM团队学习分享)

three.js 入门详解

three.js 入门详解

three.js入门系列之材质

There.js入门系列之React中使用Three.js

Three.JS程序化建模入门