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

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

 

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

1.顏色貼圖

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

2.法線貼圖

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

3.高光貼圖

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

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

 

// ConstructorEarthApp = function(){ Sim.App.call(this);}// Subclass Sim.App// 還是繼承Sim.AppEarthApp.prototype = new Sim.App();// Our custom initializer/** * [init description]自定義初始化對(duì)象 * @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)建一個(gè)群組（在里面創(chuàng)建地球這個(gè)整體包含的球和云） * @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)于]}以上屬于為了讓邏輯清晰的封裝，從這個(gè)函數(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)建一個(gè)uniforms對(duì)象 uniforms[ "tNormal" ].texture = normalMap; //將之前創(chuàng)建的多重貼圖 填充進(jìn)uniforms對(duì)象 uniforms[ "tDiffuse" ].texture = surfaceMap; //法線貼圖著色器程序至少需要一張法線貼圖紋理來計(jì)算凹凸值 uniforms[ "tSpecular" ].texture = specularMap; uniforms[ "enableDiffuse" ].value = true; uniforms[ "enableSpecular" ].value = true; var shaderMaterial = new THREE.ShaderMaterial({ fragmentShader: shader.fragmentShader, //片元著色器 vertexShader: shader.vertexShader, //定點(diǎn)著色器 uniforms: uniforms, lights: true }); var globeGeometry = new THREE.SphereGeometry(1, 32, 32); // We'll need these tangents for our shader //計(jì)算切線，（默認(rèn)情況three.js不會(huì)為幾何體計(jì)算切線），切線是用于計(jì)算法線貼圖值時(shí)必要的向量值 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 // 將這個(gè)球的globeMesh添加到框架里面 this.object3D.add(globeMesh); // Save it away so we can rotate it // 本身globeMesh為局部變量，無法在其它函數(shù)調(diào)用，在這里保存globeMesh到this對(duì)象，以供下面調(diào)用 this.globeMesh = globeMesh;}Earth.prototype.createClouds = function(){ // Create our clouds // 創(chuàng)建云首先是創(chuàng)建一個(gè)貼圖，使用蘭伯特光照材質(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對(duì)象里面，供下面調(diào)用，實(shí)現(xiàn)一些計(jì)算（自轉(zhuǎn)） this.cloudsMesh = cloudsMesh;}/** * [update description]update這個(gè)程序運(yùn)行時(shí)，每一幀都會(huì)調(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)，一定角度，因?yàn)槊恳粠紩?huì)調(diào)用，所以實(shí)現(xiàn)了自轉(zhuǎn)的效果 this.globeMesh.rotation.y += Earth.ROTATION_Y; // "Clouds, too..." //使地球繞y軸旋轉(zhuǎn)，一定角度，因?yàn)槊恳粠紩?huì)調(diào)用，，所以實(shí)現(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)建一個(gè)點(diǎn)光源模擬太陽 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ā)布。

本文編號(hào)：206315