DEV Community: Trevor

Three.js & @React-Three/Fiber : Basics and Loading 3D Models (GLTF)

Trevor — Wed, 22 Sep 2021 17:54:34 +0000

Three.js

There are no doubts about it, Three.js is complicated as hell. As it stands, I have but a tenuous grasp on this library and what it is capable of accomplishing -- know that going forward. That being said, my lack of knowledge is not a deterrent for attempting to implement it in various projects. The best way to learn is by doing, right?

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL.

Essentially, Three.js allows us to make 3D objects and environments and implement them in various ways. Want to create a game? Three.js can handle it. Want to add an interesting project to your personal portfolio with more dimensions? Yeah, no problem.

So, how do we use it?

Basics of Three.js

You'll, of course, first need your HTML file.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>

In order to get started, you're going to need a few things in your script file: a scene, a camera, and a renderer.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

You might be asking yourself, what the hell is going on here? Think of the scene as your environment. But, in order to actually display your scene you need a camera (which takes in arguments for FOV, aspect ratio, and near/far clipping planes), and a renderer. The renderer, described as "what makes the magic happen", can be thought of as your <Canvas /> -- which is typically set to the full-size of your window for obvious reasons (but, of course can be made smaller to fit your needs). Next we append the renderer to the body of our document.

Add a shape to the scene

We'll be rendering a simple cube -- which will require three things: a geometry, a material, and a mesh to fuse the geometry and material together.

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: #000 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

A few things to note here: a material takes an object of properties (not just limited to color), we need to add the cube to the scene by using the .add method and passing in the mesh we created, and we need to move the camera out a bit on the z-index to view the object (you could also change the default position of the cube object if you did not want to move the camera).

Render Loop

Here comes the last bit. If you used all the code above, you would not be seeing anything just yet. In order to actually view your cube on your canvas element, you'll need to use what is referred to as a render, game, or animate loop.

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

What this loop is doing is drawing your screen every time your screen refreshes (usually around 60 times per second, but can be more depending upon the quality of your monitor).

Your First Scene

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            const animate = function () {
                requestAnimationFrame( animate );


                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

React-Three/Fiber

You know all that complicated stuff creating a scene, camera, renderer, and animation loop we used earlier? Yeah, much easier using R3F. First off, install the following dependencies by running

npm i three @react-three/fiber @react-three/drei

Next, prepare your App component with the following imports and stage your incoming 3d model with a Model component:

import { Canvas } from '@react-three/fiber'
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { Suspense } from "react";


const Model = () => {
    const gltf = useLoader(GLTFLoader, "./scene.gltf")
    return (
        <>
            <primitive  position={[0, 0, 0]} object={gltf.scene} scale={1} />
        </>
    );
};


function App = () => {
   return(
      <Canvas>
           <Suspense>
              <Model />
           </Suspense>
      </Canvas>
   )
}

Now here's the great part, the <Canvas /> component imported from @react-three/fiber does all the work of creating the render loop, scene, renderer, and camera for you. If you want to reposition the camera (let's say pull it back a bit), you can pass camera as props to the canvas component like so:

  //specify the position of the camera with x, y, and z coordinates
   <Canvas camera={{ position: [0, -40, 20] }}>
   </Canvas>

Add Your 3D Model

If you haven't already done so, head on over to SketchFab -- which is a great resource for acquiring 3D models. Find one that you like and download the .gltf version of the model and add it into the public folder of your React app (where your index.html file is stored). You'll need to add both the scene.bin and scene.gltf files in order for the model to appear.

Once this is done, run your React app and you should see your 3D model on the canvas!

Creating a Parallax Scrolling Effect with Vanilla CSS & React-Parallax

Trevor — Mon, 06 Sep 2021 07:16:46 +0000

Engaging the User
An important piece of the development puzzle is figuring out how the user is going to be engaged by the resulting product that is being created. In the world of web development, engagement can take many forms. Let's say you are a web-developer working on your professional portfolio, a good starting point would be asking yourself, "how do I want the user to experience me and my capabilities as a developer?" This should take careful consideration, as a professional portfolio should illustrate your talents to a potential employer or collaborator. If you care more about advanced functionality over aesthetics, your portfolio should reflect that in some way or another. For example, you could showcase a project you created that uses linked lists as opposed to arrays to demonstrate a deep understanding of computer science and memory allocation. And, that is not to say that a portfolio should be bland by any means, your projects should always be as polished as possible. But, you may want to convey that design is not your bread and butter through a more simplistic UI. On the other hand, if you care deeply for design, it goes without saying that your portfolio and projects should always reflect that in some way or another. One approach to this could come in the form of including a project wherein you highlight features such as animations, 3D models, choice of fonts, or parallax scrolling. Which leads me to the topic at hand...

Parallax: What is it and Why Use It?
To put it simply, a parallax scrolling effect is a simple way to provide depth to any project by applying styling that modulates the speed of the background (i.e. making it slower), while the elements in the foreground move at a more "normal" pace (the pace determined by your scrolling). This effect is an optical illusion that is not just used in web-development, but other artistic mediums such as game development as well (think of most 2D Mario games). Parallax scrolling should be in all designer's toolboxes, as it provides a layer of depth that is often engaging to the user.

