3d one cylinder one time

static/addThreeD2.js

 var camera, scene, renderer, controls, mat, geo, tex
-var slice = 128
+var pcPicWidth = 17943
+var mobilePicWidth = 8980
+var slice = Math.round(pcPicWidth / 256)
 var isMobile = checkMobile()
 var cylinderGroup, cylinderMobileGroup
 var materialArray, materialMobileArray
@@ -8,6 +10,10 @@ 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
@@ -47,8 +53,8 @@ function genMaterialArray(isMobile,en, callback) {
   timeline.onload = function() {
     const canvas = document.createElement('canvas')
     const sprite = isMobile
-      ? { w: 8980 / slice, h: 1024 }
-      : { w: 17943 / slice, h: 1024 }
+      ? { w: mobilePicWidth / slice, h: 1024 }
+      : { w: pcPicWidth / slice, h: 1024 }
     const context = canvas.getContext('2d')
     canvas.height = sprite.h
     canvas.width = sprite.w
@@ -73,16 +79,16 @@ function genMaterialArray(isMobile,en, callback) {
   }
 }
 function getWindowWidth() {
-  isMobile = checkMobile()
-  const w = isMobile ? window.innerWidth * 2 : window.innerWidth
+  // isMobile = checkMobile()
+  const w = checkMobile() ? window.innerWidth * 2 : window.innerWidth
   return w // > 1440 ? 1440 : w
 }
 
 function getWindowHeight() {
   if(isMobile) {
-    return window.innerHeight * 0.9
+    return window.innerHeight * 0.8
   } else {
-    return window.innerHeight * 0.66
+    return window.innerHeight * 0.68
   }
   
 }
@@ -93,73 +99,27 @@ function checkMobile() {
   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
-
+function initMobileGeo(en) {
   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 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, 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))
+    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(cylinderGroup)
   scene.add(cylinderMobileGroup)
-
-  genMaterialArray(false, 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()
@@ -169,11 +129,33 @@ function init(en) {
         transparent: true,
         side: THREE.DoubleSide,
       })
-      cylinderGroup.children[i].material.needsUpdate = true
-      cylinderGroup.children[i].material = mat
+      cylinderMobileGroup.children[i].material.needsUpdate = true
+      cylinderMobileGroup.children[i].material = mat
     }
   })
-  genMaterialArray(true,en, function(canvasArray) {
+}
+
+function initPcGeo(en) {
+  cylinderGroup = new THREE.Group()
+  cylinderGroup.position.y -= 30
+  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()
@@ -183,13 +165,52 @@ function init(en) {
         transparent: true,
         side: THREE.DoubleSide,
       })
-      cylinderMobileGroup.children[i].material.needsUpdate = true
-      cylinderMobileGroup.children[i].material = mat
+      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.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)
+
+  if(isMobile) {
+    initMobileGeo(en)
+  } else {
+    initPcGeo(en)
+  }
   controls.update()
   onWindowResize()
-  changeMobile()
+  changeMobile(true)
   animate()
   window.addEventListener('resize', onWindowResize, false)
 }
@@ -201,14 +222,28 @@ function handleWindowResize() {
   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 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() {