ThreeJS 高亮地球

时间:2020-05-21
本文章向大家介绍ThreeJS 高亮地球,主要包括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('\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');
  1. 将着色器赋给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
});
  1. 在地球外面再克隆一个稍大的球,把材质贴上
//然后创建一个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);
  1. 执行渲染
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);
}

附上效果图

原文地址:https://www.cnblogs.com/giser-s/p/12928631.html