WebGL-具有ShaderMaterial的地球仪

时间:2018-10-19 04:25:38

标签: three.js glsl coordinate-transformation

旋转ShaderMaterial创建的昼夜地球仪时遇到问题。 当我旋转地球仪时,白天区域没有移向太阳方向。

// Globe Sun setup
    start_time = getUTCTime() * rotateTime;

    var sunDirection = new THREE.Vector3(1.0, 0.0, 0.0);
    sunDirection.x = Math.cos(start_time);
    sunDirection.y = 0.0;
    sunDirection.z = Math.sin(start_time);

    uniforms = {
        sunDirection: {type: "v3", value: sunDirection},
        dayTexture: {type: "t", value: new THREE.TextureLoader().load("globe/img/earth-day.jpg")},
        nightTexture: {type: "t", value: new THREE.TextureLoader().load("globe/img/earth-night.jpg")}
    };

    var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
    });

    var geometry = new THREE.SphereGeometry(globeRadius, 64, 64);

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

这是GSTL代码

<script id="fragmentShader" type="x-shader/x-fragment">
    uniform sampler2D dayTexture;
    uniform sampler2D nightTexture;

    uniform vec3 sunDirection;

    varying vec2 vUv;
    varying vec3 vNormal;

    void main( void ) {
        vec4 dayColor = texture2D(dayTexture, vUv);
        vec4 nightColor = texture2D(nightTexture, vUv);

        // compute cosine sun to normal so -1 is away from sun and +1 is toward sun.
        float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);

        // sharpen the edge between the transition
        cosineAngleSunToNormal = clamp(cosineAngleSunToNormal * 10.0, -1.0, 3.0);

        // convert to 0 to 1 for mixing
        float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;

        // Select day or night texture based on mix.
        vec4 color = mix(nightColor, dayColor, mixAmount);

        gl_FragColor = color;
    }
</script>

<script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    varying vec3 vNormal;

    void main()
    {
        vUv = uv;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        vNormal = normalMatrix * normal;
        gl_Position = projectionMatrix * mvPosition;
    }
</script>

白天区域将根据当前UTC时间设置。当我旋转地球仪时,仅地球仪会旋转,太阳区不会移动。 这是我要喜欢的example

0 个答案:

没有答案