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属性