What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View


var composer, outlinePass;
const scene = new THREE.Scene(),
    width = window.innerWidth,
    height = window.innerHeight,
    camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000),
    renderer = new THREE.WebGLRenderer(),
    startTime = new Date().getTime(),
    timeOffset = 15

let currentTime = 0

renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

let CameraHolder = new THREE.Object3D()
CameraHolder.add(camera)
CameraHolder.rotation.x = Math.PI * .15;
scene.add(CameraHolder)

composer = new THREE.EffectComposer(renderer)

var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass(outlinePass);

let bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(width, height), 1.5, .4, .85);
renderer.toneMappingExposure = 1;
bloomPass.threshold = 0;
bloomPass.strength = 1.5;
bloomPass.radius = 1.5;
composer.addPass(bloomPass);

let filmPass = new THREE.FilmPass(0.34, 0.025, 256, false);
composer.addPass(filmPass);

outlinePass.edgeStrength = 3
outlinePass.edgeThickness = 1
outlinePass.edgeGlow = 0
outlinePass.visibleEdgeColor.set('#ffffff')
outlinePass.hiddenEdgeColor.set('#ffffff')
outlinePass.BlurDirectionX = new THREE.Vector2(0.0, 0.0)
outlinePass.BlurDirectionY = new THREE.Vector2(0.0, 0.0)

let uniforms = {
    camera: {
        value: camera.position
    },
    time: {
        value: 0
    }
}

//var geometry = new THREE.PlaneGeometry(Math.round(width * 0.005), Math.round(height * 0.005), 600, 600);
var geometry = new THREE.SphereGeometry(1, 100, 100);
// var geometry = new THREE.TorusGeometry(2, 1, 32, 200);
let material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    fragmentShader: shaders.cloth.fragment,
    vertexShader: shaders.cloth.vertex
})
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
camera.position.z = 28

function animate() {
    var now = new Date().getTime();
    currentTime = (now - startTime) / 1000;
    let t = currentTime + timeOffset;

    CameraHolder.updateMatrixWorld();
    var vector = camera.position.clone();
    vector.applyMatrix4(camera.matrixWorld);

    uniforms.time.value = t;
    uniforms.camera.value = vector;

    //camera.fov = 55 + Math.cos(t) * 50;
    camera.position.z = 3 + Math.cos(t) * -1;
    camera.updateProjectionMatrix();

    //CameraHolder.rotation.z = t * 0.1
    //CameraHolder.rotation.x =  Math.cos(t * 0.15) * (Math.PI * .25)

    requestAnimationFrame(animate)
    //renderer.render(scene, camera)
    composer.render()
}
animate()

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize, false);