Implementation via CSS

A highly simplistic implementation of a parallax scroll effect will include the following two styled elements:

A div containing a background image that is fixed and set to a certain height of your choice.
A div (your foreground) containing whatever information you want to include and styles whichever way you choose.

//.css 
.yourFirstParallax {
 //choose your background image
  background-image: url("yourChoice");

 //set your height
  min-height: yourChoice%; 

//fix your background image and set to no-repeat
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

//stylized foreground div
.parallaxContentDiv {
    height:300px;
    background-color:white;
    font-size:36px;
    padding-bottom: 500px;
    top: 10%
}

//implementation through HTML
<div class="yourFirstParallax"></div>

<div class="parallaxContentDiv">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

If implemented correctly, you should be able to see the foreground div flying by while the background image stays in place. As mentioned earlier, we are playing with various speeds here. Although we are not providing any motion to the background image, we have provided a much simpler solution by making the background image fixed in place to allow the motion to come directly from the div containing the content we want to display. It is a neat trick that can be expanded upon however you see fit.

Implementation via React-Parallax
Now that you have a basic understanding of what a parallax scrolling effect is and how to create one, let's truncate our time by using a node package available to us. In fact, although good to know, you can almost completely forget the above information, as this package is going to do most of the heavy lifting.

First, install react-parallax

npm install react-parallax

From here, within your component you are going to use the following import:

import { Parallax } from 'react-parallax';

and throw it within your component like so:

import { Parallax } from 'react-parallax';

function Parallax() {
  return (
      <Parallax blur={40} bgImage="yourImageHere" bgImgAlt="imgDescription" strength={140}>
        Your Content Here
      </Parallax>
  )};

The end result will give you the same effect as the vanilla CSS above (although styled differently), and with much less of a headache. It should be noted that you can stack these components as well. You can find a solid example of react-parallax in action here.

And, to gain a better understanding of how to use react-parallax, read the documentation here.

Hope that helps. Cheers, y'all.

DRY: Reducing Redundancy in Zsh with Aliases

Trevor — Sat, 21 Aug 2021 21:23:38 +0000

We're Not Lazy, We're Efficient

One common through-line that I have noticed when reading other blogs about coding is how often it is mentioned that people who code are lazy. When thinking about software engineers, I do not think that I ever thought to myself, "wow, this person really likes to slack-off." From my perspective, I have always thought that people who write code are incredibly efficient -- or, at the very least, their goal is to be efficient. One of the most important principals of writing code is DRY. Don't repeat yourself. It is a fairly easy concept to grasp, but it is important enough that is requires some sort of explanation when talking about it. Let's say that I am writing some code and I find that I am manually writing a block of codes multiple times.

const exampleOne = (a, b) => {
  addMe = a + b
  subtractMe = a - b
  divideMe = a / b
  multiplyMe = a * b
}

const exampleTwo = (a, b) => {
  addMe = a + b
  subtractMe = a - b
  divideMe = a / b
  multiplyMe = a * b
}

As shown in the block above, the code is redundant and I am making my life harder by repeating myself. Albeit not extremely harder with this specific example, but harder nonetheless. So, how would I go about correcting this redundancy? The answer comes in the form of a helper function.

const exampleOne = (callback, valOne, valTwo) => {
 callback(valOne, valTwo)
}

const exampleTwo = (callback, valOne, valTwo) => {
  callback(valOne, valTwo)
}
const math = (a, b) => {
  addMe = console.log(a + b)
  subtractMe = console.log(a - b)
  divideMe = console.log(a / b)
  multiplyMe = console.log(a * b)
}

exampleOne(math, 1, 2)

Now, anytime I need to make some basic computations I can just use my helper function as opposed to writing the same lines of code over and over again (is this laziness, or efficiency?). You might be thinking, well, you only had to rewrite that code block one time -- and you'd be right in this particular instance. But, imagine that I had one hundred functions that all required these four lines of code...you get the point. Now, let's apply that to zsh.

Zsh Aliasing

First off, I should start by defining what an alias is in this context. An alias is a shortened form of a longer command. Simple, right?

As previously mentioned, when writing code we should always be thinking about how we can reduce redundancy. However, one thing that I do not see mentioned enough is how we can reduce that same redundancy when we are working within our terminals. For example, as a student at Flatiron I am writing the same three lines of text over and over again.

git add .
git commit -m "Completed Assignment"
git push

I recognized this as a pattern that I was writing on a daily basis, multiple times per day. It was not until recently that it begun to grate on me because there had to be a way that I could condense this in the same way I condensed my code above using a helper function.

Luckily, through aliasing, Zsh provides a way for us to create these helper functions to reduce this redundancy.

How to Create an Alias

In order to create an alias, the first thing you are going to need to do is open your terminal and run open ~/.zshrc.
Within this file, there should already be an area sectioned off for aliasing. If there is not an area already sectioned off for some reason, it is best practice to write all of your aliases at the bottom of the file as a way of organizing and separating information. Now, let's look at how a an alias is constructed:

alias <custom-alias>=”<command>”

#OR

<alias-name>() {
    //content here
}

To break this down, let's say that you wanted to make your own alias function that prints out an encouraging message anytime you are feeling a little anxious. In your zshrc file, you could write the following function:

helpMe() {
echo "Everything is okay. You are a bright and glittering star and you are loved more than you know. You might feel overwhelmed now, but no feeling is final. Remember that." 
}

And now, any time you are working in your terminal you can run helpMe to print the text in your alias function to your terminal.

Practical Examples

As mentioned previously, I found myself typing the same three lines of code over and over and over again. However, with aliasing, this is a simple fix. Adding the following alias function has made me more efficient -- not lazy.

gacp() {
git add .
git commit -m "Completed Assigment"
git push
}

With this function, I will only have to type four characters and hit enter once. I don't know about you, but that is amazing.

Although this alias function is incredibly helpful for my coding experience, it may not be general enough to help you. However, the following may be:

// Clones down a repo and cds directly into the repo when you run gclonecd <the_cloned_repo>
gclonecd() {
  git_dir="$(basename "$1" .git)"
  git_dir_resolved=${2:-$git_dir}
  git clone "$@" && cd "$git_dir_resolved";
}

//Create a branch with your name
alisn gb="git branch {yourNameHere}"

//clear your terminal
alias c="clear"

//Fairly straight forward useful command for apps containing nodes
alias nis="npm install && npm start"

//

As you write more code in the terminal, the more you will pay attention to what lines of code you are writing most often. At that point, it is your job as a coder to be efficient and create aliases for those lines of code.

Using Powerlevel10k to Customize Zsh

Trevor — Wed, 11 Aug 2021 21:20:21 +0000

As someone who cares deeply for aesthetics, one of my first missions when I began using a terminal was to make it my own. That is to say that the stock theme of zsh is, well, less than what I would like it to be. It is boring to put it bluntly, and it dulls me just looking at it. It’s a functional shell, sure, but it is lacking in the beauty department. So, in order to make it my own I needed to figure out how to customize it. Luckily, it did not take me too long to find the answer in the form of Powerlevel10k.

What is Powerlevel10k?
To put it simply, Powerlevel10k is a theme that can be used with zsh to improve upon its looks. It emphasizes speed, flexibility, and most importantly, it's aesthetic. Using this theme will drastically improve your experience while working within the terminal. Let’s jump into it.

Install zsh
The first thing you are going to need to do is install zsh (if you are an OS X user, zsh should be preinstalled on your machine). Say goodbye to bash, or whatever other terminal you’re using. Your coding experience is about to get that much better. For the sake of length, and not having a deep understanding of other operating systems, I encourage you to check out the zsh documentation found here.
** if you are a windows user, setting up zsh might be a bit of an annoyance **

Install Oh My Zsh
After having installed and switching over to zsh, run the following line of code:



sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

This will install the necessary open-sourced framework needed in order to use Powerlevel10k as your primary theme and manage your other configurations. For more information, check out their website.

Install Powerlevel10k
In order to install Powerlevel10k, you must clone down the following repo:



git clone — depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

With this repo now on your machine, you’re going to need to follow a couple more steps here. First of which is opening your ~/.zshrc file. Copy this file and save it elsewhere in case of any hiccups incurred on this path. Next, you’re going to change the ZSH_THEME in your ~/.zshrc file.

At this point, save the file and you should be ready to run p10k configure in your terminal — which should result in the following:

This is going to be an incredibly intuitive set-up experience that deals with themes and text truncation. When prompted, select the rainbow theme. If you want the full experience, this is the best theme offered in my opinion. You can really make it your own at this point.

Further Customization
At this point, your terminal is already looking so much better than the bland shell you’ve been working with all this time. However, let’s go a little bit deeper here and customize the colors. When you run p10k configure (no need to do it again at this point), your machine will have created a file which we will be opening now. Run ~/.p10k.zsh in your terminal. Making some quick edits here, scroll on down to line 205. You should see the following lines of code:

70 & 50 denote the colors used
Using the above values will alter your prompt to look like this:

Now, of course, this is all about how you want your terminal to look. Lets go ahead and run the following line of code in your terminal:



for i in {0..255}; do print -Pn “%K{$i} %k%F{$i}${(l:3::0:)i}%f “ ${${(M)$((i%6)):#3}:+$’\n’}; done

This will result in your terminal displaying a list of 255 colors that are available to use with P10k.

255 available colors to choose from when creating a custom theme wtih P10k

Once you’ve got a decent idea of what color palette you would like to work with, head back into your ~/.p10k.zsh file and swap out the colors located on lines 206, 208, 345–349 (if you would like to change the colors of your VCS). If you want to go the extra mile, I would encourage you to also include an emoji on line 479. It really helps to add a little charm to your VCS included prompt.

When completed, you might end up with something that looks like this (one can only hope for that). Or, you might go down.a radically different path. But, that’s completely fine. The point of this blog post is to show you that you have the option to change something if you do not like it. In the case of the standard zsh theme, I find it a must to alter — otherwise I would hate to work with it.