zoukankan      html  css  js  c++  java
  • 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

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

  • 相关阅读:
    20180925-7 规格说明书-吉林市2日游
    第二周例行报告psp
    20180918-1 词频统计
    第一周例行报告psp
    第一周博客作业2018091-2
    20181009-9 每周例行报告
    20180925-1 每周例行报告
    20180925-7 规格说明书-吉林市2日游
    20180925-5 代码规范,结对要求
    20180925-4 单元测试,结对
  • 原文地址:https://www.cnblogs.com/lafitewu/p/8046725.html
Copyright © 2011-2022 走看看