threejs学习效果2.0

这一节将的是 材质

给上光源

var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 15, 5);
scene.add(light);

MeshBasicMaterial（网格基础材质）

MeshBasicMaterial 是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框。

//正交摄像机
var material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    opacity: 0.75
});
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);

MeshLambertMaterial（网格 Lambert 材质）

这种材质可以用来创建暗淡的并不光亮的表面。
无光泽表面的材质，无镜面高光。
这可以很好地模拟一些表面（如未经处理的木材或石头），但不能用镜面高光（如上漆木材）模拟光泽表面。
该材质非常易用，而且会对场景中的光源产生反应。

//正交摄像机
var material = new THREE.MeshLambertMaterial({
    color: 0xffff00,
//  emissive: 0xff0000
});
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);

MeshNormalMaterial（网格法向材质）

使用这种材质，每一面的颜色是由从该面向外指的法向量计算得到的。
它使得物体的每一个面的颜色都从该面向外指的法向量计算得到的。所谓法向量是指与面垂直的向量。法向量在 three.js 库中有着广泛的应用。它可以用来决定光的反射方向，在三维物体上映射材质时起到辅助作用。还可以在计算光照、阴影时提供有用信息，从而为物体表面像素上色。

//正交摄像机
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);

MeshPhongMaterial（网格 Phong 式材质）

这是一种考虑光照影响的材质，用于创建光亮的物体。
通过它可以创建一种光亮表面的材质效果。

//正交摄像机
 var material = new THREE.MeshPhongMaterial({
     color: 0xff0000,
     specular: 0xffff00,
     shininess: 100
});
var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material);//球体 半径为3 20段 8段

MeshLambertMaterial加载单个纹理（网格 Lambert 材质）

这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。
通过它可以创建一种光亮表面的材质效果。

//正交摄像机
 var texture = THREE.ImageUtils.loadTexture('../img/0.png', {}, function() {
     renderer.render(scene, camera);
});
var material = new THREE.MeshLambertMaterial({
    map: texture
});
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);

MeshFaceMaterial（网格面材质）

THREE.MeshFaceMaterial 并不是一种真正的材质，而更像是一种材质容器。它允许给几何体的每个面指定不同的材质。

//正交摄像机
var materials= [];
materials.push(new THREE.MeshBasicMaterial({
       map: THREE.ImageUtils.loadTexture('../img/' + 0 + '.png', {}, function() {
           renderer.render(scene, camera);
      }),
      overdraw: true
}));
materials.push(new THREE.MeshBasicMaterial({
       map: THREE.ImageUtils.loadTexture('../img/' + 1 + '.png', {}, function() {
           renderer.render(scene, camera);
      }),
      overdraw: true
}));
materials.push(new THREE.MeshBasicMaterial({
       map: THREE.ImageUtils.loadTexture('../img/' + 2 + '.png', {}, function() {
           renderer.render(scene, camera);
      }),
      overdraw: true
}));
materials.push(new THREE.MeshBasicMaterial({
       map: THREE.ImageUtils.loadTexture('../img/' + 3 + '.png', {}, function() {
           renderer.render(scene, camera);
      }),
      overdraw: true
}));
materials.push(new THREE.MeshBasicMaterial({
       map: THREE.ImageUtils.loadTexture('../img/' + 4 + '.png', {}, function() {
           renderer.render(scene, camera);
      }),
      overdraw: true
}));
materials.push(new THREE.MeshBasicMaterial({
       map: THREE.ImageUtils.loadTexture('../img/' + 5 + '.png', {}, function() {
           renderer.render(scene, camera);
      }),
      overdraw: true
}));
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5),new THREE.MeshFaceMaterial(materials));

MeshLambertMaterial（网格 Lambert 材质）

这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。
通过它可以创建一种光亮表面的材质效果。

//正交摄像机
var texture = THREE.ImageUtils.loadTexture('../img/chess.png', {}, function() {
     renderer.render(scene, camera);
});
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;//加边框
texture.repeat.set(5, 4);//x轴5排 y轴4排
var material = new THREE.MeshLambertMaterial({
    map: texture
});
                
var plane = new THREE.Mesh(new THREE.PlaneGeometry(12, 12), material);//二维平面几何体宽高