class window.App
container : null
stats : null
camera : null
scene : null
renderer : null
windowHalfX : null
windowHalfY : null
mesh : null
clock : null
uniforms : {}
buffer : null
positionBuff1 : []
positionBuff2 : []
positionBuff3 : []
extrudeSettings : null
geometry : null
shape : null
isBuild1 : false
isBuild2 : false
rd : 0
randomPoints : []
count : 0
inBuild : 0
composer : null
meshes : []
gui : null
cameraLookatVector : null
optionsLine : {
normalRatioRange : 10.0,
zoom : 1,
baseColor : 0.8,
alpha : 1.0
}
constructor: ->
@container = document.getElementById('container')
@windowHalfX = window.innerWidth / 2;
@windowHalfY = window.innerHeight / 2;
@camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 2000 );
@camera.position.z = 450;
@scene = new THREE.Scene();
# @ambient = new THREE.AmbientLight( 0xff0000 );
# @scene.add( @ambient );
@renderer = new THREE.WebGLRenderer({antialias : true});
@renderer.setSize( window.innerWidth, window.innerHeight );
@container.appendChild( @renderer.domElement );
window.addEventListener( 'resize', @onWindowResize, false );
@cameraLookatVector = new THREE.Vector3( 0, 0, -300 )
@uniformsline =
normalRatioRange:
type: "f"
value: @optionsLine.normalRatioRange
zoom:
type: "f"
value: @optionsLine.zoom
time:
type: "f"
value: 0.0
alpha:
type: "f"
value: 0.85
baseColor:
type: "c"
value: new THREE.Color(@optionsLine.baseColor)
@uniformsline2 =
normalRatioRange:
type: "f"
value: @optionsLine.normalRatioRange
zoom:
type: "f"
value: @optionsLine.zoom
time:
type: "f"
value: 0.0
alpha:
type: "f"
value: 0.85
baseColor:
type: "c"
value: new THREE.Color(@optionsLine.baseColor)
@uniformsline3 =
normalRatioRange:
type: "f"
value: @optionsLine.normalRatioRange
zoom:
type: "f"
value: @optionsLine.zoom
time:
type: "f"
value: 0.0
alpha:
type: "f"
value: 0.85
baseColor:
type: "c"
value: new THREE.Color(@optionsLine.baseColor)
@clock1 = new THREE.Clock(false)
@clock2 = new THREE.Clock(false)
@clock3 = new THREE.Clock(false)
fb = document.getElementById('facebook');
twt = document.getElementById('twitter');
lin = document.getElementById('linkedin');
plus = document.getElementById('plus');
fb.addEventListener('click', ()=>
window.open("https://www.facebook.com/Pierre.de.miel", '_blank');
, false)
twt.addEventListener('click', ()=>
window.open("https://twitter.com/Samsyyyy", '_blank');
, false)
lin.addEventListener('click', ()=>
window.open("https://www.linkedin.com/profile/view?id=182449324&trk=nav_responsive_tab_profile", '_blank');
, false)
plus.addEventListener('click', ()=>
window.open("http://experiments.crma.ninja/repos/samuel-honigstein/", '_blank');
, false)
@initGUI()
window.addEventListener( 'resize', @onWindowResize, false );
window.addEventListener( 'mousemove', @onDocumentMouseMove, false );
@buildPlanes()
@buildPlanes()
setInterval( ()=>
@removeAndReAdd()
,12500)
######
@animate()
onCLick:(e) =>
if @count == 0
###@scene.remove(@plane_mesh)###
### @isBuild = false###
@randomPoints = []
@randomPoints.push( new THREE.Vector3( -2000, THREE.Math.randFloat( -800, 800 ),0) );
ratio = 90
if(@count%2 == 0)
@rd = THREE.Math.randFloat( -ratio*4, ratio*5 )
else
@rd = 0
wdby2 = window.innerWidth / 2
hdby2 = window.innerHeight / 2
@randomPoints.push( new THREE.Vector3( e.clientX - wdby2, window.innerHeight - e.clientY - hdby2, @rd ) );
@count++
if @count > 3
@randomPoints.push( new THREE.Vector3( 2000, THREE.Math.randFloat( -800, 800 ), 0 ))
@buildPlanes()
initPostProcessing:()=>
renderModel = new THREE.RenderPass(@scene, @camera);
copyPass = new THREE.ShaderPass(THREE.CopyShader);
composer = new THREE.EffectComposer(@renderer);
composer.addPass(renderModel);
composer.addPass(copyPass);
copyPass.renderToScreen = true;
@toggleEffects();
toggleEffects:()=>
@composer = new THREE.EffectComposer(@renderer);
@composer.addPass(new THREE.RenderPass(@scene, @camera));
effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
width = window.innerWidth || 2;
height = window.innerHeight || 2;
effectFXAA.uniforms['resolution'].value.set(1 / width, 1 / height);
@composer.addPass(effectFXAA);
effectFilm = new THREE.FilmPass(0.1, 0.125, 2048, false);
@composer.addPass(effectFilm);
effectBloom = new THREE.BloomPass(.8);
@composer.addPass(effectBloom);
vignettePass = new THREE.ShaderPass(THREE.VignetteShader);
vignettePass.uniforms["darkness"].value = 1.1;
vignettePass.uniforms["offset"].value = 1;
vignettePass.renderToScreen = true;
@composer.addPass(vignettePass);
initGUI: =>
@gui = new dat.GUI();
@gui.values = {}
@gui.values.normalRatioRange = @gui.add(@optionsLine,'normalRatioRange',-10,50).step(0.5);
@gui.values.normalRatioRange.onChange (value) =>
@uniformsline.normalRatioRange.value = value
@uniformsline2.normalRatioRange.value = value
@uniformsline3.normalRatioRange.value = value
buildPlanes:()=>
id = @inBuild % 3
@inBuild++
if id == 0
ratio = 8
else ratio = 6
@shape = new THREE.Shape();
@shape.moveTo(10 * ratio, ratio * 0);
@shape.lineTo(12.5 * ratio, ratio * 2.5);
@shape.lineTo(12.5 * ratio, ratio * 5);
@shape.lineTo(10 * ratio, ratio * 7.5);
@shape.lineTo(7.5 * ratio, ratio * 7.5);
@shape.lineTo(5 * ratio, ratio * 5);
@shape.lineTo(5 * ratio, ratio * 2.5);
@shape.lineTo(7.5 * ratio, ratio * 0);
@shape.lineTo(10 * ratio, ratio * 0);
@randomPoints = []
range = 5
ratio = 90
wdby2 = window.innerWidth / 2
hdby2 = window.innerHeight / 2
@randomPoints.push( new THREE.Vector3( -2000, THREE.Math.randFloat( -800, 800 ),0) );
i = 0
rd = 0
count = 5
while i < count
if(i%2 == 0)
@rd = THREE.Math.randFloat( 0, ratio*6 )
else
@rd = 0
@randomPoints.push( new THREE.Vector3(THREE.Math.randFloat( (window.innerWidth / count) * i, (window.innerWidth / count) *i+1 ) - wdby2 , window.innerHeight - THREE.Math.randFloat( 0, window.innerHeight ) - hdby2, @rd ) );
i++
@randomPoints.push( new THREE.Vector3( 2000, THREE.Math.randFloat( -800, 800 ), 0 ))
randomSpline = new THREE.SplineCurve3( @randomPoints );
@extrudeSettings = {
steps : 800,
bevelEnabled : true,
extrudePath : randomSpline,
bevelThickness : 20,
bevelSize : 20,
bevelSegments : 20
};
@groundMaterial = new THREE.MeshLambertMaterial( {shading: THREE.FlatShading , ambient: 0xffffff, color: 0xff0000, specular: 0x050505, transparent : true, opacity : 0.8 } )
geometry = new THREE.ExtrudeGeometry( @shape, @extrudeSettings );
@buffer = new THREE.BufferGeometry();
@buffer.fromGeometry(geometry)
if id == 0
@clock1 = new THREE.Clock(true)
@plane_material1 = new THREE.ShaderMaterial({
vertexShader : document.getElementById('shader-vertex-custoline').textContent,
fragmentShader : document.getElementById('shader-fragment-custoline').textContent,
transparent : true,
uniforms : @uniformsline,
side : THREE.DoubleSide
});
@materials = [
@groundMaterial,
@plane_material1
]
@isBuild1 = true
@positionBuff1 = @buffer.attributes.position
else if id == 1
@clock2 = new THREE.Clock(true)
@plane_material2 = new THREE.ShaderMaterial({
vertexShader : document.getElementById('shader-vertex-custoline').textContent,
fragmentShader : document.getElementById('shader-fragment-custoline2').textContent,
transparent : true,
uniforms : @uniformsline2,
side : THREE.DoubleSide
});
@materials = [
@groundMaterial,
@plane_material2
]
@isBuild2 = true
@positionBuff2 = @buffer.attributes.position
else
@clock3 = new THREE.Clock(true)
@plane_material3 = new THREE.ShaderMaterial({
vertexShader : document.getElementById('shader-vertex-custoline').textContent,
fragmentShader : document.getElementById('shader-fragment-custoline3').textContent,
transparent : true,
uniforms : @uniformsline3,
side : THREE.DoubleSide
});
@materials = [
@groundMaterial,
@plane_material3
]
@isBuild3 = true
@positionBuff3 = @buffer.attributes.position
@plane_mesh = THREE.SceneUtils.createMultiMaterialObject( @buffer, @materials );
@meshes.push(@plane_mesh)
@scene.add( @plane_mesh );
ChangeAnim:()=>
lght = 45
first = @positionBuff1.array.subarray(lght, @positionBuff1.length);
second = @positionBuff1.array.subarray(0, lght);
@positionBuff1.array = @Float32Concat(first,second);
###@plane_mesh.children[1].geometry.computeBoundingBox();###
ChangeAnim2:()=>
lght = 45
first = @positionBuff2.array.subarray(lght, @positionBuff2.length);
second = @positionBuff2.array.subarray(0, lght);
@positionBuff2.array = @Float32Concat(first,second);
###@plane_mesh.children[1].geometry.computeBoundingBox();###
ChangeAnim3:()=>
lght = 45
first = @positionBuff3.array.subarray(lght, @positionBuff3.length);
second = @positionBuff3.array.subarray(0, lght);
@positionBuff3.array = @Float32Concat(first,second);
###@plane_mesh.children[1].geometry.computeBoundingBox();###
Float32Concat:(first,second)=>
firstLength = first.length
result = new Float32Array(firstLength + second.length);
result.set(first);
result.set(second, firstLength);
return result;
removeAndReAdd:()=>
@scene.remove(@meshes[0])
@scene.remove(@meshes[1])
@meshes = []
@isBuild3 = false
@isBuild2 = false
@isBuild1 = false
@buildPlanes()
setTimeout( ()=>
@buildPlanes()
,500)
onDocumentMouseMove:(event)=>
event.preventDefault();
@camera.position.x = ( event.clientX / window.innerWidth ) * 700 - 350;
@camera.position.y = - ( event.clientY / window.innerHeight ) * 700 + 350;
animate: =>
requestAnimationFrame( @animate );
if @isBuild1
@.plane_material1.uniforms['time'].value = @clock1.getElapsedTime();
@ChangeAnim()
if @isBuild2
@.plane_material2.uniforms['time'].value = @clock2.getElapsedTime();
@ChangeAnim2()
if @isBuild3
@.plane_material3.uniforms['time'].value = @clock3.getElapsedTime();
@ChangeAnim3()
# @.groundMaterial.uniforms['time'].value = @clock.getElapsedTime();
# @mesh.rotation.x += 0.005;
# @mesh.rotation.y += 0.01;
if @meshes[0]
@meshes[0].children[1].geometry.attributes.position.needsUpdate = true;
if @meshes[1]
@meshes[1].children[1].geometry.attributes.position.needsUpdate = true;
@renderer.setClearColor(0x000000, 1);
@renderer.render( @scene, @camera );
@camera.lookAt(@cameraLookatVector);
onWindowResize:=>
@camera.aspect = window.innerWidth / window.innerHeight;
@camera.updateProjectionMatrix();
@renderer.setSize( window.innerWidth, window.innerHeight );
App = new window.App();
App.init();
!
