@@ -10,6 +10,7 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
1010import gsap from 'gsap'
1111import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
1212import { Water } from './Water2'
13+ import { on } from 'events'
1314const Christmas = ( ) => {
1415 const canvasDom = useRef < HTMLDivElement > ( null )
1516 let requestAnimation : number
@@ -120,6 +121,7 @@ const Christmas = () => {
120121 let options = {
121122 angle : 0
122123 }
124+ // 旋转灯动效
123125 gsap . to ( options , {
124126 angle : Math . PI * 2 ,
125127 duration : 10 ,
@@ -136,6 +138,89 @@ const Christmas = () => {
136138 } )
137139 }
138140 } )
141+ 142+ let scenes = [
143+ {
144+ text : '圣诞快乐' ,
145+ callback ( ) {
146+ // 执行函数切换位置
147+ translateCamera (
148+ new THREE . Vector3 ( - 3.23 , 3 , 4.06 ) ,
149+ new THREE . Vector3 ( - 8 , 2 , 0 )
150+ )
151+ }
152+ } ,
153+ {
154+ text : '感谢在这么大的世界里遇见了你' ,
155+ callback ( ) {
156+ translateCamera ( new THREE . Vector3 ( 7 , 0 , 23 ) , new THREE . Vector3 ( 0 , 0 , 0 ) )
157+ }
158+ } ,
159+ {
160+ text : '愿与你探寻世界的每一个角落' ,
161+ callback ( ) {
162+ translateCamera ( new THREE . Vector3 ( 10 , 3 , 0 ) , new THREE . Vector3 ( 5 , 2 , 0 ) )
163+ }
164+ } ,
165+ {
166+ text : '愿将天上的星星送给你' ,
167+ callback ( ) {
168+ translateCamera ( new THREE . Vector3 ( 7 , 0 , 23 ) , new THREE . Vector3 ( 0 , 0 , 0 ) )
169+ // makeHeart()
170+ }
171+ } ,
172+ {
173+ text : '愿你一生健康,平安喜乐' ,
174+ callback ( ) {
175+ translateCamera (
176+ new THREE . Vector3 ( - 20 , 1.3 , 6.6 ) ,
177+ new THREE . Vector3 ( 5 , 2 , 0 )
178+ )
179+ }
180+ }
181+ ]
182+ let index = useRef ( 0 )
183+ let isAnimate = useRef ( false )
184+ function onscroll ( e : WheelEvent ) {
185+ if ( isAnimate . current ) return
186+ isAnimate . current = true
187+ if ( e . deltaY > 0 ) {
188+ index . current += 1
189+ if ( index . current > scenes . length ) {
190+ index . current = 0
191+ }
192+ scenes [ index . current ] . callback ( )
193+ }
194+ setTimeout ( ( ) => {
195+ isAnimate . current = false
196+ } , 1000 )
197+ }
198+ function addScrollEvent ( ) {
199+ window . addEventListener ( 'wheel' , onscroll , false )
200+ }
201+ // 使用补间动画移动相机
202+ let timeLine1 = gsap . timeline ( )
203+ let timeline2 = gsap . timeline ( )
204+ 205+ // 定义相机移动函数
206+ function translateCamera ( position : THREE . Vector3 , target : THREE . Vector3 ) {
207+ timeLine1 . to ( camera . position , {
208+ x : position . x ,
209+ y : position . y ,
210+ z : position . z ,
211+ duration : 1 ,
212+ ease : 'power2.inOut'
213+ } )
214+ 215+ timeline2 . to ( controller . target , {
216+ x : target . x ,
217+ y : target . y ,
218+ z : target . z ,
219+ duration : 1 ,
220+ ease : 'power2.inOut'
221+ } )
222+ }
223+ 139224 function animate ( ) {
140225 controller && controller . update ( )
141226 renderer . render ( scene , camera )
@@ -168,10 +253,11 @@ const Christmas = () => {
168253 child . receiveShadow = true
169254 }
170255 } )
256+ addScrollEvent ( )
171257 }
172258 )
173- 174259 return ( ) => {
260+ window . removeEventListener ( 'wheel' , onscroll )
175261 window . cancelAnimationFrame ( requestAnimation )
176262 }
177263 } , [ ] )
0 commit comments