4dkankan_official/src/components/aboutBg/index.vue

<template>
<div>
  <div id="bg_box"></div>
</div>
</template>

<script>

import * as THREE from 'three'
import {TweenMax, TweenLite, TimelineMax} from 'gsap'

var windowLoad = (function () {
  return function (cb) {
    setTimeout(cb)
  }
})()

export default {
  mounted () {
    /* eslint-disable */
    var sctop = 0
    var sctopSw = false
    var indexSw = true
    windowLoad()

    setTimeout(() => {
      sctop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      window.addEventListener('scroll', function () {
        sctop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        if (sctop > winH / 3) {
          if (!sctopSw && document.querySelector('#bg_box')) document.querySelector('#bg_box').style.opacity = 0.5
          sctopSw = true
        } else {
          if (sctopSw && document.querySelector('#bg_box')) document.querySelector('#bg_box').style.opacity = 1
          sctopSw = false
        }
      })

      resizeInt()
      intro()
    });

    var winW, winH
    var resizeArr = []

    function resizeInt () {
      resizeArr.push(resizeFun)
      resize()
      window.addEventListener('resize', function () {
        resize()
      })
    }

    function resize () {
      for (var i = 0; i < resizeArr.length; i++) {
        resizeArr[i]()
      }
    }

    var resizeFun = function () {
      winW = window.innerWidth
      winH = window.innerHeight
      document.querySelector('#bg_box').setAttribute('height', winH)
    }

    var optime = 2800

    function intro () {
      init3d()
      makeParticles()
      loop_frame()
      // setTimeout(function () {
      //   TweenLite.to(document.querySelector('canvas'), 4.5, {
      //     opacity: 0.99
      //   })
      // }, optime)
    }

    var camera,
      scene,
      renderer,
      groupGeometry,
      groupPtcl,
      groupL,
      groupS,
      groupP,
      groupB

    var camera_2, scene_2, renderer_2

    var width = window.innerWidth
    var height = window.innerHeight

    var a_vertices = []
    var a_faces = []

    function init3d () {
      // カメラ,レンダー,シーンのセット
      camera = new THREE.PerspectiveCamera(50, width / height, 1, 4000)
      scene = new THREE.Scene()

      scene.add(camera)

      TweenMax.ticker.fps(24)
      TweenLite.ticker.fps(24)

      /*
      camera.position.set( 0, 100, 0);
      camera.rotation.x = -1.5
      */
      camera.position.set(0, 6.123233995736766, 100)
      if (winW < 640) {
        camera.position.set(0, 6.123233995736766, 105)
      }
      // camera.rotation.x = -0.8

      renderer = new THREE.WebGLRenderer()
      renderer.setSize(width, height)
      renderer.setClearColor(0xffffff, 1.0)

      /*
      if(renderer_gl.indexOf("Intel")){
      }
      */
      renderer.setPixelRatio(1)
      document.querySelector('#bg_box').appendChild(renderer.domElement)
      // $("#bg_box").append(renderer.domElement);

      //

      // コントローラー
      // controls = new THREE.OrbitControls(camera);

      if (indexSw) {
        camera.rotation.set(6.123233995736766, 0, 0)
      } else {
        camera.rotation.set(6.123233995736766, 0, 0.4)
      }

      groupGeometry = new THREE.Group()
      groupPtcl = new THREE.Group()
      groupL = new THREE.Group()
      groupS = new THREE.Group()
      groupP = new THREE.Group()
      groupB = new THREE.Group()

      var resize_3d = function () {
        let bg_dom = document.querySelector('#bg_box canvas')

        if (winW < 640) {
          renderer.setSize(winW * 2, winH * 2)
          bg_dom.setAttribute('width', winW * 2)
          bg_dom.setAttribute('height', winH * 2)
          bg_dom.style.width = winW
          bg_dom.style.height = winH
          // $("#bg_box canvas")
          //   .attr("width", winW * 2)
          //   .attr("height", winH * 2)
          //   .height(winH)
          //   .width(winW);
        } else {
          renderer.setSize(winW, winH)
          bg_dom.setAttribute('width', winW)
          bg_dom.setAttribute('height', winH)
          bg_dom.style.width = winW
          bg_dom.style.height = winH
          // $("#bg_box canvas")
          //   .attr("width", winW)
          //   .attr("height", winH)
          //   .height(winH)
          //   .width(winW);
        }
        camera.aspect = winW / winH
        camera.updateProjectionMatrix()
      }

      resize_3d()
      resizeArr.push(resize_3d)
    }

    var mesh
    var wireMesh
    var bg_ptcl = []
    var material
    var y_pos = -120

    function makeParticles () {
      var geometry_s = new THREE.SphereGeometry(110, 40, 40)
      var material = new THREE.MeshBasicMaterial({
        opacity: 0.2,
        color: 0xcfcfcf,
        wireframe: true
      })
      var sphere = new THREE.Mesh(geometry_s, material)

      groupS.position.y = y_pos
      // groupS.add(sphere)

      var geometry_l = new THREE.SphereGeometry(111, 40, 40)
      var material = new THREE.MeshBasicMaterial({
        opacity: 0.2,
        color: 0xcfcfcf,
        wireframe: true
      })
      var sphere = new THREE.Mesh(geometry_l, material)

      groupL.position.y = y_pos
      // groupL.add(sphere)

      var material_line = new THREE.LineBasicMaterial({
        color: 0x1fe4dc
      })

      var material_line_g = new THREE.LineBasicMaterial({
        color: 0xcccccc
      })

      var imageData1 =
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAAHlBMVEX////4+PnFwsitqLCqpa2SjJaloKiUjpj19PW/u8GvS+GnAAAALUlEQVR4AWNgVHYSYBAOS/dgUDU2jmQwM3FOYXADEkCucyWDSFh6BgPHFM8GAJB1CFekZ7zyAAAAAElFTkSuQmCC'
      var imageData2 =
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFHGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA0LTE3VDE2OjM0OjMyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNC0xN1QxNjozNTo1NSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNC0xN1QxNjozNTo1NSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5MjZiNWQ0ZS0zNzEzLWE2NGMtYTk3YS03YjEzNDQwZjE2MzYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTI2YjVkNGUtMzcxMy1hNjRjLWE5N2EtN2IxMzQ0MGYxNjM2IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6OTI2YjVkNGUtMzcxMy1hNjRjLWE5N2EtN2IxMzQ0MGYxNjM2Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MjZiNWQ0ZS0zNzEzLWE2NGMtYTk3YS03YjEzNDQwZjE2MzYiIHN0RXZ0OndoZW49IjIwMTktMDQtMTdUMTY6MzQ6MzIrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz79l1JRAAAAdUlEQVQImWP8//fvh3//kq+cOyci9J+RUfrT50lC4sai4ozvf/+2enT7GzsbAwww/v+/iYOP+WOgz3V+XgZkwMh46P1bRs17176xsTFgACZMIaiE/YfPmKLSnz7jtJxJgInpmJyq8eu3jP//Q9SuYeXWFRIBADJ5Mqtay/luAAAAAElFTkSuQmCC'

      var img_m_g = new THREE.ImageUtils.loadTexture(imageData1)
      var img_m_r = new THREE.ImageUtils.loadTexture(imageData2)

      var material_g = new THREE.SpriteMaterial({
        transparent: true,
        opacity: 0.5,
        map: img_m_g
      })

      var material_r = new THREE.SpriteMaterial({
        transparent: true,
        opacity: 0.5,
        map: img_m_r
      })

      var pnum = 3000
      // 球状の点THREE.ImageUtils.loadTexture('texture.png')
      // loader.load('red.png', function(texture) {})
      var ll = []
      var ls = []
      var la = []

      for (var i = 0; i < pnum; i++) {
        var rad = Math.random() * 10 - 5
        var rad2 = Math.random() * 10 - 5
        var r = 110

        var rgr = Math.random()
        if (rgr < 0.8) {
          var mesh = new THREE.Sprite(material_g)
        } else {
          var mesh = new THREE.Sprite(material_r)
        }
        mesh.scale.set(0.5, 0.5)
        mesh.position.x = Math.cos(rad) * Math.cos(rad2) * r
        mesh.position.y = Math.cos(rad) * Math.sin(rad2) * r
        mesh.position.z = Math.sin(rad) * r
        ls.push({
          x: Math.cos(rad) * Math.cos(rad2) * r,
          y: Math.cos(rad) * Math.sin(rad2) * r,
          z: Math.sin(rad) * r
        })
        ll.push({
          x: Math.cos(rad) * Math.cos(rad2) * r + 1,
          y: Math.cos(rad) * Math.sin(rad2) * r + 1,
          z: Math.sin(rad) * r + 1
        })

        if (mesh.position.y > 80) {
          if (Math.random() < 0.15) {
            // グラフ線
            var geometry_graf = new THREE.Geometry()
            var ran_y = 1.05 + Math.random() * 0.15

            geometry_graf.vertices.push(
              new THREE.Vector3(ll[i].x * ran_y, ll[i].y * ran_y, ll[i].z * ran_y),
              new THREE.Vector3(mesh.position.x, mesh.position.y, mesh.position.z)
            )

            la.push({
              x: ls[i].x,
              y: ls[i].y,
              z: ls[i].z
            })

            var line = new THREE.Line(geometry_graf, material_line)

            groupPtcl.add(line)
          } else {
            // 点の描写
            if (mesh.position.y > 60) groupP.add(mesh)
          }
        }
      }
      groupP.position.y = y_pos
      var line_ran = []
      // グラフ線アニメーション
      for (var i = 0; i < groupPtcl.children.length; i++) {
        var x_ = groupPtcl.children[i].geometry.vertices[0].x
        var y_ = groupPtcl.children[i].geometry.vertices[0].y
        var z_ = groupPtcl.children[i].geometry.vertices[0].z
        var x__ = groupPtcl.children[i].geometry.vertices[1].x
        var y__ = groupPtcl.children[i].geometry.vertices[1].y
        var z__ = groupPtcl.children[i].geometry.vertices[1].z

        /* var r = 1+((Math.random()*0.1)-0.05);
     var r2 = 1+((Math.random()*0.1)-0.05);
  */

        var r = Math.random() * 5
        var r2 = 1 + -(Math.random() * 0.1)
        line_ran.push(r)
        TweenLite.to(groupPtcl.children[i].geometry.vertices[0], 0, {
          x: x__,
          y: y__,
          z: z__
        })
        TweenLite.to(groupPtcl.children[i].geometry.vertices[1], 0.5, {
          delay: 3.2 + r,
          x: x_,
          y: y_,
          z: z_
        })
        TweenLite.to(groupPtcl.children[i].geometry.vertices[0], 1, {
          delay: 2.2 + r,
          x: x_,
          y: y_,
          z: z_
        })
        TweenLite.to(groupPtcl.children[i].geometry.vertices[1], 0, {
          delay: 4.2 + r,
          x: x__,
          y: y__,
          z: z__
        })
        TweenLite.to(groupPtcl.children[i].geometry.vertices[0], 0, {
          delay: 4.2 + r,
          x: x__,
          y: y__,
          z: z__
        })

        var t = new TimelineMax({
          repeat: -1,
          delay: 3 + r
        })
        t.to(groupPtcl.children[i].geometry.vertices[0], 1, {
          delay: 3,
          x: x__ + 0.05,
          y: y__ + 0.05,
          z: z__ + 0.05
        })
        t.to(groupPtcl.children[i].geometry.vertices[0], 1, {
          delay: 3,
          x: x_,
          y: y_,
          z: z_
        })
        t.to(groupPtcl.children[i].geometry.vertices[1], 0.5, {
          x: x_,
          y: y_,
          z: z_
        })
      }

      groupPtcl.position.y = y_pos
      // 通信線
      var line_num = []
      for (var i = 0; i < ls.length - 1; i++) {
        var ran = Math.floor(Math.random() * geometry_l.vertices.length - 1)
        var geometry = new THREE.Geometry()
        var ran_y = 1 + Math.random() * 0.2
        var x_ = ls[i].x
        var y_ = ls[i].y
        var z_ = ls[i].z

        if (y_ > 80) {
          for (var p = 0; p < la.length - 1; p++) {
            var x__ = la[p].x
            var y__ = la[p].y
            var z__ = la[p].z
            if (
              x_ - x__ < 10 &&
              x_ - x__ > -10 &&
              z_ - z__ < 10 &&
              z_ - z__ > -10 &&
              y_ - y__ < 10 &&
              y_ - y__ > -10
            ) {
              geometry.vertices.push(
                new THREE.Vector3(x_, y_, z_),
                new THREE.Vector3(x__, y__, z__)
              )
              line_num.push(p)
              var line = new THREE.Line(geometry, material_line_g)

              groupB.add(line)
              break
            }
          }
        }
      }

      for (var i = 0; i < groupB.children.length; i++) {
        var x_ = groupB.children[i].geometry.vertices[1].x
        var y_ = groupB.children[i].geometry.vertices[1].y
        var z_ = groupB.children[i].geometry.vertices[1].z

        var x__ = groupB.children[i].geometry.vertices[0].x
        var y__ = groupB.children[i].geometry.vertices[0].y
        var z__ = groupB.children[i].geometry.vertices[0].z
        TweenMax.to(groupB.children[i].geometry.vertices[1], 0, {
          x: x__,
          y: y__,
          z: z__
        })
        //

        var t2 = new TimelineMax({
          delay: 1.2 + line_ran[line_num[i]]
        })
        t2.to(groupB.children[i].geometry.vertices[0], 1, {
          x: x_,
          y: y_,
          z: z_
        })
        t2.to(groupB.children[i].geometry.vertices[1], 1, {
          x: x_,
          y: y_,
          z: z_
        })

        var t = new TimelineMax({
          repeat: -1,
          delay: 3 + line_ran[line_num[i]]
        })
        t.to(groupB.children[i].geometry.vertices[0], 1, {
          delay: 3,
          x: x__,
          y: y__,
          z: z__
        })
        t.to(groupB.children[i].geometry.vertices[1], 1, {
          x: x__,
          y: y__,
          z: z__
        })

        t.to(groupB.children[i].geometry.vertices[0], 1, {
          delay: 1,
          x: x_,
          y: y_,
          z: z_
        })
        t.to(groupB.children[i].geometry.vertices[1], 1, {
          x: x_,
          y: y_,
          z: z_
        })
        t.to(groupB.children[i].geometry.vertices[1], 0.5, {
          x: x_,
          y: y_,
          z: z_
        })
      }

      groupB.position.y = y_pos

      // 回転
      var group_rotate = function () {
        groupPtcl.rotation.y += 0.002
        groupS.rotation.y += 0.002
        groupP.rotation.y += 0.002
        groupB.rotation.y += 0.002
        // groupL.rotation.y +=0.002
        for (var i = 0; i < groupB.children.length; i++) {
          groupB.children[i].geometry.verticesNeedUpdate = true
        }
        for (var i = 0; i < groupPtcl.children.length; i++) {
          groupPtcl.children[i].geometry.verticesNeedUpdate = true
        }
      }

      enter_anim.push(group_rotate)
      scene.add(groupP)
      scene.add(groupL)
      scene.add(groupS)
      scene.add(groupB)
      scene.add(groupPtcl)
      scene.fog = new THREE.Fog(0xffffff, 50, 250)
      // make_para()

      enter_arr.push(render)
    }

    let frame = 0

    var render = function () {
      // controls.update();
      frame++
      if (frame % 2 == 0) {
        return
      }
      renderer.render(scene, camera)
    }

    var enter_arr = []
    var enter_anim = []

    function loop_frame () {
      for (var i = 0; i < enter_arr.length; i++) {
        enter_arr[i]()
      }
      for (var i = 0; i < enter_anim.length; i++) {
        enter_anim[i]()
      }

      requestAnimationFrame(loop_frame)
    }
  }
}
</script>

<style lang="css">
</style>