三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着色器库 - 多纹理

回答

相关问题