1

こんにちは私は3つのマップ（通常と鏡面反射を拡散）でメッシュを作成しようとしていますが、何らかの理由でメッシュがレンダリングされないのは、メッシュを作成するコードです。

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 の立ち上げと実行に関する本が書かれて以来、多くの 3 つの変更があります。

私はこれを機能させました。多分あなたはそれを使うことができます。他の例を見つけることができなかった新しい 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" );

three.js r.56

于 2013-02-20T23:20:43.163 に答える