Разработка, реклама, дизайн и поддержка бизнеса в цифровой среде
LET'S GO!
Тык и веди
Предложить проект
var ww = window.innerWidth, wh = window.innerHeight; function init(){ /* WEBGL RENDERER */ renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')}); renderer.setSize(ww,wh); /* SCENE */ scene = new THREE.Scene(); /* CAMERA */ camera = new THREE.OrthographicCamera(ww/-2,ww/2,wh/2,wh/-2,0,1000); camera.position.set(0, 0, 500); scene.add(camera); /* LIGHT */ light = new THREE.DirectionalLight(0xffffff, 1); light.position.set( 0, 250, 700 ); scene.add(light); //particles will be the 3D object containing all the particles particles = new THREE.Object3D();; scene.add(particles); //Add events listeners on the page document.addEventListener("mousemove", mouseMove); document.addEventListener("touchemove", mouseMove); renderer.render(scene,camera); //Init request animation frame animate(); }; //Init var with mouse position var mouse = {x:0,y:0}; function mouseMove(e){ //3D universe come from the center so I substract half of the screen on the mouse position //By doing that, the cursor on the left will give -window/2 and on the right window/2 //For the Y axis it's a bit different because the top equal 0 but in the scene the top is the positive side mouse.x = e.clientX-(ww/2); mouse.y = (wh/2)-e.clientY; }; function createParticle(){ //Create a geometry used for the particles which contains nothing for now var geometry = new THREE.Geometry(); //Create a vector which equal to the mouse position var vertices = new THREE.Vector3( mouse.x, mouse.y, -10 ); //We apply our vector inside the geometry geometry.vertices.push(vertices); //We create a white material //sizeAttenuation defines if the particle will be small if far from the camera var material = new THREE.PointsMaterial({ color : 0X00ff00, size : 3, transparent : true, sizeAttenuation : false }); //Point cloud is a specific Mesh for particles particle = new THREE.Points(geometry, material); //We create a random speed for each particle for aesthetics particle.speed = Math.random()/100+0.002 //We set a random position for each particle particle.direction = { x : (Math.random()-.5)*ww*2, y : (Math.random()-.5)*wh*2 }; particles.add(particle); }
window.onload = init; console.warn = function() {}; // what warnings? var selector= '.tn-elem__2381583471602451581454.tn-atom'; function init() { var root = new THREERoot({ createCameraControls: !true, antialias: (window.devicePixelRatio === 1), fov: 80 }); root.renderer.setClearColor(0x000000, 0); root.renderer.setPixelRatio(window.devicePixelRatio || 1); root.camera.position.set(0, 0, 60); var width = 100; var height = 60; var slide = new Slide(width, height, 'out'); var l1 = new THREE.ImageLoader(); l1.setCrossOrigin('Anonymous'); l1.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/winter.jpg', function(img) { slide.setImage(img); }) root.scene.add(slide); var slide2 = new Slide(width, height, 'in'); var l2 = new THREE.ImageLoader(); l2.setCrossOrigin('Anonymous'); l2.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/spring.jpg', function(img) { slide2.setImage(img); }) root.scene.add(slide2); var tl = new TimelineMax({repeat:-1, repeatDelay:1.0, yoyo: true}); tl.add(slide.transition(), 0); tl.add(slide2.transition(), 0); createTweenScrubber(tl); window.addEventListener('keyup', function(e) { if (e.keyCode === 80) { tl.paused(!tl.paused()); } }); } //////////////////// // CLASSES //////////////////// function Slide(width, height, animationPhase) { var plane = new THREE.PlaneGeometry(width, height, width * 2, height * 2); THREE.BAS.Utils.separateFaces(plane); var geometry = new SlideGeometry(plane); geometry.bufferUVs(); var aAnimation = geometry.createAttribute('aAnimation', 2); var aStartPosition = geometry.createAttribute('aStartPosition', 3); var aControl0 = geometry.createAttribute('aControl0', 3); var aControl1 = geometry.createAttribute('aControl1', 3); var aEndPosition = geometry.createAttribute('aEndPosition', 3); var i, i2, i3, i4, v; var minDuration = 0.8; var maxDuration = 1.2; var maxDelayX = 0.9; var maxDelayY = 0.125; var stretch = 0.11; this.totalDuration = maxDuration + maxDelayX + maxDelayY + stretch; var startPosition = new THREE.Vector3(); var control0 = new THREE.Vector3(); var control1 = new THREE.Vector3(); var endPosition = new THREE.Vector3(); var tempPoint = new THREE.Vector3(); function getControlPoint0(centroid) { var signY = Math.sign(centroid.y); tempPoint.x = THREE.Math.randFloat(0.1, 0.3) * 50; tempPoint.y = signY * THREE.Math.randFloat(0.1, 0.3) * 70; tempPoint.z = THREE.Math.randFloatSpread(20); return tempPoint; } function getControlPoint1(centroid) { var signY = Math.sign(centroid.y); tempPoint.x = THREE.Math.randFloat(0.3, 0.6) * 50; tempPoint.y = -signY * THREE.Math.randFloat(0.3, 0.6) * 70; tempPoint.z = THREE.Math.randFloatSpread(20); return tempPoint; } for (i = 0, i2 = 0, i3 = 0, i4 = 0; i < geometry.faceCount; i++, i2 += 6, i3 += 9, i4 += 12) { var face = plane.faces[i]; var centroid = THREE.BAS.Utils.computeCentroid(plane, face); // animation var duration = THREE.Math.randFloat(minDuration, maxDuration); var delayX = THREE.Math.mapLinear(centroid.x, -width * 0.5, width * 0.5, 0.0, maxDelayX); var delayY; if (animationPhase === 'in') { delayY = THREE.Math.mapLinear(Math.abs(centroid.y), 0, height * 0.5, 0.0, maxDelayY) } else { delayY = THREE.Math.mapLinear(Math.abs(centroid.y), 0, height * 0.5, maxDelayY, 0.0) } for (v = 0; v < 6; v += 2) { aAnimation.array[i2 + v] = delayX + delayY + (Math.random() * stretch * duration); aAnimation.array[i2 + v + 1] = duration; } // positions endPosition.copy(centroid); startPosition.copy(centroid); if (animationPhase === 'in') { control0.copy(centroid).sub(getControlPoint0(centroid)); control1.copy(centroid).sub(getControlPoint1(centroid)); } else { // out control0.copy(centroid).add(getControlPoint0(centroid)); control1.copy(centroid).add(getControlPoint1(centroid)); } for (v = 0; v < 9; v += 3) { aStartPosition.array[i3 + v] = startPosition.x; aStartPosition.array[i3 + v + 1] = startPosition.y; aStartPosition.array[i3 + v + 2] = startPosition.z; aControl0.array[i3 + v] = control0.x; aControl0.array[i3 + v + 1] = control0.y; aControl0.array[i3 + v + 2] = control0.z; aControl1.array[i3 + v] = control1.x; aControl1.array[i3 + v + 1] = control1.y; aControl1.array[i3 + v + 2] = control1.z; aEndPosition.array[i3 + v] = endPosition.x; aEndPosition.array[i3 + v + 1] = endPosition.y; aEndPosition.array[i3 + v + 2] = endPosition.z; } } var material = new THREE.BAS.BasicAnimationMaterial( { shading: THREE.FlatShading, side: THREE.DoubleSide, uniforms: { uTime: {type: 'f', value: 0} }, shaderFunctions: [ THREE.BAS.ShaderChunk['cubic_bezier'], //THREE.BAS.ShaderChunk[(animationPhase === 'in' ? 'ease_out_cubic' : 'ease_in_cubic')], THREE.BAS.ShaderChunk['ease_in_out_cubic'], THREE.BAS.ShaderChunk['quaternion_rotation'] ], shaderParameters: [ 'uniform float uTime;', 'attribute vec2 aAnimation;', 'attribute vec3 aStartPosition;', 'attribute vec3 aControl0;', 'attribute vec3 aControl1;', 'attribute vec3 aEndPosition;', ], shaderVertexInit: [ 'float tDelay = aAnimation.x;', 'float tDuration = aAnimation.y;', 'float tTime = clamp(uTime - tDelay, 0.0, tDuration);', 'float tProgress = ease(tTime, 0.0, 1.0, tDuration);' //'float tProgress = tTime / tDuration;' ], shaderTransformPosition: [ (animationPhase === 'in' ? 'transformed *= tProgress;' : 'transformed *= 1.0 - tProgress;'), 'transformed += cubicBezier(aStartPosition, aControl0, aControl1, aEndPosition, tProgress);' ] }, { map: new THREE.Texture(), } ); THREE.Mesh.call(this, geometry, material); this.frustumCulled = false; } Slide.prototype = Object.create(THREE.Mesh.prototype); Slide.prototype.constructor = Slide; Object.defineProperty(Slide.prototype, 'time', { get: function () { return this.material.uniforms['uTime'].value; }, set: function (v) { this.material.uniforms['uTime'].value = v; } }); Slide.prototype.setImage = function(image) { this.material.uniforms.map.value.image = image; this.material.uniforms.map.value.needsUpdate = true; }; Slide.prototype.transition = function() { return TweenMax.fromTo(this, 3.0, {time:0.0}, {time:this.totalDuration, ease:Power0.easeInOut}); }; function SlideGeometry(model) { THREE.BAS.ModelBufferGeometry.call(this, model); } SlideGeometry.prototype = Object.create(THREE.BAS.ModelBufferGeometry.prototype); SlideGeometry.prototype.constructor = SlideGeometry; SlideGeometry.prototype.bufferPositions = function () { var positionBuffer = this.createAttribute('position', 3).array; for (var i = 0; i < this.faceCount; i++) { var face = this.modelGeometry.faces[i]; var centroid = THREE.BAS.Utils.computeCentroid(this.modelGeometry, face); var a = this.modelGeometry.vertices[face.a]; var b = this.modelGeometry.vertices[face.b]; var c = this.modelGeometry.vertices[face.c]; positionBuffer[face.a * 3] = a.x - centroid.x; positionBuffer[face.a * 3 + 1] = a.y - centroid.y; positionBuffer[face.a * 3 + 2] = a.z - centroid.z; positionBuffer[face.b * 3] = b.x - centroid.x; positionBuffer[face.b * 3 + 1] = b.y - centroid.y; positionBuffer[face.b * 3 + 2] = b.z - centroid.z; positionBuffer[face.c * 3] = c.x - centroid.x; positionBuffer[face.c * 3 + 1] = c.y - centroid.y; positionBuffer[face.c * 3 + 2] = c.z - centroid.z; } }; function THREERoot(params) { params = utils.extend({ fov: 60, zNear: 10, zFar: 100000, createCameraControls: true }, params); this.renderer = new THREE.WebGLRenderer({ antialias: params.antialias, alpha: true }); this.renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1)); document.querySelector(selector).appendChild(this.renderer.domElement); this.camera = new THREE.PerspectiveCamera( params.fov, window.innerWidth / window.innerHeight, params.zNear, params.zfar ); this.scene = new THREE.Scene(); if (params.createCameraControls) { this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); } this.resize = this.resize.bind(this); this.tick = this.tick.bind(this); this.resize(); this.tick(); window.addEventListener('resize', this.resize, false); } THREERoot.prototype = { tick: function () { this.update(); this.render(); requestAnimationFrame(this.tick); }, update: function () { this.controls && this.controls.update(); }, render: function () { this.renderer.render(this.scene, this.camera); }, resize: function () { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); } }; //////////////////// // UTILS //////////////////// var utils = { extend: function (dst, src) { for (var key in src) { dst[key] = src[key]; } return dst; }, randSign: function () { return Math.random() > 0.5 ? 1 : -1; }, ease: function (ease, t, b, c, d) { return b + ease.getRatio(t / d) * c; }, fibSpherePoint: (function () { var vec = {x: 0, y: 0, z: 0}; var G = Math.PI * (3 - Math.sqrt(5)); return function (i, n, radius) { var step = 2.0 / n; var r, phi; vec.y = i * step - 1 + (step * 0.5); r = Math.sqrt(1 - vec.y * vec.y); phi = i * G; vec.x = Math.cos(phi) * r; vec.z = Math.sin(phi) * r; radius = radius || 1; vec.x *= radius; vec.y *= radius; vec.z *= radius; return vec; } })(), spherePoint: (function () { return function (u, v) { u === undefined && (u = Math.random()); v === undefined && (v = Math.random()); var theta = 2 * Math.PI * u; var phi = Math.acos(2 * v - 1); var vec = {}; vec.x = (Math.sin(phi) * Math.cos(theta)); vec.y = (Math.sin(phi) * Math.sin(theta)); vec.z = (Math.cos(phi)); return vec; } })() }; function createTweenScrubber(tween, seekSpeed) { seekSpeed = seekSpeed || 0.001; function stop() { TweenMax.to(tween, 1, {timeScale:0}); } function resume() { TweenMax.to(tween, 1, {timeScale:1}); } function seek(dx) { var progress = tween.progress(); var p = THREE.Math.clamp((progress + (dx * seekSpeed)), 0, 1); tween.progress(p); } var _cx = 0; // desktop var mouseDown = false; document.body.style.cursor = 'pointer'; window.addEventListener('mousedown', function(e) { mouseDown = true; document.body.style.cursor = 'ew-resize'; _cx = e.clientX; stop(); }); window.addEventListener('mouseup', function(e) { mouseDown = false; document.body.style.cursor = 'pointer'; resume(); }); window.addEventListener('mousemove', function(e) { if (mouseDown === true) { var cx = e.clientX; var dx = cx - _cx; _cx = cx; seek(dx); } }); // mobile window.addEventListener('touchstart', function(e) { _cx = e.touches[0].clientX; stop(); e.preventDefault(); }); window.addEventListener('touchend', function(e) { resume(); e.preventDefault(); }); window.addEventListener('touchmove', function(e) { var cx = e.touches[0].clientX; var dx = cx - _cx; _cx = cx; seek(dx); e.preventDefault(); }); }
Made on
Tilda