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.