mesh threejs 属性_WebGL和ThreeJs学习5--ThreeJS基本功能控件

Threejs

2017年6月6日

15:06

Stats:

stats.setMode(1);参数为0的时候，表示显示的是FPS界面，参数为1的时候，表示显示的是MS界面。Stats的begin和end函数本质上是在统计代码执行的时间和帧数，然后用公式fps=帧数/时间，就能够得到FPS。MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。

stats.domElement.style.position = 'absolute';stats的domElement表示绘制的目的地(DOM)

stats.domElement.style.left = '0px'

document.body.appendChild( stats.domElement );

stats.begin();代码前调用begin，代码执行后调用end()，能够统计出这段代码执行的平均帧数。

stats.end();

stats.update();

renderer :

new THREE.WebGLRenderer()；声明渲染器renderer

new THREE.WebGLDeferredRenderer();处理复杂光的延迟渲染器

new THREE.CanvasRenderer();

new THREE.WebGLDeferredRenderer({

width: window.innerWidth,

height: window.innerHeight,

scale: 1,

antialias: true,

tonemapping: THREE.FilmicOperator,

brightness: 2.5

});

renderer.setSize(width, height);设置渲染器的大小为窗口的内宽度，也就是内容区的宽度.

renderer.setClearColor(0xFFFFFF,1.0);

renderer.shadowMapEnabled = true;允许阴影射

renderer.render( scene, camera, renderTarget, forceClear )，renderTarget：渲染的目标，默认是渲染到前面定义的render变量中forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

requestAnimationFrame(render);循环渲染.

camera :

new THREE.PerspectiveCamera( fov, aspect, near, far )，camera.fov=45，类似于物体和camera的距离，值越小物体越近就越大，aspect实际窗口的纵横比，near不要设置为负值声明透视相机

new THREE.OrthographicCamera( left, right, top, bottom, near, far )，声明正交相机，定义一个视景体

camera.position= new THREE.Vector3(0,0,0);        camera.position.x=0；camera的xyz坐标位置

camera.up = new THREE.Vector3(0,1,0);        camera.up.x = 0;，camera的坐标系，y轴向上，即右手坐标系

camera.lookAt({x : 0, y : 0, z : 0 });或者camera.lookAt(scene.position);，camera面向的位置

camera.updateProjectionMatrix();

geometry:

new THREE.Geometry();声明几何物体.

new THREE.PlaneGeometry( 500, 300, 1, 1 );平面的四边形

new THREE.CircleGeometry(radius,segments,thetastarts,thetalength)平面圆

new THREE.RingGeometry

new THREE.ShapeGeometry()平面塑形

new THREE.Shape();           learning-threejs-master\chapter-05

THREE.BoxGeometry = function ( width, height, depth, widthSegments, heightSegments, depthSegments )         widthSegments：宽度分段份数，heightSegments：高度分段份数，depthSegments：长度分段份数

new THREE.SphereGeometry(4, 20, 20);圆

new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)声明圆柱体

new THREE.ConvexGeometry().凸面体

new THREE.IcosahedronGeometry()正20面体

new THREE.DodecahedronGeometry()

new THREE.LatheGeometry()扫描体

new THREE.OctahedronGeometry()正八面体

new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius3d, 20, 10)

new THREE.TorusKnotGeometry()环面纽结,可以画万花筒或者花

new THREE.TetrahedronGeometry()正四面体,锥形

new THREE.TorusGeometry(3, 1, 10, 10)圆环

new THREE.TubeGeometry(3, 1, 10, 10)管状几何体

new THREE.ExtrudeGeometry(3, 1, 10, 10)拉伸几何体

new THREE.ParamtericGeometry(3, 1, 10, 10)创建几何体

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

new THREETextGeometry(3, 1, 10, 10)文字几何体

geometry.clone()

geometry.vertices=vertices;