import { BufferGeometry , Vector3 , Color , Float32BufferAttribute , TextureLoader , PointsMaterial , AdditiveBlending , Points } from "three" ; import starPng from "./img/star.png" ; export const starBackground = ( ) => { const positions = [ ] ; const colors = [ ] ; const geometry = new BufferGeometry ( ) ; for ( var i = 0 ; i < 10000 ; i ++ ) { var vertex = new Vector3 ( ) ; vertex . x = Math . random ( ) * 2 - 1 ; vertex . y = Math . random ( ) * 2 - 1 ; vertex . z = Math . random ( ) * 2 - 1 ; positions . push ( vertex . x , vertex . y , vertex . z ) ; var color = new Color ( ) ; color . setHSL ( Math . random ( ) * 0.2 + 0.5 , 0.55 , Math . random ( ) * 0.25 + 0.55 ) ; colors . push ( color . r , color . g , color . b ) ; } geometry . setAttribute ( "position" , new Float32BufferAttribute ( positions , 3 ) ) ; geometry . setAttribute ( "color" , new Float32BufferAttribute ( colors , 3 ) ) ; var textureLoader = new TextureLoader ( ) ; var texture = textureLoader . load ( starPng ) ; var starsMaterial = new PointsMaterial ( { map : texture , size : 1 , transparent : true , opacity : 1 , vertexColors : true , blending : AdditiveBlending , sizeAttenuation : true , } ) ; let stars = new Points ( geometry , starsMaterial ) ; stars . scale . set ( 300 , 300 , 300 ) ; return stars ; } ;