ShaderMaterial渲染three.js

Question

我試圖重寫WebGL一書的example3-3：啟動並運行（ http://shop.oreilly.com/product/0636920024729.do ），而不使用sim.js。 但是我在紋理上遇到了問題。

我只是不能使用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();

我認為燈光不是問題，它看起來確實像是帶有紋理的東西。

Answer 1

我正在處理同一個問題，並且找到了解決方案，因為我正在處理本書中的相同示例。

您有幾個問題：

• THREE.ShaderUtils.lib現在為THREE.ShaderLib
• 為着色器使用“ normalmap”而不是“ normal”
• 沒有.texture對物業tNormal ， tDiffuse和tSpecular均勻的特性。 通過調整.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;