旋转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。