環境
- ThreeJS 107版本
- three.min.js
- OrbitControls.js
說明
網上地球高亮和輝光的效果很多，這里用GLSL做（沒學明白，網上東拼西湊拿來用了）。還有嘗試過用Render渲染，但是render生成的canvas會覆蓋整個瀏覽器窗口，把背景遮蓋住。
解決方案
-
創建球的過程參見"ThreeJS制作地球"
-
創建定點着色器和片元着色器
var vertexShader = [
'varying vec3 vNormal;',
'void main()',
'{',
'vNormal = normalize(normalMatrix * normal);',
'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
'}'
].join('\n');
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('\n');
- 將着色器賦給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
});
- 在地球外面再克隆一個稍大的球，把材質貼上
//然后創建一個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);
- 執行渲染
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);
}
附上效果圖
