@ -11,6 +11,11 @@
let controls let controls
let mesh let mesh
let composer let composer
let pixelSize = 8
let container_element = document . getElementById ( 'container-index' )
let containerW = container_element . offsetWidth
let containerH = container_element . offsetHeight
const texture = new THREE . TextureLoader ( ) . load ( "public/images/main-txt.png" ) const texture = new THREE . TextureLoader ( ) . load ( "public/images/main-txt.png" )
texture . minFilter = THREE . NearestFilter texture . minFilter = THREE . NearestFilter
@ -23,10 +28,14 @@
SetupRenderer ( ) SetupRenderer ( )
scene = new THREE . Scene ( ) scene = new THREE . Scene ( )
SetupCamera ( ) SetupCamera ( )
SetupControls ( ) //SetupControls()
composer = new EffectComposer ( renderer ) ; composer = new EffectComposer ( renderer ) ;
const renderPixelatedPass = new RenderPixelatedPass ( 8 , scene , camera ) ; if ( window . innerWidth <= 1024 )
{
pixelSize = 4 ;
}
const renderPixelatedPass = new RenderPixelatedPass ( pixelSize , scene , camera ) ;
renderPixelatedPass . normalEdgeStrength = 0 ; renderPixelatedPass . normalEdgeStrength = 0 ;
renderPixelatedPass . depthEdgeStrength = 1 ; renderPixelatedPass . depthEdgeStrength = 1 ;
renderPixelatedPass . pixelAlignedPanning = false ; renderPixelatedPass . pixelAlignedPanning = false ;
@ -47,13 +56,14 @@
function SetupRenderer ( ) { function SetupRenderer ( ) {
renderer = new THREE . WebGLRenderer ( { antialias : true , alpha : true } ) renderer = new THREE . WebGLRenderer ( { antialias : true , alpha : true } )
renderer . setClearColor ( 0xffffff , 0 ) ; renderer . setClearColor ( 0xffffff , 0 ) ;
renderer . setSize ( window . innerWidth , window . innerHeight ) renderer . setSize ( containerW , containerH )
document . getElementById ( 'container' ) . appendChild ( renderer . domElement ) document . getElementById ( 'container-index ' ) . appendChild ( renderer . domElement )
} }
function SetupCamera ( ) { function SetupCamera ( ) {
aspect = ( window . innerWidth ) / ( window . innerHeight ) aspect = ( containerW ) / ( containerH )
frustumSize = 2
frustumSize = 1.75 / aspect
camera = new THREE . OrthographicCamera ( camera = new THREE . OrthographicCamera (
frustumSize * aspect / - 2 , frustumSize * aspect / - 2 ,
frustumSize * aspect / 2 , frustumSize * aspect / 2 ,
@ -64,6 +74,7 @@
) )
camera . position . x = 5 camera . position . x = 5
camera . position . set ( 0 , 0 , 20 )
} }
function SetupControls ( ) { function SetupControls ( ) {
@ -76,7 +87,7 @@
MIDDLE : THREE . MOUSE . DOLLY , MIDDLE : THREE . MOUSE . DOLLY ,
LEFT : THREE . MOUSE . PAN LEFT : THREE . MOUSE . PAN
} }
camera . position . set ( 0 , 0 , 20 )
controls . update ( ) controls . update ( )
} }
@ -95,27 +106,33 @@
requestAnimationFrame ( animate ) requestAnimationFrame ( animate )
const deltaTime = ( time - lastTime ) / 1000 const deltaTime = ( time - lastTime ) / 1000
lastTime = time lastTime = time
controls . update ( ) //controls.update()
// Rotate the mesh on the x and z axes
// Rotate the mesh on the x and z axes
mesh . rotation . x += 0.001 mesh . rotation . x += 0.001
mesh . rotation . z += 0.001 mesh . rotation . z += 0.001
mesh . rotation . y += 0.001 mesh . rotation . y += 0.001
mesh . position . x = 1 ; mesh . position . x = 0 ;
mesh . position . y = - 0.1 ; mesh . position . y = 0 ;
//texture.offset.x += 0.001;
//texture.offset.x += 0.001;
composer . render ( ) composer . render ( )
//renderer.render(scene, camera)
//renderer.render(scene, camera)
} }
function getContainerDimensions ( ) {
containerW = container_element . offsetWidth
containerH = container_element . offsetHeight
}
window . addEventListener ( 'resize' , ( ) => { window . addEventListener ( 'resize' , ( ) => {
aspect = ( window . innerWidth ) / ( window . innerHeight ) getContainerDimensions ( )
aspect = ( containerW ) / ( containerH )
camera . left = - frustumSize * aspect / 2 camera . left = - frustumSize * aspect / 2
camera . right = frustumSize * aspect / 2 camera . right = frustumSize * aspect / 2
camera . top = frustumSize / 2 camera . top = frustumSize / 2
camera . bottom = - frustumSize / 2 camera . bottom = - frustumSize / 2
camera . updateProjectionMatrix ( ) camera . updateProjectionMatrix ( )
renderer . setPixelRatio ( window . devicePixelRatio ) renderer . setPixelRatio ( window . devicePixelRatio )
renderer . setSize ( window . innerWidth , window . innerHeight ) renderer . setSize ( containerW , containerH )
} ) } )
