add: sword smallBlinks.

Author: gonnavis

Maria.js

@@ -829,7 +829,6 @@ class Maria {
           this.swordBlink = new SwordBlink()
           // scene.add(swordBlink.mesh)
           this.swordDelegate.add(this.swordBlink.mesh)
-          this.swordDelegate.add(this.swordBlink.mesh2)
 
           //
 

SwordBlink.js

@@ -5,16 +5,22 @@ class SwordBlink {
   constructor() {
     // updates.push(this)
 
+    this.mesh = new THREE.Group()
+
+    this.tmpVec3 = new THREE.Vector3()
+    this.mainBlinkScale = 0.8
+    this.smallBlinkScale = 0.1
+
     let geometry = new THREE.PlaneGeometry(1, 3)
     // let scale = 1000
     let scale = 300
     // let scale = 200
     // let scale = 100
-    geometry.scale(scale, scale, scale)
+    geometry.scale(scale * 0.7, scale, scale)
     // let geometry = new THREE.BoxGeometry()
     let map = new THREE.TextureLoader().load('./image/SwordBlink.png')
     map.encoding = THREE.sRGBEncoding
-    let material = new THREE.MeshBasicMaterial({
+    this.material = new THREE.MeshBasicMaterial({
       map,
       transparent: true,
       // blending: THREE.AdditiveBlending,
@@ -23,48 +29,83 @@ class SwordBlink {
       depthWrite: false,
       side: THREE.DoubleSide,
     })
-    this.mesh = new THREE.Mesh(geometry, material)
+    this.mainBlink = new THREE.Mesh(geometry, this.material)
+
+    this.mainBlink.renderOrder = 1000
+
+    this.mainBlink.rotation.x = Math.PI / 2
+
+    // this.mainBlink.scale.setScalar(100)
+
+    this.mainBlink2 = this.mainBlink.clone()
+    this.mainBlink2.rotation.y = Math.PI / 2
 
-    this.mesh.renderOrder = 1000
+    this.mesh.add(this.mainBlink)
+    this.mesh.add(this.mainBlink2)
 
-    this.mesh.rotation.x = Math.PI / 2
+    //
 
-    // this.mesh.scale.setScalar(100)
+    this.smallBlinks = []
+    let smallGeometry = geometry.clone()
+    smallGeometry.rotateX(Math.PI / 2)
+    // smallGeometry.scale(1, 1, 1)
+    this.smallMaterial = this.material.clone()
+    for (let i = 0; i < 12; i++) {
+      let smallBlink = new THREE.Mesh(smallGeometry, this.smallMaterial)
+      smallBlink._position = new THREE.Vector3()
+      // smallBlink.rotation.x += Math.PI / 2
+      this.mesh.add(smallBlink)
+      this.smallBlinks.push(smallBlink)
+    }
 
-    this.mesh2 = this.mesh.clone()
-    this.mesh2.rotation.y = Math.PI / 2
+    //
 
     this.mesh.visible = false
-    this.mesh2.visible = false
   }
 
   blink(chargedLevel) {
     let to = { t: 0, tv: 1 }
     gsap.to(to, {
-      duration: 5 / 60,
-      // duration: 1,
+      duration: 10 / 60,
+      // duration: 3,
       t: 1,
       tv: 0,
+      ease: 'none',
       onStart: () => {
         this.mesh.visible = true
-        this.mesh2.visible = true
-        this.mesh.scale.setScalar(1)
-        this.mesh2.scale.setScalar(1)
+        this.mainBlink.scale.setScalar(this.mainBlinkScale)
+        this.mainBlink2.scale.setScalar(this.mainBlinkScale)
+        this.smallBlinks.forEach((smallBlink) => {
+          smallBlink.scale.setScalar(this.smallBlinkScale)
+          smallBlink._position.x = (Math.random() - 0.5) * 350
+          smallBlink._position.y = (Math.random() - 0.5) * 350
+          smallBlink._position.z = (Math.random() - 0.5) * 350
+          smallBlink.position.x = smallBlink._position.x
+          smallBlink.position.y = smallBlink._position.y
+          smallBlink.position.z = smallBlink._position.z
+          smallBlink.lookAt(this.mesh.getWorldPosition(this.tmpVec3))
+        })
         if (chargedLevel === 1) {
-          this.mesh.material.color.set('white')
-          this.mesh2.material.color.set('white')
+          this.material.color.setRGB(1, 1, 1)
+          this.smallMaterial.color.setRGB(1, 1, 1)
         } else if (chargedLevel === 2) {
-          this.mesh.material.color.set('cyan')
-          this.mesh2.material.color.set('cyan')
+          this.material.color.setRGB(0.5, 1, 1)
+          this.smallMaterial.color.setRGB(0.5, 1, 1)
         }
       },
       onUpdate: () => {
-        this.mesh.scale.setScalar(to.tv)
-        this.mesh2.scale.setScalar(to.tv)
+        this.mainBlink.scale.setScalar(this.mainBlinkScale * to.tv ** 0.5)
+        this.mainBlink2.scale.setScalar(this.mainBlinkScale * to.tv ** 0.5)
+        this.smallBlinks.forEach((smallBlink) => {
+          smallBlink.scale.x = this.smallBlinkScale * to.tv
+          smallBlink.position.x = smallBlink._position.x * to.tv
+          smallBlink.position.y = smallBlink._position.y * to.tv
+          smallBlink.position.z = smallBlink._position.z * to.tv
+        })
+        this.smallMaterial.opacity = to.tv
       },
       onComplete: () => {
         this.mesh.visible = false
-        this.mesh2.visible = false
       },
     })
   }

image/SwordBlink.png

@@ -321,7 +321,7 @@ function init_three() {
   stats = new Stats()
   container.appendChild(stats.dom)
 
-  // window.controls = new OrbitControls(camera, renderer.domElement)
+  if (g.getQueryStringByName('orbit') === 'true') window.controls = new OrbitControls(camera, renderer.domElement)
 }
 
 function init_cannon() {