个人感受
今天吃了很多概念,基本明了,做了一下js的面试题,打脸啪啪响,后面要加强笔试题和面试题的刷题。今天es5基本看完,明天开始看es6同时结合着题目去理解和应用。3js今天也不再犯迷糊了,后边练习一些小场景,等熟悉3js的代码和基础概念之后再去看后边的内容(不要被那么多api搞头昏,把基本的常用的用起来,记住一些有用的复杂api就好)
3JS API 速查
几何体相关
BoxGeometry
BoxGeometry(width, height,depth, widthSegments, heightSegments, depthSegments)
参数名 |
简述 |
注意事项 |
height |
|
|
width |
|
|
depth |
|
|
widthSegments |
分割面数量 |
|
heightSegments |
|
|
depthSegments |
|
|
ConeGeometry
CircleGeometry(radius, segments, thetaStart, thetaLength)
参数名 |
简述 |
注意事项 |
radius |
半径 |
|
segments |
段数 |
最小值为3 |
thetaStart |
第一段起始角度 |
|
thetaLength |
扇形中心角 |
|
CylinderGeometry
CylinderGeometry(radiusTop, radiusBottom, height, radialSegments , heightSegments, openEnded,thetaStart, thetaLength)
参数名 |
简述 |
注意事项 |
radiusTop |
顶部半径 |
|
radiusBottom |
底部半径 |
|
height |
高度 |
|
radialSegments |
周围分段面数 |
|
heightSegments |
高度面的行数 |
? |
openEnded |
圆柱两端是否像是 |
|
thetaStart |
第一段起始角度 |
|
thetaLength |
圆形扇形的中心角 |
|
SphereGeometry
SphereGeometry(radius, widthSegments, heightSegments : phiStart, phiLength, thetaStart, thetaLength)
参数名 |
简述 |
注意事项 |
radius |
半径 |
|
widthSegments |
水平线段数量 |
|
heightSegments |
垂直线段数量 |
|
phiStart |
水平渲染起始角度 |
|
phiLength |
水平渲染角度大小 |
|
thetaStart |
垂直渲染起始角度 |
|
thetaLength |
垂直渲染角度大小 |
|
PlaneGeometry
PlaneGeometry(width, height, widthSegments, heightSegments)
参数名 |
简述 |
注意事项 |
width |
X尺寸 |
|
height |
Y尺寸 |
|
widthSegments |
X分段数 |
|
heightSegments |
Y分段数 |
|
TorusGeometry
TorusGeometry(radius, tube, radialSegments, tubularSegments , arc)
参数名 |
简述 |
注意事项 |
radius |
|
|
tube |
|
|
radialSegments |
|
|
tubularSegments |
|
|
arc |
|
|
材质相关
MeshBasicMaterial
MeshNormalMaterial
LineBasicMaterial
LineDashedMaterial
MeshLambertMaterial
MeshPhongMaterial
MeshStandardMaterial
光源相关
AmbientLight
DirectionalLight
PointLight
SpotLight
HemisphereLight
相机相关
正交相机
OrthographicCamera( left,right,top,bottom,near,far )
透视相机
PerspectiveCamera( 45, width / height, 1, 1000)
杂项1
Color
- new THREE.Color();
- THREE.Color( 0xff0000 );
- new THREE.Color("rgb(255, 0, 0)");
- new THREE.Color("rgb(100%, 0%, 0%)");
- new THREE.Color( 1, 0, 0 );
Vector2
- new THREE.Vector2( 0, 1 );
Vector3
- new THREE.Vector3( 0, 1, 0 );
vector4
- new THREE.Vector4( 0, 1, 0, 0 );
3JS学习计划,花三到五天反复练习这些基础的api,熟悉之后再进入其他概念的学习
近期评论