最近有个页面的效果需求，要实现一个 3D 地球的动画效果，在寻找效果参考时看到 didiGlobel 官网的效果很好，所以就想把这个效果拿下来参考一下。以下就是一个反译+学习的过程记录。
写在前面
访问 官方地址 可以看到下面的 3D 地球效果
image.png
获取效果资源
首先查看一下官网实现的源码
image.png
发现都是经过混淆压缩过的，但从中可以分析出采用的技术栈如下：
- React
- Threejs
- Shader
可以看到文件的可读性很差，有4个js 文件，首先是要找到哪个文件是用来制作这个地球的。
我们回到 Elements 标签页，找到对应的 html 源码
image.png
从上面可以看到，地球是渲染到 canvas 中，parent id 是 container，那么我们只要在混淆的源码中，找到渲染方法就能确定哪个 js 是主要制作地球的，这样就能再进行分析。
经过关键词查询
image.png
找到了对应的js，但由于这js 文件比较大，并且源码可读性太差，就需要借助一些工具来帮我们去反译。
这里用的是 jsNice 反译之后的效果还是可以的，有一定可读性。
image.png
经过整理重点的几个函数如下：
init
//网页加载完毕后会被调用
function init() {
if (window.innerWidth < 960) {
SCREEN_WIDTH = width();
SCREEN_HEIGHT = width();
} else {
SCREEN_WIDTH = .454 * window.innerWidth;
SCREEN_HEIGHT = .454 * window.innerWidth;
}
//创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）
scene = new THREE.Scene();
//创建一个摄像机对象
camera = new THREE.PerspectiveCamera(30,
SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1e4);
camera.position.x = 30;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(new THREE.AmbientLight('#C60224'));
//创建一个WebGL渲染器并设置其大小
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
// renderer.setClearColor(new THREE.Color(0x00000)); //0xc0c0c0
// renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
//将渲染的结果输出到指定页面元素中
// document.getElementById("WebGL-output").appendChild(renderer.domElement);
container.appendChild(renderer.domElement);
container.addEventListener("mousedown", onMouseDown, false);
// container.addEventListener("touchstart", start, false);
// container.addEventListener("mouseenter", scroll, false);
container.addEventListener("mouseleave", onMouseOut, false);
container.addEventListener("mousemove", onMouseMove, false);
// window.addEventListener("click", check, false);
// container.addEventListener("touchend", onMouseWheel, false);
container.addEventListener("touchmove", move, false);
// window.addEventListener("resize", resize, false);
……
drawGlobe
// 画地球
function drawGlobe() {
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('dist/img/world.jpg');
const material = new THREE.MeshBasicMaterial({
map: texture,
overdraw: .5,
transparent: true,
side: THREE.DoubleSide
});
var sphereGeometry = new THREE.SphereGeometry(200, 40, 30);
mesh = new THREE.Mesh(sphereGeometry, material);
mesh.name = "scene";
mesh.rotation.y = .7 * Math.PI;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
}
drawCircle
function drawCircle(y, scale, center, angle, value, country) {
/** @type {null} */
var line = null;
var geometry = new THREE.CircleGeometry(15, 64);
var material = new THREE.LineBasicMaterial({
color: '#C60224'
});
geometry.vertices.shift();
line = new THREE.LineLoop(geometry, material);
line.position.set(y, scale, center);
line.rotation.x = THREE.Math.degToRad(angle);
line.rotation.y = THREE.Math.degToRad(value);
line.name = "hollow-circle " + country;
scene.add(line);
}
addLogo
function addLogo(px, py, pz, rx, ry, rz) {
const textureLoader = new THREE.TextureLoader()
// const texture = textureLoader.load('dist/img/world_image_nansha.jpg');
const texture = textureLoader.load('dist/img/mylogo.jpg');
let geometry = new THREE.CircleGeometry(20, 32);
var m = new THREE.MeshBasicMaterial({
map: texture,
overdraw: .5,
transparent: true,
side: THREE.DoubleSide
});
var r = new THREE.Mesh(geometry, m);
r.position.set(px, py, pz);
r.rotation.x = THREE.Math.degToRad(rx);
r.rotation.y = THREE.Math.degToRad(ry);
r.rotation.z = THREE.Math.degToRad(rz);
r.name = "logo";
scene.add(r);
}
parseNode
function parseNode(str, file, data, t, value, country) {
var group = new THREE.CircleGeometry(20, 32);
var m = new THREE.MeshBasicMaterial({
color: '#C60224',
transparent: true,
opacity: 0,
side: THREE.DoubleSide
});
var r = new THREE.Mesh(group, m);
r.position.set(str, file, data);
r.rotation.x = THREE.Math.degToRad(t);
r.rotation.y = THREE.Math.degToRad(value);
r.name = "large-circle target=" + country;
scene.add(r);
}
create
function create(array, html, id, angle, value, country) {
/**
* @return {undefined}
*/
function add() {
occlusion = occlusion + .01;
if (occlusion > 2) {
/** @type {number} */
occlusion = 1;
}
body.scale.x = occlusion;
body.scale.y = occlusion;
/** @type {number} */
body.material.opacity = type && type === country ? .3 : node && node === country ? .3 : 0;
requestAnimationFrame(add);
}
var bodyGeom = new THREE.CircleGeometry(5, 40);
var bodyMat = new THREE.MeshBasicMaterial({
color: '#C60224',
transparent: true,
opacity: 0,
side: THREE.DoubleSide
});
var body = new THREE.Mesh(bodyGeom, bodyMat);
body.position.set(array, html, id);
body.rotation.x = THREE.Math.degToRad(angle);
body.rotation.y = THREE.Math.degToRad(value);
/** @type {string} */
body.name = "twinklin-light target=" + country;
scene.add(body);
/** @type {number} */
var occlusion = 1;
add();
}
renderLine
// 画线
还有一些地球的控制代码
onMouseDown
onMouseOut
onMouseMove
move
……
整体的代码逻辑还是非常清晰的，实现上面主要是一些细节处理的非常好，比如点的角度、地球的3D着色等，给我们的需求实现提供了很大的参考价值。代码抽后的效果如下：
image.png
然后有需要参考的可以直接去下载我整理的源码来看，有需要交流的也可以直接留言给我。
https://github.com/baisheng/threejs-example.git
网友评论