How To Make Animated Effects Scrolling With Three.js Using Css And Javascript - Gudangupdate.com - Tips Tutorials And Blogging

Black Friday Promo Hosting Unlimited Indonesia
How To Make Animated Effects Scrolling With Three.js Using Css And Javascript

How To Make Animated Effects Scrolling With Three.js Using Css And Javascript


 How To Make Animated Effects Scrolling With Three.js Using Css And Javascript
This is the first article of this blog, hopefully useful and inspiring for all of you. In accordance with the title this time, I as the admin, want to share a tutorial on how to create a scrolling animation effect with three.js.

Of course all of you already know the advantages and disadvantages of the three.js animation!

Maybe I don't need to explain it, because what I will discuss in this post is the tutorial. Well, to start the steps to make it, here we need a Css and Javascript. Is this animation effect good for your website / blog? In my opinion this is very good if it is installed on your website / blog to produce the attractiveness of visitors. For the first way, we try to make the Css first. You can see the code as below:


body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

div {
  align-items: center;
  color: darkslategrey;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.5;
  pointer-events: none;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
}

span {
  font-size: 3em;
  margin: 0 .5rem;
}
When you have finished creating the Css, we continue the next step, which is making the javascript. You can see the code below:


var camera, controls, scene, renderer;

init();
animate();

function init() {

 //New hot dog array
 hotdogs = [];

 camera = new THREE.PerspectiveCamera( 1000, window.innerWidth / window.innerHeight, 1, 1000 );
 
 camera.position.z = 1000;

 // Scene
 scene = new THREE.Scene();
 scene.background = new THREE.Color( 0x8ee7f0 );
 scene.fog = new THREE.FogExp2( 0xcccccc, 0.001 );
 
 // Obj loader
 var loader = new THREE.OBJLoader();

 // Download object
 var onProgress = function ( xhr ) {
  if ( xhr.lengthComputable ) {
   var percentComplete = xhr.loaded / xhr.total * 100;
   console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
  }
 };

 var onError = function () { };
 
 //Load texture
 new THREE.MTLLoader()
  .setPath( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106687/' )
  .load( 'Hotdog.mtl', function ( materials ) {

   materials.preload();
 //Load object
   new THREE.OBJLoader()
    .setMaterials(materials)
    .setPath( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106687/' )
    .load( 'Hotdog.obj', function (hotdog) {
    
     for ( var i = 0; i < 100; i ++ ) {
      var newHotdog = hotdog.clone();
      newHotdog.position.x = ( Math.random() - 0.5 ) * 1250;
      newHotdog.position.y = ( Math.random() - 0.5 ) * 1250;
      newHotdog.position.z = ( Math.random() - 0.5 ) * 2000;
      newHotdog.updateMatrix();
      scene.add(newHotdog);
      hotdogs.push(newHotdog);
     }
    }, onProgress, onError );
  } );
 
 // Lights
 var light = new THREE.AmbientLight( 0x222222, 15);
 scene.add(light);

 // Renderer
 renderer = new THREE.WebGLRenderer( { antialias: true } );
 renderer.setPixelRatio( window.devicePixelRatio );
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );

 //Controls
 var controls = new THREE.OrbitControls( camera, renderer.domElement );

 controls.rotateSpeed = 1.0;
 controls.zoomSpeed = 0.25;
 controls.panSpeed = 0.8;
 controls.noZoom = false;
 controls.noPan = false;
 controls.staticMoving = true;
 controls.dynamicDampingFactor = 2;

 controls.addEventListener( 'change', render );

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

 render();

}

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

//Animate each hotdog

function animate(time) {
 time *= 0.0001;
 
 hotdogs.forEach((i, n) => {
  const speed = 1 + n * 0.1;
  const r = time * speed;
  i.rotation.x = r;
  i.rotation.y = r;
 });
 requestAnimationFrame( animate );
}

function render() {
 renderer.render( scene, camera );
}
After the ingredients are complete and finished, the next step is to combine them.
If everything is stored, the last step is to try to access it through each browser and see how it works.

so this tutorial is about, how to make animated effects scrolling with three.js using css and javascript.

1 Response to "How To Make Animated Effects Scrolling With Three.js Using Css And Javascript"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel