@@ -7,7 +7,7 @@ import styles from './christmas.module.scss'
77import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
88// 导入draco解码器
99import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
10- import gasp from 'gasp '
10+ import gsap from 'gsap '
1111import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
1212import { Water } from './Water2'
1313const Christmas = ( ) => {
@@ -69,6 +69,8 @@ const Christmas = () => {
6969 renderer . outputColorSpace = THREE . SRGBColorSpace
7070 renderer . toneMapping = THREE . ACESFilmicToneMapping
7171 renderer . toneMappingExposure = 0.5 // 曝光度
72+ renderer . shadowMap . enabled = true // 允许光源阴影
73+ 7274 // 创建水面
7375 const waterGeometry = new THREE . CircleGeometry ( 300 , 32 )
7476 const waterMesh = new Water ( waterGeometry , {
@@ -81,14 +83,66 @@ const Christmas = () => {
8183 waterMesh . rotation . x = - Math . PI / 2
8284 waterMesh . position . y = - 0.4
8385 scene . add ( waterMesh )
86+ // 创建点光源
87+ const pointLight = new THREE . PointLight ( 0xffffff , 50 )
88+ pointLight . position . set ( 0.1 , 2.4 , 0 )
89+ pointLight . castShadow = true
90+ scene . add ( pointLight )
91+ 92+ // 创建点光源组
93+ const pointLightGroup = new THREE . Group ( )
94+ pointLightGroup . position . set ( - 8 , 2.5 , - 1.5 )
95+ let pointLightArr : THREE . Mesh [ ] = [ ]
96+ const radius = 2
97+ for ( let i = 0 ; i < 3 ; i ++ ) {
98+ const pointLight = new THREE . PointLight ( 0xffffff , 1 )
99+ // 创建球体等灯泡
100+ const sphereGeometry = new THREE . SphereGeometry ( 0.2 , 32 , 32 )
101+ const sphereMaterial = new THREE . MeshStandardMaterial ( {
102+ color : 0xffffff ,
103+ emissive : 0xffffff ,
104+ emissiveIntensity : 10
105+ } )
106+ const sphere = new THREE . Mesh ( sphereGeometry , sphereMaterial )
107+ 108+ sphere . position . set (
109+ radius * Math . cos ( ( i * 2 * Math . PI ) / 3 ) ,
110+ Math . cos ( ( i * 2 * Math . PI ) / 3 ) ,
111+ radius * Math . sin ( ( i * 2 * Math . PI ) / 3 )
112+ )
113+ sphere . add ( pointLight )
114+ pointLightArr . push ( sphere )
115+ pointLightGroup . add ( sphere )
116+ }
84117
85- function render ( ) {
118+ scene . add ( pointLightGroup )
119+ // 使用补间函数,从0到2π,使灯泡旋转
120+ let options = {
121+ angle : 0
122+ }
123+ gsap . to ( options , {
124+ angle : Math . PI * 2 ,
125+ duration : 10 ,
126+ repeat : - 1 ,
127+ ease : 'linear' ,
128+ onUpdate : ( ) => {
129+ pointLightGroup . rotation . y = options . angle
130+ pointLightArr . forEach ( ( item , index ) => {
131+ item . position . set (
132+ radius * Math . cos ( ( index * 2 * Math . PI ) / 3 ) ,
133+ Math . cos ( ( index * 2 * Math . PI ) / 3 + options . angle * 5 ) ,
134+ radius * Math . sin ( ( index * 2 * Math . PI ) / 3 )
135+ )
136+ } )
137+ }
138+ } )
139+ function animate ( ) {
86140 controller && controller . update ( )
87141 renderer . render ( scene , camera )
88- requestAnimation = window . requestAnimationFrame ( render )
142+ requestAnimation = window . requestAnimationFrame ( animate )
89143 }
90144 useEffect ( ( ) => {
91- render ( )
145+ animate ( )
92146 canvasDom . current ! . appendChild ( renderer . domElement )
93147 const gltfLoader = new GLTFLoader ( )
94148 // 实例化加载器draco
@@ -108,6 +162,11 @@ const Christmas = () => {
108162 if ( child . name === 'Plane' ) {
109163 child . visible = false
110164 }
165+ if ( ( child as THREE . Mesh ) ?. isMesh ) {
166+ // 物体允许发射阴影和接收阴影
167+ child . castShadow = true
168+ child . receiveShadow = true
169+ }
111170 } )
112171 }
113172 )
0 commit comments