最近有個(gè)頁面的效果需求，要實(shí)現(xiàn)一個(gè) 3D 地球的動(dòng)畫效果，在尋找效果參考時(shí)看到 didiGlobel 官網(wǎng)的效果很好，所以就想把這個(gè)效果拿下來參考一下。以下就是一個(gè)反譯+學(xué)習(xí)的過程記錄。

寫在前面

訪問 官方地址 可以看到下面的 3D 地球效果

image.png

獲取效果資源

首先查看一下官網(wǎng)實(shí)現(xiàn)的源碼

image.png

發(fā)現(xiàn)都是經(jīng)過混淆壓縮過的，但從中可以分析出采用的技術(shù)棧如下：

• React
• Threejs
• Shader

可以看到文件的可讀性很差，有4個(gè)js 文件，首先是要找到哪個(gè)文件是用來制作這個(gè)地球的。

我們回到 Elements 標(biāo)簽頁，找到對(duì)應(yīng)的 html 源碼

image.png

從上面可以看到，地球是渲染到 canvas 中，parent id 是 container，那么我們只要在混淆的源碼中，找到渲染方法就能確定哪個(gè) js 是主要制作地球的，這樣就能再進(jìn)行分析。

經(jīng)過關(guān)鍵詞查詢

image.png

找到了對(duì)應(yīng)的js，但由于這js 文件比較大，并且源碼可讀性太差，就需要借助一些工具來幫我們?nèi)シ醋g。

這里用的是 jsNice 反譯之后的效果還是可以的，有一定可讀性。

image.png

經(jīng)過整理重點(diǎn)的幾個(gè)函數(shù)如下：

init

  //網(wǎng)頁加載完畢后會(huì)被調(diào)用
  function init() {
    if (window.innerWidth < 960) {
      SCREEN_WIDTH = width();
      SCREEN_HEIGHT = width();
    } else {
      SCREEN_WIDTH = .454 * window.innerWidth;
      SCREEN_HEIGHT = .454 * window.innerWidth;
    }
    //創(chuàng)建一個(gè)場(chǎng)景（場(chǎng)景是一個(gè)容器，用于保存、跟蹤所要渲染的物體和使用的光源）
    scene = new THREE.Scene();

    //創(chuàng)建一個(gè)攝像機(jī)對(duì)象
    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'));

    //創(chuàng)建一個(gè)WebGL渲染器并設(shè)置其大小
    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;

    //將渲染的結(jié)果輸出到指定頁面元素中
    // 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
……

整體的代碼邏輯還是非常清晰的，實(shí)現(xiàn)上面主要是一些細(xì)節(jié)處理的非常好，比如點(diǎn)的角度、地球的3D著色等，給我們的需求實(shí)現(xiàn)提供了很大的參考價(jià)值。代碼抽后的效果如下：

image.png

然后有需要參考的可以直接去下載我整理的源碼來看，有需要交流的也可以直接留言給我。
https://github.com/baisheng/threejs-example.git