三JS着色器庫 - 多紋理

您好我想與三個地圖（瀰漫正常和鏡面）網格和由於某種原因，網格將不會渲染這裏是我創建網格的代碼。三JS着色器庫 - 多紋理

function initGlobe() 
{ 
    var surfaceMap = {map:THREE.ImageUtils.loadTexture("images/earth_surface_2048.jpg")}; 
    var normalMap = {map:THREE.ImageUtils.loadTexture("images/earth_normal_2048.jpg")}; 
    var specularMap = {map:THREE.ImageUtils.loadTexture("images/earth_specular_2048.jpg")}; 

    var shader = THREE.ShaderLib[ "normalmap" ]; 
    var uniforms = shader.uniforms; 
    uniforms["tDiffuse"].value = surfaceMap; 
    uniforms["tNormal"].value = normalMap; 
    uniforms["tSpecular"].value = specularMap; 
    uniforms["enableDiffuse"].value = true; 
    uniforms["enableSpecular"].value = true; 

    var shaderMaterial = new THREE.ShaderMaterial(
     {fragmentShader:shader.fragmentShader,vertexShader:shader.vertexShader, 
     uniforms:uniforms, lights:true} 
    ); 
    // old ver - delete later var material = new THREE.MeshPhongMaterial(surfaceMap); 
    var geometry = new THREE.SphereGeometry(1,32,32); 
    geometry.computeTangents(); 
    return new THREE.Mesh(geometry, shaderMaterial); 
}

來源

2013-02-20 David Limkys

使用此模式：

var surfaceMap = THREE.ImageUtils.loadTexture("images/earth_surface_2048.jpg");

three.js所r.56

來源

2013-02-20 23:20:43 WestLangley

thx il下載r56遲了，但現在我正在與55，你可以sop任何outher的原因，這不會工作嗎？ – 2013-02-21 04:39:25

說它不會工作是不是很豐富。 – WestLangley 2013-02-21 05:13:02

那麼我得到沒有錯誤的網格只是不會渲染，如果我使用舊的表面網格之前它使用，所以問題必須在我提交的代碼。 – 2013-02-21 06:56:27

您好我有同樣的問題，因爲你，有自認爲很不錯的WEB GL很多的三個轉變編寫並運行的書籍。

我得到這個工作，也許你可以使用它，它是使用新的THREE.TextureLoader，我找不到，所以我做這個其他的例子：

function MultiLoader(TexturesToLoad, LastCall, ReturnObjects) { 
    if (TexturesToLoad.length == 0) return; 
    if (!ReturnObjects) ReturnObjects = []; 
    var loader = new THREE.TextureLoader() 
    //Pop off the latest in the , 
    //you could use shift instead if you want to read the array from 
    var texture = TexturesToLoad.shift() 

    loader.load(texture, 

    function (texture) { 
     ReturnObjects.push(texture); 
     if (TexturesToLoad.length > 0) { 
      MultiLoader(TexturesToLoad, LastCall, ReturnObjects) 
     } else { 

      LastCall(ReturnObjects) 
     } 

    }, 
    LoadProgress, 
    LoadError); 
} 
function LoadProgress(xhr) { 
    console.log(('Lodaing ' + xhr.loaded/xhr.total * 100) + '% loaded '); 
} 

function LoadError(xhr) { 
    console.log('An error happened '); 
}

可以調用像這個：

var TexturesToLoad = [] 
TexturesToLoad.push("images/earth_surface_2048.jpg") 
TexturesToLoad.push("images/earth_normal_2048.jpg"); 
TexturesToLoad.push("images/earth_specular_2048.jpg"); 
args = []; 
args.push(this); 
ReturnedMaterials = []; 
ReturnMaterials = []; 
var that = this; 
var LastCall = function (ReturnedMaterials) { 
    var surfaceMap = ReturnedMaterials[0]; //THREE.ImageUtils.loadTexture("images/earth_surface_2048.jpg"); 
    var normalMap = ReturnedMaterials[1]; //THREE.ImageUtils.loadTexture("images/earth_normal_2048.jpg"); 
    var specularMap = ReturnedMaterials[2]; //THREE.ImageUtils.loadTexture("images/earth_specular_2048.jpg"); 

    var decalMaterial = new THREE.MeshPhongMaterial({ 
     map: surfaceMap, 
     normalMap: normalMap, 
     normalScale: new THREE.Vector2(1, 1), 
     specularMap: specularMap, 
     transparent: false, 
     wireframe: false 
    }); 


    var globeGeometry = new THREE.SphereGeometry(100.0, SPHERE_SIDES, SPHERE_SIDES); 



mesh = new THREE.Mesh(globeGeometry, decalMaterial);

來源

2015-11-24 11:29:08 oleviolin

三JS着色器庫 - 多紋理

回答

相關問題