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 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.

Tags: Blogging Tutorials

Share this: