本文關(guān)鍵詞：WebGL入門指南，由筆耕文化傳播整理發(fā)布。

《WebGL入門指南》學習筆記三之three.js創(chuàng)建多重紋理，有需要的朋友可以參考下。

 

之前的demo看起來已經(jīng)很真了，當然是在大家，一步一步step by step的情況下，被各種初始化的代碼虐的體無完膚后的，才會有這么個感受。但是從一個對計算機圖形無感的人來看，這當然是很粗糙的，比如看起來比較‘平’光線好像，對比不正常，所以我們現(xiàn)在要使用多重紋理，在這個新的demo里面我們使用了以下三種貼圖

1.顏色貼圖

這個提供了最基本的顏色，比如之前demo我們使用的。

2.法線貼圖

法線貼圖的本質(zhì)是將一種額外的網(wǎng)格屬性編碼成RGB值存儲在一張位圖文件中，和光線的關(guān)系很大，光線入射到模型表面以后，發(fā)射光的方向就取決于法線方向。所以物體的明暗效果，就是由法線和光線決定的，而法線貼圖，就是他們的基礎(chǔ)色因為 漫反射下 漫反射光顏色 = 基礎(chǔ)色*入射光顏色*cosa 。這個基礎(chǔ)色就是法線貼圖中獲取的顏色。

3.高光貼圖

這個高光貼圖是指網(wǎng)格表面反光程度和反光量，和法線貼圖類似。

demo來自第三章earth-shader.js 建議大家自己對照著官方demo看，這里暫時不提供下載，后續(xù)會集體放出

 

// ConstructorEarthApp = function(){ Sim.App.call(this);}// Subclass Sim.App// 還是繼承Sim.AppEarthApp.prototype = new Sim.App();// Our custom initializer/** * [init description]自定義初始化對象 * @param {[type]} param [description] * @return {[type]} [description] * @author {[name]} Daniel Wong * @date {[date]} * @about {[關(guān)于]} */EarthApp.prototype.init = function(param){ // Call superclass init code to set up scene, renderer, default camera //這里已經(jīng)包括了必須的scene renderer camera Sim.App.prototype.init.call(this, param); // Create the Earth and add it to our sim // 初始化地球（在下面定義）傳遞給SIm框架 var earth = new Earth(); earth.init(); this.addObject(earth);// Let there be light! // 初始化光線，傳遞給地球 var sun = new Sun(); sun.init(); this.addObject(sun);}// Custom Earth class/** * [Earth description]自定義地球 * @author {[name]} Daniel Wong * @date {[date]} * @about {[關(guān)于]} */Earth = function(){ Sim.Object.call(this);}Earth.prototype = new Sim.Object();//以上為繼承自Sim.Object 和基于類的繼承有差別/** * [init description]創(chuàng)建一個群組（在里面創(chuàng)建地球這個整體包含的球和云） * @return {[type]} [description] * @author {[name]} Daniel Wong * @date {[date]} * @about {[關(guān)于]} */Earth.prototype.init = function(){ // Create a group to contain Earth and Clouds var earthGroup = new THREE.Object3D();// Tell the framework about our object this.setObject3D(earthGroup);//這兩句什么意思？？ // Add the earth globe and clouds // 添加球和云（兩者在下文定義）到框架里面 this.createGlobe(); this.createClouds();}/** * [createGlobe description]創(chuàng)建地球的球體 * @return {[type]} [description] * @author {[name]} Daniel Wong * @date {[date]} * @about {[關(guān)于]}以上屬于為了讓邏輯清晰的封裝，從這個函數(shù)開始才是干貨 * */Earth.prototype.createGlobe = function(){ // Create our Earth with nice texture - normal map for elevation, specular highlights //創(chuàng)建多重紋理，法線貼圖，高光貼圖 var surfaceMap = THREE.ImageUtils.loadTexture( "../images/earth_surface_2048.jpg" ); var normalMap = THREE.ImageUtils.loadTexture( "../images/earth_normal_2048.jpg" ); var specularMap = THREE.ImageUtils.loadTexture( "../images/earth_specular_2048.jpg" ); var shader = THREE.ShaderUtils.lib[ "normal" ], //法線貼圖著色器 uniforms = THREE.UniformsUtils.clone( shader.uniforms ); //用之前的法線貼圖著色器 創(chuàng)建一個uniforms對象 uniforms[ "tNormal" ].texture = normalMap; //將之前創(chuàng)建的多重貼圖 填充進uniforms對象 uniforms[ "tDiffuse" ].texture = surfaceMap; //法線貼圖著色器程序至少需要一張法線貼圖紋理來計算凹凸值 uniforms[ "tSpecular" ].texture = specularMap; uniforms[ "enableDiffuse" ].value = true; uniforms[ "enableSpecular" ].value = true; var shaderMaterial = new THREE.ShaderMaterial({ fragmentShader: shader.fragmentShader, //片元著色器 vertexShader: shader.vertexShader, //定點著色器 uniforms: uniforms, lights: true }); var globeGeometry = new THREE.SphereGeometry(1, 32, 32); // We'll need these tangents for our shader //計算切線，（默認情況three.js不會為幾何體計算切線），切線是用于計算法線貼圖值時必要的向量值 globeGeometry.computeTangents(); var globeMesh = new THREE.Mesh( globeGeometry, shaderMaterial ); // Let's work in the tilt // 繞x軸偏離一定角度，模擬地球黃道 globeMesh.rotation.x = Earth.TILT; // Add it to our group // 將這個球的globeMesh添加到框架里面 this.object3D.add(globeMesh); // Save it away so we can rotate it // 本身globeMesh為局部變量，無法在其它函數(shù)調(diào)用，在這里保存globeMesh到this對象，以供下面調(diào)用 this.globeMesh = globeMesh;}Earth.prototype.createClouds = function(){ // Create our clouds // 創(chuàng)建云首先是創(chuàng)建一個貼圖，使用蘭伯特光照材質(zhì) var cloudsMap = THREE.ImageUtils.loadTexture( "../images/earth_clouds_1024.png" ); var cloudsMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsMap, transparent:true } ); //創(chuàng)建云的網(wǎng)格 var cloudsGeometry = new THREE.SphereGeometry(Earth.CLOUDS_SCALE, 32, 32); cloudsMesh = new THREE.Mesh( cloudsGeometry, cloudsMaterial ); cloudsMesh.rotation.x = Earth.TILT; // Add it to our group this.object3D.add(cloudsMesh); // Save it away so we can rotate it // 存在this對象里面，供下面調(diào)用，實現(xiàn)一些計算（自轉(zhuǎn)） this.cloudsMesh = cloudsMesh;}/** * [update description]update這個程序運行時，每一幀都會調(diào)用這里的內(nèi)容 * @return {[type]} [description] * @author {[name]} Daniel Wong * @date {[date]} 2015-07-01T10:45:38+0800 * @about {[關(guān)于]} */Earth.prototype.update = function(){ // "I feel the Earth move..." // 使地球繞y軸旋轉(zhuǎn)，一定角度，因為每一幀都會調(diào)用，所以實現(xiàn)了自轉(zhuǎn)的效果 this.globeMesh.rotation.y += Earth.ROTATION_Y; // "Clouds, too..." //使地球繞y軸旋轉(zhuǎn)，一定角度，因為每一幀都會調(diào)用，，所以實現(xiàn)了自轉(zhuǎn)的效果 this.cloudsMesh.rotation.y += Earth.CLOUDS_ROTATION_Y; Sim.Object.prototype.update.call(this);//}Earth.ROTATION_Y = 0.001;Earth.TILT = 0.41;Earth.CLOUDS_SCALE = 1.005;Earth.CLOUDS_ROTATION_Y = Earth.ROTATION_Y * 0.95;// Custom Sun class/** * [Sun description]創(chuàng)建太陽光 * @author {[name]} Daniel Wong * @date {[date]} 2015-07-01T10:48:34+0800 * @about {[關(guān)于]} */Sun = function(){ Sim.Object.call(this);}Sun.prototype = new Sim.Object();Sun.prototype.init = function(){ // Create a point light to show off the earth - set the light out back and to left a bit // 創(chuàng)建一個點光源模擬太陽 var light = new THREE.PointLight( 0xffffff, 2, 100); light.position.set(-10, 0, 20);// Tell the framework about our object // 傳遞給框架 this.setObject3D(light); }

  本文關(guān)鍵詞：WebGL入門指南，由筆耕文化傳播整理發(fā)布。

本文編號：206315