WebGL - глобус с ShaderMaterial - PullRequest
       71

WebGL - глобус с ShaderMaterial

0 голосов
/ 19 октября 2018

У меня проблема при повороте дневного шара, созданного 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. Когда я вращаю глобус, вращается только глобус, область солнца не перемещается.Вот пример , который я хочу сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...