Three.js学习创建物体

在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。

 

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth,materials, sides)创建立方体

 

渲染函数的原型如下：

render( scene, camera,renderTarget, forceClear )

各个参数的意义是：

scene：前面定义的场景

camera：前面定义的相机

renderTarget：渲染的目标，默认是渲染到前面定义的render变量中

forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

实时显示：

requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的游戏循环了。

function animate() {

render();

requestAnimationFrame(animate );

}

 

function initObject() {

 

                var geometry = newTHREE.Geometry();

                var material = newTHREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );

                var color1 = new THREE.Color(0x444444 ), color2 = new THREE.Color( 0xFF0000 );

 

                // 线的材质可以由2点的颜色决定

                var p1 = new THREE.Vector3(-100, 0, 100 );

                var p2 = newTHREE.Vector3(  100, 0, -100 );

                geometry.vertices.push(p1);

                geometry.vertices.push(p2);

                geometry.colors.push( color1,color2 );

 

                var line = new THREE.Line(geometry, material, THREE.LinePieces );

                scene.add(line);

            }

 

1、 x\y\z轴的原点位置是固定位于中央的吗

2、 点的坐标的值大小随便定义还是根据camera来定义，为什么不是百分数。

 

position，不用说也知道是相机的位置。如果吧人头比作相机，那么就是人头的中心的位置

up是头顶的方向，大多数时候，是朝天空的。少部分时候，是朝床头的

lookat是眼睛，看的方向，或者说是眼睛的聚焦点，不要告诉我，你眼睛可以同时聚焦2个点。

最后要说明的是 up 和lookat这两个方向必须垂直，无论怎么设置，他们必须互相垂直。不然相机看到的结果无法预知。

上面的问题很误导人，position在英文中是位置的意思，所以不要怀疑up是位置

另外，相机没有朝向的说法，只有lookat，就是它看到的那一个聚焦点，就像眼睛看到的聚焦点一样。

 

关于物体的位置设定和移动修改：mesh.position.x-=1;

 

物体位置的变化：

functioninitTween()

{

newTWEEN.Tween( mesh.position)

.to( { x: -400 }, 3000 ).repeat( Infinity ).start();

}

再加上tween.update()即可

 

function animation()

{

    renderer.render(scene, camera);

   requestAnimationFrame(animation);

    stats.update();//更新显示帧数

    TWEEN.update();//更新显示mesh的position

}

 

 

正投影相机的特点是远近高低比例都相同

OrthographicCamera( left, right, top, bottom,near, far )

var camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

scene.add( camera );

 

物体的反光和材料：

光：

DirectionalLight /PointLight/SpotLightAffects objects using MeshLambertMaterial or MeshPhongMaterial.

var light = newTHREE.HemisphereLight(天空颜色,地面颜色, 光线强度);

SpotLight( 颜色,强度, 距离, 角度, 半影范围, 衰落强度)

PointLight( 颜色, 强度, 距离, 衰落强度 )

材料：

MeshLambertMaterial( parameters)

color — Line color inhexadecimal. Default is 0xffffff. 颜色

map — Sets the texture map.Default is null         纹理设置

lightMap — Set light map.Default is null.                   光贴图

lightMapIntensity — Set lightmap intensity. Default is 1.光强度

aoMap — Set ao map. Default isnull.                                 环境光散射贴图

aoMapIntensity — Set ao mapintensity. Default is 1.        

emissive - Set emissive color.Default is 0x000000.     发射性光颜色，缺省为黑，基本不会被别的光线影响的颜色。

emissiveMap — Set emissive map.Default is null.

emissiveIntensity — Set emissivemap intensity. Default is 1.

specularMap — Set specular map.Default is null. 高光贴图，只会影响环境贴图对表面的影响

alphaMap — Set alpha map.Default is null.  Alpha贴图是一个灰度纹理，控制整个表面的不透明度（黑色：完全透明；白色：完全不透明）。默认为空

