zoukankan      html  css  js  c++  java
  • Three.js入门

    Three.js

    webGL

    OpenGL-WebGL-Three.js

    三大组件:场景(scene)、相机(camera)和渲染器(renderer)

    相机:相当于人的眼睛

    正投影相机THREE.OrthographicCamera:远近高低比例都相同
    透视投影相机(THREE.PerspectiveCamera):透视投影有一个基本点,就是远处的物体比近处的物体小

    透视投影是更符合我们视觉的投影,当你凝视一个女人时,就是因为远近高低各不同,女人才显得美丽,叫你看一个正投影的女人,估计连胸部都分不清,那么也没什么看头。

    视角fov(Field of View):0-180

    纵横比aspect

    近平面near

    远平面far

    CubeGeometry(几何体)

    几何体里面有一个vertices变量,可以用来存放点

    CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
    

    MeshBasicMaterial:

    渲染:

    Renderers

    CanvasRenderer

    DOMRenderer

    SVGRenderer

    WebGLRenderer

    WebGLRenderTarget

    WebGLRenderTargetCube

    WebGLShaders

    渲染器:WebGLRenderer()

    antialias:

      值:true/false

      含义:是否开启反锯齿,设置为true开启反锯齿。

    precision:

      值:highp/mediump/lowp

      含义:着色精度选择。

    alpha:

      值:true/false

      含义:是否可以设置背景色透明。

    premultipliedAlpha:

      值:true/false

      含义:?

    stencil:

      值:true/false

      含义:?

    preserveDrawingBuffer:

      值:true/false

      含义:是否保存绘图缓冲,若设为true,则可以提取canvas绘图的缓冲。

    var dataUrl = renderer.domElement.toDataURL("image/png");

    maxLights:

      值:数值int

      含义:最大灯光数,我们的场景中最多能够添加多少个灯光。

    renderer.setSize(width,height)
    设置canvas背景色(clearColor)和背景色透明度(clearAlpha),renderer.setClearColor(clearColor,clearAlpha)
    render( scene, camera, renderTarget, forceClear )
    

    renderTarget:渲染的目标,默认是渲染到前面定义的render变量中

    forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。

    requestAnimationFrame()用来做渲染循环

    THREE.Vecotr3(x,y,z) -点
    LineBasicMaterial( parameters )

    Parameters包含这些属性:

    Color:线条的颜色,用16进制来表示,默认的颜色是白色。

    Linewidth:线条的宽度,默认时候1个单位宽度。

    Linecap:线条两端的外观,默认是圆角端点,当线条较粗的时候才看得出效果,如果线条很细,那么你几乎看不出效果了。

    Linejoin:两个线条的连接点处的外观,默认是“round”,表示圆角。

    VertexColors:定义线条材质是否使用顶点颜色,这是一个boolean值。意思是,线条各部分的颜色会根据顶点的颜色来进行插值。

    Fog:定义材质的颜色是否受全局雾效的影响。

    var line = new THREE.Line( geometry, material, THREE.LinePieces );
    LineSegments:点的连接方式

    右手坐标系

    THREE.Vector3必须在THREE.Geometry中画点

    光源

    环境光:AmbientLight( hex )

    环境光就是在场景中无处不在的光,它对物体的影响是均匀的,也就是无论你从物体的那个角度观察,物体的颜色都是一样的,这就是伟大的环境光。

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

    Color:光的颜色

    Intensity:光的强度,默认是1.0,就是说是100%强度的灯光,

    distance:光的距离,从光源所在的位置,经过distance这段距离之后,光的强度将从Intensity衰减为0。 默认情况下,这个值为0.0,表示光源强度不衰减。

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

    Hex:聚光灯发出的颜色,如0xFFFFFF

    Intensity:光源的强度,默认是1.0,如果为0.5,则强度是一半,意思是颜色会淡一些。和上面点光源一样。

    Distance:光线的强度,从最大值衰减到0,需要的距离。 默认为0,表示光不衰减,如果非0,则表示从光源的位置到Distance的距离,光都在线性衰减。到离光源距离Distance时,光源强度为0.

    Angle:聚光灯着色的角度,用弧度作为单位,这个角度是和光源的方向形成的角度。

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

    方向光:DirectionalLight = function ( hex, intensity )

    Intensity:光线的强度,默认为1。因为RGB的三个值均在0~255之间,不能反映出光照的强度变化,光照越强,物体表面就更明亮。它的取值范围是0到1。如果为0,表示光线基本没什么作用,那么物体就会显示为黑色。

    环境光+方向光

    材质及背景

    THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )

    Image:这是一个图片类型,基本上它由ImageUtils来加载,如下代码

    var image = THREE.ImageUtils.loadTexture(url)。

    Mapping:是一个THREE.UVMapping()类型,它表示的是纹理坐标。

    wrapS:表示x轴的纹理的回环方式,就是当纹理的宽度小于需要贴图的平面的宽度的时候,平面剩下的部分应该p以何种方式贴图的问题。

    wrapT:表示y轴的纹理回环方式。 magFilter和minFilter表示过滤的方式,这是OpenGL的基本概念,我将在下面讲一下,目前你不用担心它的使用。当您不设置的时候,它会取默认值,所以,我们这里暂时不理睬他。

    format:表示加载的图片的格式,这个参数可以取值THREE.RGBAFormat,RGBFormat等。THREE.RGBAFormat表示每个像素点要使用四个分量表示,分别是红、绿、蓝、透明来表示。RGBFormat则不使用透明,也就是说纹理不会有透明的效果。

    type:表示存储纹理的内存的每一个字节的格式,是有符号,还是没有符号,是整形,还是浮点型。不过这里默认是无符号型(THREE.UnsignedByteType)。暂时就解释到这里,有需要时,我们在仔细分析,或者给作者留言询问。

    anisotropy:各向异性过滤。使用各向异性过滤能够使纹理的效果更好,但是会消耗更多的内存、CPU、GPU时间。

    http://ife.baidu.com/note/detail/id/663

  • 相关阅读:
    scala 基本语法
    HBase架构深度解析
    scala 面向对象之 继承
    探索 ConcurrentHashMap 高并发性的实现机制
    Spark 源码和应用开发环境的构建
    spark内存管理详解
    2020软件工程第一次作业 L
    实验 1:Mininet 源码安装和可视化拓扑工具 L
    代码阅读方法
    生活中的小感悟
  • 原文地址:https://www.cnblogs.com/changningios/p/6506525.html
Copyright © 2011-2022 走看看