2 changed files with 140 additions and 52 deletions
@ -0,0 +1,100 @@ |
|||
import * as THREE from 'three' |
|||
import gsap from 'gsap' |
|||
|
|||
export default class Point extends THREE.Object3D{ |
|||
#point |
|||
#linePoints |
|||
#line |
|||
#popover |
|||
#timeLine=gsap.timeline() |
|||
constructor (position,popover){ |
|||
super() |
|||
this.#linePoints=[ |
|||
[115*position.lan, 0.7, 115*position.lng], |
|||
[115*(position.lan -0.01), 6, 115*position.lng], |
|||
[115*(position.lan -0.2), 6, 115*position.lng], |
|||
] |
|||
this.#popover=popover |
|||
this.refesh() |
|||
|
|||
this.#timeLine=gsap.timeline() |
|||
this.#timeLine.pause() |
|||
var line1={x:this.#linePoints[0][0],y:this.#linePoints[0][1]} |
|||
this.#timeLine.to(line1,{x:this.#linePoints[1][0],y:this.#linePoints[1][1], duration:0.3,onUpdate:()=>{ |
|||
this.#line.geometry.setAttribute("position",new THREE.Float32BufferAttribute([ |
|||
...this.#linePoints[0], |
|||
line1.x,line1.y,this.#linePoints[1][2] |
|||
],3)) |
|||
}}) |
|||
var line2={x:this.#linePoints[1][0]} |
|||
this.#timeLine.to(line2,{x:this.#linePoints[2][0], duration:0.7,onUpdate:()=>{ |
|||
this.#line.geometry.setAttribute("position",new THREE.Float32BufferAttribute([ |
|||
...this.#linePoints[0], |
|||
...this.#linePoints[1], |
|||
line2.x,this.#linePoints[2][1],this.#linePoints[2][2] |
|||
],3)) |
|||
},onComplete:()=>{ |
|||
this.#popover.position.set(...this.#linePoints[2]) |
|||
this.#popover.visible=true |
|||
}}) |
|||
} |
|||
#update(){ |
|||
const geometry = new THREE.SphereGeometry( 0.7, 20, 20 ); |
|||
const material = new THREE.MeshPhysicalMaterial( { |
|||
clearcoat: 1.0, |
|||
clearcoatRoughness: 0.4, |
|||
metalness: 0.8, |
|||
roughness: 0.5, |
|||
color: 0x69E7FC, |
|||
emissive:0x24BBD4, |
|||
flatShading:false, |
|||
normalScale: new THREE.Vector2( 0.15, 0.15 ), |
|||
}); |
|||
this.#point=new THREE.Mesh(geometry, material) |
|||
this.#point.position.set(...this.#linePoints[0]) |
|||
this.add(this.#point)//添加模型
|
|||
//线
|
|||
var lineGeometry=new THREE.BufferGeometry() |
|||
// lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([
|
|||
// ...this.#linePoints[0],
|
|||
// ...this.#linePoints[1],
|
|||
// ...this.#linePoints[2],
|
|||
// ],3))
|
|||
var lineMaterial=new THREE.LineBasicMaterial() |
|||
this.#line=new THREE.Line(lineGeometry,lineMaterial) |
|||
// this.#line.visible=false
|
|||
this.add(this.#line) |
|||
} |
|||
refesh(){ |
|||
this.dispose() |
|||
this.#update() |
|||
} |
|||
dispose(){ |
|||
for(var {geometry,material} of this.children){ |
|||
geometry.dispose() |
|||
material.dispose() |
|||
} |
|||
while (this.children[0]){ |
|||
this.remove(this.children[0]) |
|||
} |
|||
} |
|||
async show(){ |
|||
await this.#timeLine.play() |
|||
} |
|||
hide(){ |
|||
this.#popover.visible=false |
|||
this.#timeLine.reverse(null, false) |
|||
} |
|||
out(){ |
|||
this.#point.scale.set(1,1,1) |
|||
} |
|||
hover(){ |
|||
this.#point.scale.set(1.4,1.4,1.4) |
|||
} |
|||
get mesh(){ |
|||
return this.#point |
|||
} |
|||
get time(){ |
|||
return this.#timeLine |
|||
} |
|||
} |
|||
Loading…
Reference in new issue