envMap — Set env map. Default isnull.     环境贴图

combine — Set combine operation.Default is THREE.MultiplyOperation.选择环境贴图和表面颜色的组合方式可选：THREE.Multiply (default), THREE.MixOperation,THREE.AddOperation.

reflectivity — Set reflectivity.Default is 1. 环境地图对表面的影响度

refractionRatio — Set refractionratio. Default is 0.98. 对环境地图的折射率

fog — Define whether thematerial color is affected by global fog settings. Default is false. 是否受WebGLrenderer的雾化的影响

wireframe — Render geometry aswireframe. Default is false (i.e. render as smooth shaded).  是否显示三角形的边缘而不是表面

wireframeLinewidth — Controlswireframe thickness. Default is 1.

wireframeLinecap — Define appearanceof line ends. Default is 'round'.

wireframeLinejoin — Defineappearance of line joints. Default is 'round'.

vertexColors — Define how thevertices gets colored. Default is THREE.NoColors.定义顶点如何着色。

skinning — Define whether thematerial uses skinning. Default is false.

morphTargets — Define whetherthe material uses morphTargets. Default is false.

morphNormals — Define whetherthe material uses morphNormals. Default is false.

 

 

MeshPhongMaterial( parameters )

color — geometry color inhexadecimal. Default is 0xffffff.

specular — Set specular color.Default is 0x111111 .高光颜色

shininess — Set shininessDefault is 30. 光闪亮度

map — Set texture map. Defaultis null.

lightMap — Set light map.Default is null.

lightMapIntensity — Set lightmap intensity. Default is 1.

aoMap — Set ao map. Default isnull.

aoMapIntensity — Set ao mapintensity. Default is 1.

emissive - Set emissive color.Default is 0x000000.

emissiveMap — Set emissive map.Default is null.

emissiveIntensity — Set emissivemap intensity. Default is 1.

bumpMap — Set bump map. Defaultis null. 创建一个凹凸贴图的纹理。黑色和白色的值映射到和光线有关的感知深度。凹凸并不会影响物体的几何形状，只影响照明。如果一个正常的地图被定义，这将被忽略

bumpScale — Set bump map scale.Default is 1.凹凸纹理对材料的影响程度，0-1

normalMap — Set normal map.Default is null. 创建一个正常贴图纹理。RGB值影响每个像素片段的表面，改变颜色的点亮方式。法线贴图不改变表面的实际形状，只有光线。

normalScale — Set normal mapscale. Default is (1, 1).

displacementMap — Setdisplacement map. Default is null. 替代贴图影响网格顶点的位置。不像其他的贴图只影响材料的光线和阴影，替换的顶点可以投射阴影，阻止其他对象，否则作为真正的几何。位移纹理是其中每个像素（白色是最高的）的值被映射到网格的顶点并且重新定位其的网格的图像。

displacementScale — Setdisplacement scale. Default is 1.

displacementBias — Setdisplacement offset. Default is 0.

specularMap — Set specular map.Default is null.

alphaMap — Set alpha map.Default is null.

envMap — Set env map. Default isnull.

combine — Set combine operation.Default is THREE.MultiplyOperation.

reflectivity — Set reflectivity.Default is 1.

refractionRatio — Set refractionratio. Default is 0.98.

fog — Define whether thematerial color is affected by global fog settings. Default is true.

shading — Define shading type.Default is THREE.SmoothShading.

wireframe — render geometry aswireframe. Default is false.

wireframeLinewidth — Linethickness. Default is 1.

wireframeLinecap — Defineappearance of line ends. Default is 'round'.

wireframeLinejoin — Defineappearance of line joints. Default is 'round'.

vertexColors — Define how thevertices gets colored. Default is THREE.NoColors.

skinning — Define whether thematerial uses skinning. Default is false.

morphTargets — Define whetherthe material uses morphTargets. Default is false.

morphNormals — Define whetherthe material uses morphNormals. Default is false.