向WebGL/Three.js earth添加夜灯
我正在使用Three.js作为开发空间模拟器的框架，我正在尝试，但无法让夜灯正常工作 可在此处访问模拟器： 可以在此处找到运行以下代码段的页面： 示例页面的代码在这里。我甚至不知道从哪里开始。我试着渲染两个相隔几个单位的球体，一个靠近太阳（白天版），另一个（夜间版），但有很多问题，其中最重要的是它们开始以奇怪的十二面体方式相互重叠。我从中采纳了tDiffuse2的想法，但无法使其发挥作用向WebGL/Three.js earth添加夜灯,webgl,three.js,Webgl,Three.js,我正在使用Three.js作为开发空间模拟器的框架，我正在尝试，但无法让夜灯正常工作 可在此处访问模拟器： 可以在此处找到运行以下代码段的页面： 示例页面的代码在这里。我甚至不知道从哪里开始。我试着渲染两个相隔几个单位的球体，一个靠近太阳（白天版），另一个（夜间版），但有很多问题，其中最重要的是它们开始以奇怪的十二面体方式相互重叠。我从中采纳了tDiffuse2的想法，但无法使其发挥作用 <!doctype html> <html lang="en"> <
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - earth</title>
<meta charset="utf-8">
<script src="three.js/Detector.js"></script>
<script src="three.js/Three.js"></script>
</head>
<body>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var radius = 6371;
var tilt = 0.41;
var rotationSpeed = 0.02;
var cloudsScale = 1.005;
var SCREEN_HEIGHT = window.innerHeight;
var SCREEN_WIDTH = window.innerWidth;
var container, camera, scene, renderer;
var meshPlanet, meshClouds, dirLight, ambientLight;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
camera = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
camera.position.z = radius * 5;
scene.add( camera );
dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( -20, 0, 2 ).normalize();
scene.add( dirLight );
ambientLight = new THREE.AmbientLight( 0x000000 );
scene.add( ambientLight );
//initialize the earth
var planetTexture = THREE.ImageUtils.loadTexture( "textures/earth-day.jpg" ),
nightTexture = THREE.ImageUtils.loadTexture( "textures/earthNight.gif" ),
cloudsTexture = THREE.ImageUtils.loadTexture( "textures/clouds.gif" ),
normalTexture = THREE.ImageUtils.loadTexture( "textures/earth-map.jpg" ),
specularTexture = THREE.ImageUtils.loadTexture( "textures/earth-specular.jpg" );
var shader = THREE.ShaderUtils.lib[ "normal" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tNormal" ].texture = normalTexture;
uniforms[ "uNormalScale" ].value = 0.85;
uniforms[ "tDiffuse" ].texture = planetTexture;
uniforms[ "tDiffuse2" ].texture = nightTexture;
uniforms[ "tSpecular" ].texture = specularTexture;
uniforms[ "enableAO" ].value = false;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;
uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
uniforms[ "uSpecularColor" ].value.setHex( 0x333333 );
uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
uniforms[ "uShininess" ].value = 15;
var parameters = {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: uniforms,
lights: true,
fog: true
};
var materialNormalMap = new THREE.ShaderMaterial( parameters );
geometry = new THREE.SphereGeometry( radius, 100, 50 );
geometry.computeTangents();
meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
meshPlanet.rotation.y = 0;
meshPlanet.rotation.z = tilt;
scene.add( meshPlanet );
// clouds
var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent: true } );
meshClouds = new THREE.Mesh( geometry, materialClouds );
meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
meshClouds.rotation.z = tilt;
scene.add( meshClouds );
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.sortObjects = false;
renderer.autoClear = false;
container.appendChild( renderer.domElement );
};
function animate() {
requestAnimationFrame( animate );
render();
};
function render() {
// rotate the planet and clouds
var delta = clock.getDelta();
meshPlanet.rotation.y += rotationSpeed * delta;
meshClouds.rotation.y += 1.25 * rotationSpeed * delta;
//render the scene
renderer.clear();
renderer.render( scene, camera );
};
</script>
</body>
</html>
three.js webgl-地球
如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
var半径=6371；
var-tilt=0.41；
var旋转速度=0.02；
var CloudsCale=1.005；
var SCREEN_HEIGHT=window.innerHeight；
var SCREEN_WIDTH=window.innerWidth；
var容器、摄影机、场景、渲染器；
行星、云、dirLight、环境光；
var clock=新的三个时钟（）；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
场景=新的三个。场景（）；
scene.fog=new THREE.FogExp2（0x000000，0.00000025）；
摄像机=新的三个透视摄像机（25，屏幕宽度/屏幕高度，50，1e7）；
摄像机位置z=半径*5；
场景。添加（摄影机）；
dirLight=新的三方向光（0xffffff）；
dirLight.position.set（-20,0,2）.normalize（）；
场景。添加（dirLight）；
环境光=新的三个环境光（0x000000）；
场景。添加（环境光）；
//初始化地球
var planetTexture=THREE.ImageUtils.loadTexture（“textures/earth day.jpg”），
nightTexture=THREE.ImageUtils.loadTexture（“textures/earthNight.gif”），
cloudsTexture=THREE.ImageUtils.loadTexture（“textures/clouds.gif”），
normalTexture=THREE.ImageUtils.loadTexture（“textures/earth map.jpg”），
镜面反射纹理=三个.ImageUtils.loadTexture（“纹理/地球镜面反射.jpg”）；
var shader=THREE.ShaderUtils.lib[“normal”]；
var uniforms=THREE.UniformsUtils.clone（shader.uniforms）；
制服[“t正常”]。纹理=正常纹理；
制服[“非正常刻度”]。数值=0.85；
制服[“tDiffuse”]。纹理=平面纹理；
制服[“tDiffuse2”]。纹理=夜纹理；
制服[“特殊”]。纹理=镜面纹理；
制服[“enableAO”]。值=false；
制服[“enableDiffuse”]。值=真；
制服[“enableSpecular”]。值=真；
制服[“uDiffuseColor”].value.setHex（0xffffff）；
制服[“uSpecularColor”].value.setHex（0x333333）；
制服[“uAmbientColor”].value.setHex（0x000000）；
制服[“Ushiness”]。数值=15；
变量参数={
fragmentShader:shader.fragmentShader，
vertexShader:shader.vertexShader，
制服：制服，
灯光：是的，
雾：是的
};
var materialNormalMap=新的三个.ShaderMaterial（参数）；
几何=新的三个。球度法（半径，100，50）；
几何。计算切线（）；
meshPlanet=new THREE.Mesh（几何体、材质法线贴图）；
啮合行星旋转y=0；
啮合行星。旋转。z=倾斜；
场景。添加（网格行星）；
//云彩
var materialClouds=new THREE.MeshLambertMaterial（{color:0xffffff，map:cloudsTexture，transparent:true}）；
网格云=新的三个网格（几何体、材质云）；
meshClouds.scale.set（cloudsScale，cloudsScale，cloudsScale）；
旋转。z=倾斜；
场景。添加（网格云）；
renderer=new THREE.WebGLRenderer（{clearColor:0x000000，clearAlpha:1}）；
设置大小（屏幕宽度、屏幕高度）；
renderer.sortObjects=false；
renderer.autoClear=false；
container.appendChild（renderer.doElement）；
};
函数animate（）{
请求动画帧（动画）；
render（）；
};
函数render（）{
//旋转行星和云
var delta=clock.getDelta（）；
meshPlanet.rotation.y+=旋转速度*增量；
旋转.y+=1.25*旋转速度*delta；
//渲染场景
.clear（）；
渲染器。渲染（场景、摄影机）；
};
uniform sampler2D dayTexture;
uniform sampler2D nightTexture;
varying vec3 v_surfaceToLight; // assumes this gets passed in from vertex shader
varying vec4 v_normal; // assumes this gets passed in from vertex shader
varying vec2 v_texCoord; // assumes this gets passed in from vertex shader
void main () {
vec3 normal = normalize(v_normal);
vec3 surfaceToLight = normalize(v_surfaceToLight);
float angle = dot(normal, surfaceToLight);
vec4 dayColor = texture2D(dayTexture, v_texCoords);
vec4 nightColor = texture2D(nightTexture, v_texCoord);
vec4 color = angle < 0.0 ? dayColor : nightColor;
...
gl_FragColor = color * ...;
}
// sharpen the mix
angle = clamp(angle * 10.0, -1.0, 1.0);
// convert from -1 <-> +1 to 0 <-> +1
float lerp0To1 = angle * 0.5 + 0.5;
// mix between night and day
vec4 color = mix(nightColor, dayColor, lerp0to1);
body{margin:0；}
画布{宽度：100vw；高度：100vh；显示：块；} // convert from -1 <-> +1 to 0 <-> +1
float lerp0To1 = angle * 0.5 + 0.5;
// mix between night and day
vec4 color = mix(nightColor, dayColor, lerp0to1);
// sharpen the mix
angle = clamp(angle * 10.0, -1.0, 1.0);
// convert from -1 <-> +1 to 0 <-> +1
float lerp0To1 = angle * 0.5 + 0.5;
// mix between night and day
vec4 color = mix(nightColor, dayColor, lerp0to1);