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