@@ -23,8 +23,8 @@ const Christmas = () => {
2323 0.1 ,
2424 1000
2525 )
26- camera . position . set ( 0 , 2 , 6 )
27- camera . lookAt ( 0 , 0 , 0 )
26+ camera . position . set ( - 3.23 , 2.98 , 4.06 )
27+ camera . updateProjectionMatrix ( )
2828 // 创建渲染器
2929 const renderer = new THREE . WebGLRenderer ( {
3030 antialias : true // 抗锯齿
@@ -35,6 +35,8 @@ const Christmas = () => {
3535 controller . enableDamping = true
3636 // 设置阻尼系数
3737 controller . dampingFactor = 0.05 // 数值越小,惯性越大
38+ controller . target . set ( - 8 , 2 , 0 )
39+ 3840 function onresize ( ) {
3941 renderer . setSize (
4042 canvasDom . current ! . offsetWidth ,
@@ -179,17 +181,19 @@ const Christmas = () => {
179181 }
180182 }
181183 ]
182- let index = useRef ( 0 )
184+ let [ index , setIndex ] = useState ( 0 )
185+ let i = 0
183186 let isAnimate = useRef ( false )
184187 function onscroll ( e : WheelEvent ) {
185188 if ( isAnimate . current ) return
186189 isAnimate . current = true
187190 if ( e . deltaY > 0 ) {
188- index . current += 1
189- if ( index . current > scenes . length ) {
190- index . current = 0
191+ i += 1
192+ if ( i >= scenes . length ) {
193+ i = 0
191194 }
192- scenes [ index . current ] . callback ( )
195+ setIndex ( i )
196+ scenes [ i ] . callback ( )
193197 }
194198 setTimeout ( ( ) => {
195199 isAnimate . current = false
@@ -269,12 +273,42 @@ const Christmas = () => {
269273 }
270274 } , [ ] )
271275 return (
272- < div className = "page-container" >
276+ < div className = "page-container" style = { { position : 'relative' } } >
273277 < div
274278 id = "canvasDom"
275279 className = { styles . canvasContainer }
276280 ref = { canvasDom }
277281 > </ div >
282+ < div
283+ className = { [ styles . scenes , index == 0 ? styles . lastScene : '' ] . join (
284+ ' '
285+ ) }
286+ style = { {
287+ transform : `translate3d(0, ${ - index * 100 }
288+ } }
289+ >
290+ { scenes . map ( ( scene , index ) => {
291+ return (
292+ < div
293+ key = { index }
294+ style = { {
295+ width : '100%' ,
296+ height : '100%'
297+ } }
298+ >
299+ < h1
300+ style = { {
301+ padding : '50px 50px' ,
302+ fontSize : '30px' ,
303+ color : 'white'
304+ } }
305+ >
306+ { scene . text }
307+ </ h1 >
308+ </ div >
309+ )
310+ } ) }
311+ </ div >
278312 </ div >
279313 )
280314}
0 commit comments