performance not ok

pages/index.css

@@ -197,7 +197,7 @@ video#videoBg {
   /* margin-left: -5%; */
   cursor: ew-resize;
   margin: 0 auto;
-  max-width: 1400px; /* px */
+ /* max-width: 1400px; /* px */
 }
 @media screen and (max-width: 780px) {
   .index-page div.index-portfolio.index-page-common {

pages/index.js

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

static/addThreeD.js

@@ -168,36 +168,6 @@ function handleWindowResize() {
   resizeTimer = null
   window.removeThreeD()
   window.addThreeD(lan)
-  // console.log('handle ing')
-  // let w = getWidth()
-
-  // camera.aspect = aspect
-  // camera.updateProjectionMatrix()
-  // renderer.setSize(w, w / aspect)
-
-  // // scene.remove(cylinderAsGroup)
-  // // cylinderAsGroup = null
-  // const material = genMaterialArray()
-
-  // cylinderAsGroup = new THREE.Group()
-
-  // for (let i = 0; i < slice; i++) {
-  //   const r = 8192 / Math.PI / 6
-  //   const w = r * Math.sin(Math.PI / slice) * 2
-  //   const h = 512 / 3
-  //   const rotation = ((2 * Math.PI) / slice) * i
-  //   genGeo(w, h, r, rotation, material, i, cylinderAsGroup)
-  // }
-
-  // scene.add(cylinderAsGroup)
-
-  // camera.position.set(0, 0, isMobile ? 500 : 800)
-  // scene.fog.near = 200
-  // scene.fog.far = isMobile ? 640 : 1024
-  // controls.update()
-
-  // window.cancelAnimationFrame(animId)
-  // animate()
 }
 
 function onWindowResize() {

static/addThreeD2.js

+var camera, scene, renderer, controls, mat, geo, tex
+var slice = 128
+var isMobile = checkMobile()
+var cylinderGroup, cylinderMobileGroup
+var materialArray, materialMobileArray
+var animId
+var target
+var lan
+var resizeTimer
+
+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: 8192 / slice, h: 1024 }
+      : { w: 16384 / 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 = isMobile ? window.innerWidth * 2 : window.innerWidth
+  return w // > 1440 ? 1440 : w
+}
+
+function getWindowHeight() {
+  return window.innerHeight
+}
+
+
+function checkMobile() {
+  let mobile = window.innerWidth < 780
+  return mobile
+}
+
+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.mouseButtons = { ORBIT: THREE.MOUSE.LEFT }
+  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)
+
+  cylinderGroup = new THREE.Group()
+  cylinderGroup.position.y -= 30
+
+  cylinderMobileGroup = new THREE.Group()
+  cylinderMobileGroup.position.y += 30
+
+  for (let sliceIndex = 0; sliceIndex < slice; sliceIndex++) {
+    const r = 16384 / Math.PI / 12
+    const w = r * Math.sin(Math.PI / slice) * 2
+    const h = 1024 / 6
+    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, h)
+    geo.translate(0, 0, r * Math.cos(Math.PI / slice))
+    geo.rotateY(rotation)
+    const mesh = new THREE.Mesh(geo, _debugMaterial)
+    cylinderGroup.add(mesh)
+
+    const geo2 = new THREE.PlaneGeometry(w / 2, h)
+    geo2.translate(0, -56, 0.5 * r * Math.cos(Math.PI / slice))
+    geo2.rotateY(rotation)
+    const mesh2 = new THREE.Mesh(geo2, _debugMaterial)
+    cylinderMobileGroup.add(mesh2)
+  }
+
+  scene.add(cylinderGroup)
+  scene.add(cylinderMobileGroup)
+
+  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
+    }
+  })
+  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
+    }
+  })
+  controls.update()
+  onWindowResize()
+  changeMobile()
+  animate()
+  window.addEventListener('resize', onWindowResize, false)
+}
+
+function handleWindowResize() {
+  clearTimeout(resizeTimer)
+  resizeTimer = null
+  window.removeThreeD()
+  window.addThreeD(lan)
+}
+
+function changeMobile() {
+  isMobile = checkMobile()
+  cylinderGroup.visible = !isMobile
+  cylinderMobileGroup.visible = isMobile
+  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, 30)
+  }
+
+  camera.aspect = getWindowWidth() / getWindowHeight()
+  camera.updateProjectionMatrix()
+  renderer.setSize(getWindowWidth(), getWindowHeight())
+
+  changeMobile()
+}
+function animate(time) {
+  animId = requestAnimationFrame(animate)
+  cylinderGroup.rotation.y = -time * 0.00005
+  cylinderMobileGroup.rotation.y = -time * 0.00005
+  render()
+}
+
+function render() {
+  renderer.render(scene, camera)
+}