yuliang
/
yvan-rcs-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

CLX

master
yuliang 6 months ago
parent
ff49ef2ee3
commit
e4afc4c3f8
1 changed files with 50 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 75
      src/modules/clx/Clx3dObject.ts

75
src/modules/clx/Clx3dObject.ts
View File

@ -1,8 +1,8 @@
import * as THREE from 'three'
import { CSG } from 'three-csg-ts'
import {CSG} from 'three-csg-ts'
import gsap from 'gsap'
//@ts-ignore
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js'
import {mergeGeometries} from 'three/addons/utils/BufferGeometryUtils.js'
export default class Clx3dObject extends THREE.Object3D {
@ -52,7 +52,7 @@ export default class Clx3dObject extends THREE.Object3D {
}
// 创建挤出几何体
const geometry = new THREE.ExtrudeGeometry(shape, options)
const material = new THREE.MeshBasicMaterial({ color: 0xffdddbca })
const material = new THREE.MeshBasicMaterial({color: 0xffdddbca})
const mesh = new THREE.Mesh(geometry, material)
mesh.updateMatrix()
@ -209,7 +209,7 @@ export default class Clx3dObject extends THREE.Object3D {
}
// 创建挤出几何体
const geometry = new THREE.ExtrudeGeometry(shape, options)
const material = new THREE.MeshBasicMaterial({ color: 0xffdddbca })
const material = new THREE.MeshBasicMaterial({color: 0xffdddbca})
const mesh = new THREE.Mesh(geometry, material)
mesh.updateMatrix()
@ -390,9 +390,7 @@ export default class Clx3dObject extends THREE.Object3D {
bevelEnabled: true,
extrudePath: curve // 设置挤出轨迹
}
const geometry = new THREE.ExtrudeGeometry(shape, options)
return geometry
return new THREE.ExtrudeGeometry(shape, options)
}
private static clxPedestalGeometry: THREE.BufferGeometry = null
@ -409,21 +407,21 @@ export default class Clx3dObject extends THREE.Object3D {
Clx3dObject.clxPedestalGeometry = Clx3dObject.createClxPedestal()
}
const clxPedestalGeometry = Clx3dObject.clxPedestalGeometry
const clxPedestalMaterial = new THREE.MeshPhongMaterial({ color: 0xffdddbca })
const clxPedestalMaterial = new THREE.MeshPhongMaterial({color: 0xffdddbca})
const clxPedestalMesh = new THREE.Mesh(clxPedestalGeometry, clxPedestalMaterial)
if (!Clx3dObject.clxPillarGeometry) {
Clx3dObject.clxPillarGeometry = Clx3dObject.createClxPillar()
}
const clxPillarGeometry = Clx3dObject.clxPillarGeometry
const clxPillarMaterial = new THREE.MeshPhongMaterial({ color: 0xff6c6956 })
const clxPillarMaterial = new THREE.MeshPhongMaterial({color: 0xff6c6956})
const clxPillarMesh = new THREE.Mesh(clxPillarGeometry, clxPillarMaterial)
if (!Clx3dObject.clxForkGeometry) {
Clx3dObject.clxForkGeometry = Clx3dObject.createClxFork()
}
const clxForkGeometry = Clx3dObject.clxForkGeometry
const clxForkMaterial = new THREE.MeshPhongMaterial({ color: 0xff444444 })
const clxForkMaterial = new THREE.MeshPhongMaterial({color: 0xff444444})
const clxForkMesh = new THREE.Mesh(clxForkGeometry, clxForkMaterial)
clxForkMesh.name = 'clxFork'
@ -437,7 +435,7 @@ export default class Clx3dObject extends THREE.Object3D {
}
const clxGemelGeometryR = Clx3dObject.clxGemelGeometryR
const clxGemelMaterial = new THREE.MeshPhongMaterial({ color: 0xff555555 })
const clxGemelMaterial = new THREE.MeshPhongMaterial({color: 0xff555555})
const clxGemelMeshL1 = new THREE.Mesh(clxGemelGeometryL, clxGemelMaterial)
clxGemelMeshL1.name = 'clxGemelMeshL1'
const clxGemelMeshL2 = new THREE.Mesh(clxGemelGeometryL, clxGemelMaterial)
@ -447,6 +445,13 @@ export default class Clx3dObject extends THREE.Object3D {
const clxGemelMeshR2 = new THREE.Mesh(clxGemelGeometryR, clxGemelMaterial)
clxGemelMeshR2.name = 'clxGemelMeshR2'
if (!Clx3dObject.clxForkBasePlateGeometry) {
Clx3dObject.clxForkBasePlateGeometry = Clx3dObject.createClxForkBasePlate()
}
const clxForkBasePlateGeometry = Clx3dObject.clxForkBasePlateGeometry
const clxForkBasePlateMesh = new THREE.Mesh(clxForkBasePlateGeometry, clxGemelMaterial)
clxForkBasePlateMesh.name = 'clxForkBasePlateMesh'
const d = 0
this.add(clxPedestalMesh)
@ -477,6 +482,7 @@ export default class Clx3dObject extends THREE.Object3D {
this.add(clxGemelMeshL2)
this.add(clxGemelMeshR1)
this.add(clxGemelMeshR2)
this.add(clxForkBasePlateMesh)
}
animationShowFork(z: number): Promise<void> {
@ -485,9 +491,12 @@ export default class Clx3dObject extends THREE.Object3D {
const clxGemelMeshL2 = this.getObjectByName('clxGemelMeshL2')
const clxGemelMeshR1 = this.getObjectByName('clxGemelMeshR1')
const clxGemelMeshR2 = this.getObjectByName('clxGemelMeshR2')
const clxForkBasePlateMesh = this.getObjectByName('clxForkBasePlateMesh')
const fy = clxFork.position.y
const time = 3
const ac = Math.asin(z / (2 * 0.8))
// clxGemelMeshL1.position.z = 0.5 - z/4
@ -496,13 +505,13 @@ export default class Clx3dObject extends THREE.Object3D {
gsap.to(clxGemelMeshL1.position, {
z: 0.5 - z / 4,
y: fy + 0.72,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshL1.rotation, {
x: -ac,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
@ -512,13 +521,13 @@ export default class Clx3dObject extends THREE.Object3D {
gsap.to(clxGemelMeshL2.position, {
z: 0.5 - z / 4 * 3,
y: fy + 0.72,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshL2.rotation, {
x: -ac,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
@ -529,13 +538,13 @@ export default class Clx3dObject extends THREE.Object3D {
gsap.to(clxGemelMeshR1.position, {
z: 0.5 - z / 4,
y: fy + 0.72,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshR1.rotation, {
x: ac,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
@ -546,13 +555,20 @@ export default class Clx3dObject extends THREE.Object3D {
gsap.to(clxGemelMeshR2.position, {
z: 0.5 - z / 4 * 3,
y: fy + 0.72,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshR2.rotation, {
x: ac,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxForkBasePlateMesh.position, {
y: fy,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
@ -560,7 +576,7 @@ export default class Clx3dObject extends THREE.Object3D {
return new Promise(resolve => {
gsap.to(clxFork.position, {
z: -z,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut',
onComplete: resolve
@ -579,28 +595,37 @@ export default class Clx3dObject extends THREE.Object3D {
const clxGemelMeshL2 = this.getObjectByName('clxGemelMeshL2')
const clxGemelMeshR1 = this.getObjectByName('clxGemelMeshR1')
const clxGemelMeshR2 = this.getObjectByName('clxGemelMeshR2')
const clxForkBasePlateMesh = this.getObjectByName('clxForkBasePlateMesh')
const time = 3
gsap.to(clxGemelMeshL1.position, {
y: y + 0.72,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshL2.position, {
y: y + 0.72,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshR1.position, {
y: y + 0.72,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshR2.position, {
y: y + 0.72,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxForkBasePlateMesh.position, {
y: y,
duration: time,
repeat: 0,
ease: 'sine.inOut'
})
@ -608,7 +633,7 @@ export default class Clx3dObject extends THREE.Object3D {
return new Promise(resolve => {
gsap.to(clxFork.position, {
y: y,
duration: 3,
duration: time,
repeat: 0,
ease: 'sine.inOut',
onComplete: resolve

Write Preview
Loading…
Cancel
Save