1

我正在尝试在不使用 sim.js的情况下重写 WebGL：Up and running ( http://shop.oreilly.com/product/0636920024729.do ) 一书的 example3-3。但是我遇到了纹理问题。

我只是无法使用 ShaderMaterial 使其工作以获得正常和镜面效果，我与 MeshPhongMaterial 几乎相同，它工作正常，但现在这是我使用 ShaderMaterial 得到的渲染：http://imgur .com/vts9X3k

这是我的代码：

var camera,
    scene,
    renderer,
    sunLight,
    earthMesh,
    cloudsMesh,
    earthGroup;

function init() {
    var fieldOfView = 60,
        aspectRatio = window.innerWidth/window.innerHeight,
        near = 1,
        far = 4000;

    // Renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Scene
    scene = new THREE.Scene();

    // Earth group
    earthGroup = new THREE.Object3D();

    // Camera
    camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, near, far);
    camera.position.set( 0, 0, 3.5 );
    scene.add(camera);

    // Earths creation
    var surfaceMap = THREE.ImageUtils.loadTexture( "earth_surface_2048.jpg" );
    var normalMap = THREE.ImageUtils.loadTexture( "earth_normal_2048.jpg" );
    var specularMap = THREE.ImageUtils.loadTexture( "earth_specular_2048.jpg" );

    var shader = THREE.ShaderUtils.lib[ "normal" ],
        uniforms = THREE.UniformsUtils.clone( shader.uniforms );

    uniforms[ "tNormal" ].texture = normalMap;
    uniforms[ "tDiffuse" ].texture = surfaceMap;
    uniforms[ "tSpecular" ].texture = specularMap;
    uniforms[ "enableDiffuse" ].value = true;
    uniforms[ "enableSpecular" ].value = true;

    var shaderMaterial = new THREE.ShaderMaterial({
        fragmentShader: shader.fragmentShader,
        vertexShader: shader.vertexShader,
        uniforms: uniforms,
        lights: true
    });

    var geometry = new THREE.SphereGeometry(1, 32, 32);
    geometry.computeTangents();

    earthMesh = new THREE.Mesh( geometry, shaderMaterial );

    earthGroup.add(earthMesh);

    // Clouds
    var cloudsMap = THREE.ImageUtils.loadTexture( "earth_clouds_1024.png" );
    var cloudsMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff,
        map: cloudsMap,
        transparent:true 
    });

    var cloudsGeometry = new THREE.SphereGeometry(1.1, 32, 32);

    cloudsMesh = new THREE.Mesh( cloudsGeometry, cloudsMaterial );

    earthGroup.add(cloudsMesh);

    earthGroup.rotation.x = 0.5;

    // Add earth and clouds to the scene
    scene.add(earthGroup);

    // Lights
    // Basic ambient light
    scene.add( new THREE.AmbientLight("rgb(35,35,35)") ); 

    // Sun light
    sunLight = new THREE.PointLight( "rgb(255,230,200)", 2, 100 );
    sunLight.position.set(-10, 0, 20);
    scene.add(sunLight);

    // Render
    run();
}

function run() {
    // Render
    renderer.render( scene, camera );

    // Rotating earth and clouds for the next frame
    earthMesh.rotation.y += 0.005;
    cloudsMesh.rotation.y += 0.003;

    // Ask for another frame
    requestAnimationFrame(run);
}

init();

我不认为是灯光的问题，它看起来真的是纹理的问题。

4

1 回答 1

1

我刚刚处理了同样的问题并找到了解决方案，因为我正在研究书中的相同示例。

你有几个问题：

  • THREE.ShaderUtils.lib就是现在THREE.ShaderLib
  • 为您的着色器使用“法线贴图”而不是“正常”
  • 制服的 、 和 属性上没有属性.texture。通过调整属性直接设置纹理。tNormaltDiffusetSpecular.value

因此，受影响的代码应如下所示：

var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "tNormal" ].value = normalMap;
uniforms[ "tDiffuse" ].value = surfaceMap;
uniforms[ "tSpecular" ].value = specularMap;

uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;
于 2014-01-09T23:48:41.387 回答