在上一篇介紹基於深度着色的 MeshDepthMaterial 材質時，提到可以將它與其他材質組合使用，從而可以創建出逐漸消失的效果。本篇就是要介紹這種用法，我們稱之爲聯合材質。這個很好理解，舉個例子，假設我們在前一篇示例的基礎上，把逐漸消失的效果改成爲，越近的地方月暗，越遠的地方越綠（而不是簡單的越亮），該如何辦到呢？其實，要達到這個效果，並不難。步驟大概如下：
首先，我們需要創建兩種材質。第一種便是上一篇提到的 MeshDepthMaterial 材質，對於此材質我們無需做什麼特別的動作；其次，我們需要創建另一種材質，比如我們聯合 MeshBasicMaterial 材質來實現，我們只需要把 color 顏色設成綠色，特別注意的是，同時必須把 transparent 屬性設置爲 true，且要指定 blending 屬性融合模式爲 THREE.MultiplyBlending（我們會在以後的章節中詳細討論各種可以使用的融合模式）；最後，我們利用 THREE.SceneUtils.createMultiMaterialObject() 方法把前兩種材質結合起來創建一種組合材質網格。其原理比較簡單，這個方法創建時，會生成一個網格組，即一個網格採用 MeshDepthMaterial 材質，另一個網格採用 MeshBasicMaterial 材質，兩個網格完全相同，只是材質不同而已。下面我們給出具體的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>示例 04.03 - CombinedMaterial</title>
<script src="../build/three.js"></script>
<script src="../build/js/controls/OrbitControls.js"></script>
<script src="../build/js/libs/stats.min.js"></script>
<script src="../build/js/libs/dat.gui.min.js"></script>
<script src="../jquery/jquery-3.2.1.min.js"></script>
<style>
body {
/* 設置 margin 爲 0，並且 overflow 爲 hidden，來完成頁面樣式 */
margin: 0;
overflow: hidden;
}
/* 統計對象的樣式 */
#Stats-output {
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<!-- 用於 WebGL 輸出的 Div -->
<div id="webgl-output"></div>
<!-- 用於統計 FPS 輸出的 Div -->
<div id="stats-output"></div>
<!-- 運行 Three.js 示例的 Javascript 代碼 -->
<script type="text/javascript">
var scene;
var camera;
var render;
var webglRender;
var canvasRender;
var controls;
var stats;
var guiParams;
var ground;
var cube;
var plane;
var sphere;
var meshMaterial;
var ambientLight;
var spotLight;
$(function() {
stats = initStats();
scene = new THREE.Scene();
webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗鋸齒
webglRender.setSize(window.innerWidth, window.innerHeight);
webglRender.setClearColor(0x000000, 1.0);
webglRender.shadowMap.enabled = true; // 允許陰影投射
render = webglRender;
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 30, 1000); // 2147483647
camera.position.set(-50, 40, 50);
var target = new THREE.Vector3(0, 0 , 0);
controls = new THREE.OrbitControls(camera, render.domElement);
controls.target = target;
camera.lookAt(target);
$('#webgl-output')[0].appendChild(render.domElement);
window.addEventListener('resize', onWindowResize, false);
ambientLight = new THREE.AmbientLight(0x000000);
scene.add(ambientLight);
/** 用來保存那些需要修改的變量 */
guiParams = new function() {
this.rotationSpeed = 0.02;
this.near = 30;
this.far = 200;
this.addCube = function() {
for (var i=0; i<100; i++) {
// 定義 cube 幾何
var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
// 定義網格材質
var cubeMaterial = new THREE.MeshDepthMaterial();
var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending});
meshMaterial = [colorMaterial, cubeMaterial];
// 定義 cube 網格
cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, meshMaterial);
cube.children[1].scale.set(0.99, 0.99, 0.99); // 縮小 cubeMaterial 的網格對象，避免閃爍問題
cube.castShadow = true;
cube.position.x = -60 + Math.round((Math.random() * 100));
cube.position.y = Math.round((Math.random() * 10));
cube.position.z = -100 + Math.round((Math.random() * 150));
// 默認加入 cube
scene.add(cube);
}
};
}
/** 定義 dat.GUI 對象，並綁定 guiParams 的幾個屬性 */
var gui = new dat.GUI();
gui.add(guiParams, 'addCube');
gui.add(guiParams, 'near', 0.1, 50.0).onChange(function(e) {
camera.near = e;
camera.updateProjectionMatrix();
});
gui.add(guiParams, 'far', 50, 1000).onChange(function(e) {
camera.far = e;
camera.updateProjectionMatrix();
});
guiParams.addCube();
renderScene();
});
/** 渲染場景 */
function renderScene() {
stats.update();
rotateMesh(); // 旋轉物體
requestAnimationFrame(renderScene);
render.render(scene, camera);
}
/** 初始化 stats 統計對象 */
function initStats() {
stats = new Stats();
stats.setMode(0); // 0 爲監測 FPS；1 爲監測渲染時間
$('#stats-output').append(stats.domElement);
return stats;
}
/** 當瀏覽器窗口大小變化時觸發 */
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render.setSize(window.innerWidth, window.innerHeight);
}
/** 旋轉物體 */
function rotateMesh() {
scene.traverse(function(mesh) {
if (mesh instanceof THREE.Mesh) {
mesh.rotation.x += guiParams.rotationSpeed;
mesh.rotation.y += guiParams.rotationSpeed;
mesh.rotation.z += guiParams.rotationSpeed;
}
});
}
</script>
</body>
</html> 此示例運行效果如下：
未完待續···