ThreeJS 高亮地球

环境

• ThreeJS 107版本
• three.min.js
• OrbitControls.js

说明

网上地球高亮和辉光的效果很多，这里用GLSL做（没学明白，网上东拼西凑拿来用了）。还有尝试过用Render渲染，但是render生成的canvas会覆盖整个浏览器窗口，把背景遮盖住。

解决方案

1. 创建球的过程参见"ThreeJS制作地球"

2. 创建定点着色器和片元着色器

var vertexShader = [
'varying vec3 vNormal;',
'void main()',
'{',
'vNormal = normalize(normalMatrix * normal);',
'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
'}'
].join('
');
var fragmentShader2 = [
'uniform float c;',
'uniform float p;',
'varying vec3 vNormal;',
'void main()',
'{',
'float intensity = pow(c - dot(vNormal, vec3(0.0, 0.0, 1.0)), p);',
'gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0) * intensity;',
'}'
].join('
');

3. 将着色器赋给ShaderMaterial材质

var material_glow = new THREE.ShaderMaterial({
fragmentShader: fragmentShader2,
vertexShader: vertexShader,
uniforms: {
"c": {
type: "f",
value: _cValue
},
"p": {
type: "f",
value: _pValue
}
},
depthWrite: false,
side: THREE.BackSide
});

4. 在地球外面再克隆一个稍大的球，把材质贴上

//然后创建一个object，类型为Mesh。他的参数使我们之前创的几何模型以及材料
var sphere = new THREE.Mesh(new THREE.SphereGeometry(_earthOptions.earthBallSize + _pBuffer, 50, 50).clone(), material_glow);
sphere.position.set(0, 0, 0);
scene.add(sphere);

5. 执行渲染

render();
// 执行函数
function render() {
if (handle) {
cancelAnimationFrame(handle);
}
//是否开启了辉光渲染，如开启则开启辉光渲染
if (composer) {
composer.render();
}
renderer.clearDepth();
//自转
scene.rotation.y += _earthOptions.autorotationSpeed ? _earthOptions.autorotationSpeed : 0;
renderer.render(scene, camera);
orbitcontrols.update();
handle = requestAnimationFrame(render);
}

附上效果图