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