feat: update threejs & addThreeD2

.eslintignore

 node_modules/
 .next/
 out/
+*.min.js
\ No newline at end of file

static/addThreeD2.js

@@ -10,7 +10,6 @@ var target
 var lan
 var resizeTimer
 
-
 var radius = pcPicWidth / Math.PI / 12
 var planeHeight = 1024 / 6
 
@@ -48,7 +47,7 @@ function imageMobile(en) {
     : '/static/img/timeline-mobile-cn.png'
   return img
 }
-function genMaterialArray(isMobile,en, callback) {
+function genMaterialArray(isMobile, en, callback) {
   const timeline = isMobile ? imageMobile(en) : image(en)
   timeline.onload = function() {
     const canvas = document.createElement('canvas')
@@ -85,15 +84,11 @@ function getWindowWidth() {
 }
 
 function getWindowHeight() {
-  if(isMobile) {
-    return window.innerHeight * 0.9
-  } else {
-    return window.innerHeight * 0.8
-  }
-  
+  isMobile = checkMobile()
+  const h = isMobile ? window.innerHeight * 0.6 : window.innerWidth / 2.5
+  return h
 }
 
-
 function checkMobile() {
   let mobile = window.innerWidth < 780
   return mobile
@@ -109,7 +104,7 @@ function initMobileGeo(en) {
     const _debugMaterial = new THREE.MeshBasicMaterial({
       color: 16777215 / (sliceIndex * 10 + 1),
       transparent: true,
-      opacity: 0.0002,
+      opacity: 0.0002
     })
     const geo2 = new THREE.PlaneGeometry(w / 2, planeHeight)
     geo2.translate(0, -56, 0.5 * radius * Math.cos(Math.PI / slice))
@@ -119,7 +114,7 @@ function initMobileGeo(en) {
   }
 
   scene.add(cylinderMobileGroup)
-  genMaterialArray(true,en, function(canvasArray) {
+  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()
@@ -127,7 +122,7 @@ function initMobileGeo(en) {
         map: tex,
         alphaTest: 0.01,
         transparent: true,
-        side: THREE.DoubleSide,
+        side: THREE.DoubleSide
       })
       cylinderMobileGroup.children[i].material.needsUpdate = true
       cylinderMobileGroup.children[i].material = mat
@@ -144,7 +139,7 @@ function initPcGeo(en) {
     const _debugMaterial = new THREE.MeshBasicMaterial({
       color: 16777215 / (sliceIndex * 10 + 1),
       transparent: true,
-      opacity: 0.0002,
+      opacity: 0.0002
     })
 
     const geo = new THREE.PlaneGeometry(w, planeHeight)
@@ -163,7 +158,7 @@ function initPcGeo(en) {
         map: tex,
         alphaTest: 0.01,
         transparent: true,
-        side: THREE.DoubleSide,
+        side: THREE.DoubleSide
       })
       cylinderGroup.children[i].material.needsUpdate = true
       cylinderGroup.children[i].material = mat
@@ -186,14 +181,16 @@ function init(en) {
   target.appendChild(renderer.domElement)
 
   // set the camera with the frustum parameters
-  camera = new THREE.PerspectiveCamera(30, getWindowWidth() / getWindowHeight(), 1, 1500)
+  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.minPolarAngle = Math.PI / 2 - 0.05
   controls.maxPolarAngle = controls.minPolarAngle
   controls.enableZoom = false
-
-  controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT }
   controls.enableKeys = false
   controls.rotateSpeed = 0.5
 
@@ -203,11 +200,70 @@ function init(en) {
   renderer.render(scene, camera)
   scene.fog = new THREE.Fog(0xe3e3e3, 200, isMobile ? 640 : 1024)
 
-  if(isMobile) {
-    initMobileGeo(en)
+  cylinderGroup = new THREE.Group()
+
+  cylinderMobileGroup = new THREE.Group()
+  cylinderMobileGroup.position.y += 60
+
+  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)
+  }
+
+  if (isMobile) {
+    scene.add(cylinderMobileGroup)
   } else {
     initPcGeo(en)
   }
+
+  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(true)
@@ -224,22 +280,22 @@ function handleWindowResize() {
 
 function changeMobile(forceUpdate = false) {
   var tmpIsMobile = checkMobile()
-  if(forceUpdate || isMobile != tmpIsMobile) {
+  if (forceUpdate || isMobile != tmpIsMobile) {
     isMobile = tmpIsMobile
-    if(isMobile) {
+    if (isMobile) {
       scene.remove(cylinderGroup)
-      if(!cylinderMobileGroup) {
+      if (!cylinderMobileGroup) {
         initMobileGeo(lan)
       }
       scene.add(cylinderMobileGroup)
     } else {
       scene.remove(cylinderMobileGroup)
-      if(!cylinderGroup) {
+      if (!cylinderGroup) {
         initPcGeo(lan)
       }
       scene.add(cylinderGroup)
     }
-    camera.position.set(0, 0, isMobile ? 700 : 1000)
+    camera.position.set(0, 0, isMobile ? 650 : 850)
     scene.fog.near = isMobile ? 500 : 500
     scene.fog.far = isMobile ? 550 : 1500
     controls.update()
@@ -260,10 +316,10 @@ function onWindowResize() {
 }
 function animate(time) {
   animId = requestAnimationFrame(animate)
-  if(isMobile) {
-    cylinderMobileGroup.rotation.y = -time * 0.00005;
-  }else {
-    cylinderGroup.rotation.y = -time * 0.00005;
+  if (isMobile) {
+    cylinderMobileGroup.rotation.y = -time * 0.00005
+  } else {
+    cylinderGroup.rotation.y = -time * 0.00005
   }
 
   render()