update

pages/index.js

@@ -118,7 +118,7 @@ class FrontPage extends React.Component {
           <script
             key="addThreejs"
             defer="defer"
-            src="/static/addThreeD2.js"
+            src="/static/addThreeD3.js"
           ></script>
         </Head>
         <div className="limitw">

static/addThreeD3.js

+var camera, scene, renderer, controls, mat, geo, tex
+var pcPicWidth = 21060
+var mobilePicWidth = 10554
+var slice = Math.round(pcPicWidth / 256)
+var isMobile = checkMobile()
+var cylinderGroup, cylinderMobileGroup
+var materialArray, materialMobileArray
+var animId
+var target
+var lan
+var resizeTimer
+
+
+var radius = pcPicWidth / Math.PI / 12
+var planeHeight = 1024 / 6
+
+window.addThreeD = function(en) {
+  target = document.querySelector('#threeD')
+  lan = en
+  init(en)
+}
+window.removeThreeD = function() {
+  if (!target) {
+    return
+  }
+  target.innerHTML = ''
+  this.cancelAnimationFrame(animId)
+  window.removeEventListener('resize', onWindowResize, false)
+  return [camera, controls, scene, mat, geo, tex, renderer].map(function(val) {
+    if (val && val.dispose) {
+      val.dispose()
+      val = null
+      return null
+    }
+  })
+}
+
+function image(en) {
+  let img = new Image()
+  img.src = en ? '/static/img/timeline-en.png' : '/static/img/timeline-cn.png'
+  return img
+}
+
+function imageMobile(en) {
+  let img = new Image()
+  img.src = en
+    ? '/static/img/timeline-mobile-en.png'
+    : '/static/img/timeline-mobile-cn.png'
+  return img
+}
+function genMaterialArray(isMobile,en, callback) {
+  const timeline = isMobile ? imageMobile(en) : image(en)
+  timeline.onload = function() {
+    const canvas = document.createElement('canvas')
+    const sprite = isMobile
+      ? { w: mobilePicWidth / slice, h: 1024 }
+      : { w: pcPicWidth / slice, h: 1024 }
+    const context = canvas.getContext('2d')
+    canvas.height = sprite.h
+    canvas.width = sprite.w
+    const canvasArray = []
+    for (let i = 0; i < slice; i++) {
+      context.clearRect(0, 0, sprite.w, sprite.h)
+      context.drawImage(
+        timeline,
+        i * sprite.w,
+        0,
+        sprite.w,
+        sprite.h,
+        0,
+        0,
+        sprite.w,
+        sprite.h
+      )
+      canvasArray.push(canvas.toDataURL())
+    }
+
+    callback(canvasArray)
+  }
+}
+function getWindowWidth() {
+  // isMobile = checkMobile()
+  const w = checkMobile() ? window.innerWidth * 2 : window.innerWidth
+  return w // > 1440 ? 1440 : w
+}
+
+function getWindowHeight() {
+  if(isMobile) {
+    return window.innerHeight * 0.88
+  } else {
+    return window.innerHeight * 0.68
+  }
+  
+}
+
+
+function checkMobile() {
+  let mobile = window.innerWidth < 780
+  return mobile
+}
+
+function initMobileGeo(en) {
+  cylinderMobileGroup = new THREE.Group()
+  cylinderMobileGroup.position.y += 40
+
+  for (let sliceIndex = 0; sliceIndex < slice; sliceIndex++) {
+    const w = radius * Math.sin(Math.PI / slice) * 2
+    const rotation = ((2 * Math.PI) / slice) * sliceIndex
+    const _debugMaterial = new THREE.MeshBasicMaterial({
+      color: 16777215 / (sliceIndex * 10 + 1),
+      transparent: true,
+      opacity: 0.0002,
+    })
+    const geo2 = new THREE.PlaneGeometry(w / 2, planeHeight)
+    geo2.translate(0, -56, 0.5 * radius * Math.cos(Math.PI / slice))
+    geo2.rotateY(rotation)
+    const mesh2 = new THREE.Mesh(geo2, _debugMaterial)
+    cylinderMobileGroup.add(mesh2)
+  }
+
+  scene.add(cylinderMobileGroup)
+  genMaterialArray(true,en, function(canvasArray) {
+    for (let i = 0; i < slice; i++) {
+      let tex = new THREE.TextureLoader().load(canvasArray[i])
+      tex.anisotropy = renderer.capabilities.getMaxAnisotropy()
+      let mat = new THREE.MeshBasicMaterial({
+        map: tex,
+        alphaTest: 0.01,
+        transparent: true,
+        side: THREE.DoubleSide,
+      })
+      cylinderMobileGroup.children[i].material.needsUpdate = true
+      cylinderMobileGroup.children[i].material = mat
+    }
+  })
+}
+
+function initPcGeo(en) {
+  cylinderGroup = new THREE.Group()
+  cylinderGroup.position.y -= 15
+  for (let sliceIndex = 0; sliceIndex < slice; sliceIndex++) {
+    const w = radius * Math.sin(Math.PI / slice) * 2
+    const rotation = ((2 * Math.PI) / slice) * sliceIndex
+    const _debugMaterial = new THREE.MeshBasicMaterial({
+      color: 16777215 / (sliceIndex * 10 + 1),
+      transparent: true,
+      opacity: 0.0002,
+    })
+
+    const geo = new THREE.PlaneGeometry(w, planeHeight)
+    geo.translate(0, 0, radius * Math.cos(Math.PI / slice))
+    geo.rotateY(rotation)
+    const mesh = new THREE.Mesh(geo, _debugMaterial)
+    cylinderGroup.add(mesh)
+  }
+
+  scene.add(cylinderGroup)
+  genMaterialArray(false, en, function(canvasArray) {
+    for (let i = 0; i < slice; i++) {
+      let tex = new THREE.TextureLoader().load(canvasArray[i])
+      tex.anisotropy = renderer.capabilities.getMaxAnisotropy()
+      let mat = new THREE.MeshBasicMaterial({
+        map: tex,
+        alphaTest: 0.01,
+        transparent: true,
+        side: THREE.DoubleSide,
+      })
+      cylinderGroup.children[i].material.needsUpdate = true
+      cylinderGroup.children[i].material = mat
+    }
+  })
+}
+
+function init(en) {
+  if (!target) return
+  if (typeof THREE === 'undefined') {
+    console.log('three undefined')
+    return setTimeout(function() {
+      init(en)
+    }, 500)
+  }
+
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setSize(getWindowWidth(), getWindowHeight())
+  renderer.setPixelRatio(window.devicePixelRatio)
+  target.appendChild(renderer.domElement)
+
+  // set the camera with the frustum parameters
+  camera = new THREE.PerspectiveCamera(30, getWindowWidth() / getWindowHeight(), 1, 1500)
+  controls = new THREE.OrbitControls(camera, renderer.domElement)
+  controls.dampingFactor = 0.6
+  controls.minPolarAngle = Math.PI / 2 - 0.03
+  controls.maxPolarAngle = controls.minPolarAngle
+  controls.enableZoom = false
+
+  controls.enableKeys = false
+  controls.rotateSpeed = 0.5
+
+  // scene is like a graph of everything that will be rendered
+  scene = new THREE.Scene()
+  scene.background = new THREE.Color(0xffffff)
+  renderer.render(scene, camera)
+  scene.fog = new THREE.Fog(0xe3e3e3, 200, isMobile ? 640 : 1024)
+
+  if(isMobile) {
+    initMobileGeo(en)
+  } else {
+    initPcGeo(en)
+  }
+  controls.update()
+  onWindowResize()
+  changeMobile(true)
+  animate()
+  window.addEventListener('resize', onWindowResize, false)
+}
+
+function handleWindowResize() {
+  clearTimeout(resizeTimer)
+  resizeTimer = null
+  window.removeThreeD()
+  window.addThreeD(lan)
+}
+
+function changeMobile(forceUpdate = false) {
+  var tmpIsMobile = checkMobile()
+  if(forceUpdate || isMobile != tmpIsMobile) {
+    isMobile = tmpIsMobile
+    if(isMobile) {
+      scene.remove(cylinderGroup)
+      if(!cylinderMobileGroup) {
+        initMobileGeo(lan)
+      }
+      scene.add(cylinderMobileGroup)
+    } else {
+      scene.remove(cylinderMobileGroup)
+      if(!cylinderGroup) {
+        initPcGeo(lan)
+      }
+      scene.add(cylinderGroup)
+    }
+    camera.position.set(0, 0, isMobile ? 700 : 1000)
+    scene.fog.near = isMobile ? 500 : 500
+    scene.fog.far = isMobile ? 550 : 1500
+    controls.update()
+  }
+}
+
+function onWindowResize() {
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+    resizeTimer = setTimeout(handleWindowResize, 100)
+  }
+
+  camera.aspect = getWindowWidth() / getWindowHeight()
+  camera.updateProjectionMatrix()
+  renderer.setSize(getWindowWidth(), getWindowHeight())
+
+  changeMobile()
+}
+function animate(time) {
+  animId = requestAnimationFrame(animate)
+  if(isMobile) {
+    cylinderMobileGroup.rotation.y = -time * 0.00005;
+  }else {
+    cylinderGroup.rotation.y = -time * 0.00005;
+  }
+ 
+  render()
+}
+
+function render() {
+  renderer.render(scene, camera)
+}