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);//二維平面幾何體寬高