• threejs物体


    几何体:是三维空间的点集和将这些点连接起来的面

    网格对象的属性和方法:

    position 相对坐标轴平移   cube.posiiton.x或者cube.position.set(x,y,z)

    rotation 旋转   cube.rotation.x或者cube.rotation.set(x,y,z)

    scale 放大

    translateX 沿着X坐标轴平移

    translateY 沿着Y坐标轴平移

    translateZ 沿着Z坐标轴平移

    visible 如果是false的话纹理不会显示

    一.纹理

    MeshBasicMaterial  网格基础材质 没有阴影

    MeshDepathMaterial 网格深度材质   使用这种材质的物体,外光不是由光照或某个材质属性决定的,而是由物体到摄像机的距离决定的,可以将这种材质和其他材质结合使用

                       从而很容易的创建出慢慢消失的效果

    MeshNormalMaterial 网格法向材质

    MeshLambertMaterial 网格Lambert材质 对光源有反应 创建暗淡并不光亮的表面

    MeshPhongMaterial 网格Phong式材质 对光源有反应

    MeshStandardMateria网格标准材质

    MeshPhysicalMaterial网格物理材质

    MeshToomMaterial网格卡通材质

    ShadowMaterial阴影材质

    ShaderMaterial着色器材质

    LineBasicMaterial直线基础材质

    LineDashMaterial虚线材质

    1. MeshBasicMaterial 

    color 颜色

    wireframe线框

    wireframeLinewidthx 线框宽度

    wireframeLinecap 线框线段端点

    wireframeLingjoin 线框线段连接点

    2.MeshLambertMaterial  创建暗淡并不光亮的表面

    color颜色

    emissive 自发光

    3.MeshPhongMaterial 创建光亮的材质

    color 颜色

    emissive自发光

    specular高光颜色

    shiness高光度

    4.MeshStandardMateria

    这种材质使用更加正确的物理计算来决定物体表面如何与场景中的光源互动

    metalness金属感程度

    roughness粗糙程度

    5.MeshPhysicalMaterial

    clearCost 清漆

    clearCoatRoughness清漆粗糙程度

    reflectivity反光度

    6.ShaderMaterial

    定义着色器

    wireframe

    wireframeLinewidth

    linewidth

    shading

    vertexColors

    fog

    7.LineBasicMaterial

    color 颜色

    linewidth 线段宽度

    linecap 

    linejoin

    vetexColors 给每个顶点指定颜色

    8.LineDashedMaterial

    scale

    dashSize虚线段的长度

    gapSize虚线间隔的宽度

     9.纹理应用在网格

    var textureloader=new THREE.TexttureLoader()
    textureloader.load('/jpg',function(){}) 图片格式png gif jpeg
    

     使用凹凸贴图创建褶皱

    目的是给材质添加厚度

    var cubeMaterial=new THREE.MeshStandarMaterial({
       map:textureLoader.load('/jpg'),
       bumpMap:textureLoader.load('/jpg'),
       metalness:0.2,
       roungness:0.07  
    }) 

    使用法向量贴图创建更加细致的凹凸和褶皱 

    var cubeMaterial=new THREE.MeshStandarMaterial({
       map:textureLoader.load('/jpg'),
       normalMap:textureLoader.load('/jpg'),
       metalness:0.2,
       roungness:0.07  
    }) 
    

      

    二 物体

    1.THREE.PlabeGeometry 平面

    width

    height

    widthSegments 宽度段数

    heightSegments 高度段数

    2.THREE.CircleGeometry 圆形

    3.THREE.ShapeGeometry自定义图形

    shapes

    option

    THREE.Shape一下api:

    moveTo 

    lineTo

    quadraticCurveTo

    bezierCurveTo

    4.THREE.BoxGeometry

    矩形 宽 高 深度

    5.THREE.SphereGeometry

    三维球体

    6.THREE.CylinderGeometry

    圆柱

    7.THREE.ConeGeometry

    圆锥

    8.THREE.TorusGeometry

    9.THREE.TourusKnotGeometry

    10,THREE.PolyhedronGeometry

    11.THREE.lcosahedronGeometry

    12.THREE.tetrahedronGeometry

    13.THREE.OctahedronGeometry

    14.THREE.DodecahedeonGeometry

    15.THREE.RxtrudeGeometry

    通过拉伸创建图形

    shapes

    amount

    bevelThickness

    bevelSize

    bevelSegments

    bevelEnabled

    curveSegements

    step

    extrudePath

    uvGenerator

    16.THREE.TubeGemetry

    沿着一条三维的样条曲线拉伸出一根管

    path

    segments

    radius

    radiusSegments

    closed

    17.THREE.TextGements

    size

    height

    font

    bevelThickness

    bevelSize

    bevelSegments

    bevelEnabled

    curveSegments

    steps

    extrudePath

    uvGenerator

    如果想在threejs中使用中文,就需要下载中文的字体,然后在http://gero3.github.io/facetype.js这个网站转换字体就可以了,转换之后,使用THREE.FontLoadery加载字体,并将字体对象赋给THREE.TextGeometry的font属性

  • 相关阅读:
    ajax函数说明
    rem移动端适配
    使用微信打开网页,弹出软键盘时遇到的兼容问题
    jquery
    今天才发现博客园加密了的文章其实还是能看到的,我tm哪里还敢在这上面写东西,吓死爹了。
    Solr的原理及在项目中的使用实例
    Lucene入门
    oracle包package的使用
    oracle自定义split分割函数
    Zookeeper到底是干嘛的
  • 原文地址:https://www.cnblogs.com/GainLoss/p/15968022.html
Copyright © 2020-2023  润新知