1

嗨，我正在尝试使用三个贴图（漫反射法线和镜面反射）制作网格，由于某种原因，这里的网格不会渲染是我创建网格的代码。

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);
}
4

2 回答 2

2

嗨，我和你有同样的问题，自从写了一本非常好的 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-24T11:29:08.960 回答
0

使用此模式：

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

三.js r.56

于 2013-02-20T23:20:43.163 回答