Forem: dhondup

Create our first 3D scene using Three.js

dhondup — Fri, 21 Jul 2023 10:31:19 +0000

As Lao Tzu said,

“The journey of a thousand miles begins with one step”.

Created my first 3D scene using threejs. I also added the ability to rotate and zoom the 3D object. I mostly followed the official threejs doc.

Demo:
(Drag to rotate and Scroll to zoom)

Things I Learned

Scene, Camera and Renderer

Threejs requires three things to display content: scene, camera and renderer.

Scene - Allows you to set up what and where to be rendered.
Camera - A viewport through which we observe the 3D scene. There are many types of camera in Three.js like PerspectiveCamera, OrthographicCamera, CubeCamera, etc. Perspective Camera is the most widely used which shows the objects in more realistic perspective view.
Renderer - Renderer is responsible for showing the 3D objects on a web browser. Mostly used WebGLRenderer.

BoxGeometry, MeshBasicMaterial and Mesh

BoxGeometry - Geometry defines the shape and structure of 3D objects in a scene. There are several types of predefined geometries in threejs such as, BoxGeometry, SphereGeometry, CircleGeometry, ConeGeometry, CylinderGeometry, etc. BoxGeometry is used to create a cube.

MeshBasicMaterial - A material for drawing geometries in a simple shaded(flat or wireframe) way. This material is not affected by lights.

Mesh - An object that takes a geometry and applies a material to it.

Threejs Addons: OrbitControls

OrbitControls Addon allows the camera to move around a target. This addon enable us to rotate and zoom our object by dragging and scrolling.

That's a good start for now. Feel free to play around in codesandbox. Stay tuned.

Learn WebGL and Three.js with me

dhondup — Fri, 21 Jul 2023 02:29:25 +0000

Who don't love those amazing Awwwards nominated websites? I am sure we all do. I have always been captivated by the creativity of these websites. And as a Frontend Developer, I have always wanted to created similar websites. So, I have decided to go on a learning journey to build such amazing websites. I have previous experience of building interactive websites(Link) using GSAP and I want to take it to the next level. So, Join me on this exciting learning journey. Together, We will explore CSS animations, GSAP, WebGL, Three.js and other animation tools.

Feel free to share your experience, learning resources or any suggestions.

Let's get started.

You no longer need to import React from 'react'

dhondup — Fri, 02 Apr 2021 03:05:38 +0000

If you use React, import React from 'react' is the first thing that you write in your code but if you have created a new react app using creat-react-app recently, you might have noticed that there is no import React statement at the top and your code works just fine. So, How's that working?

Well, previously you had to import React because the JSX is converted into regular Javascript that use react's React.createElement method.

But, React has introduced a new JSX transform with the release of React 17 which automatically transforms JSX without using React.createElement. This allows us to not import React, however, you'll need to import React to use Hooks and other exports that React provides. But if you have a simple component, you no longer need to import React. All the JSX conversion is handled by React without you having to import or add anything.

This new JSX transform is also supported in older versions of React so you can start using them even if you don't use React 17.

Read the official React doc to learn more.

How your work as a web/software developer/designer have helped your clients and their business?

dhondup — Sat, 02 Jan 2021 13:26:46 +0000

Has your work helped the clients increase their revenue, help them cut down costs, increase their customers etc?

Do you still use "position" to center align vertically and horizontally?

dhondup — Thu, 16 Jan 2020 12:54:34 +0000

It's 2020 and we have amazing flex and grid method to center align items both horizontally and vertically. I wonder anyone still use position absolute to center align items? If yes, when and why do you use them?

Can anyone help me find all CSS properties with their values in JSON format?

dhondup — Wed, 08 Jan 2020 09:51:12 +0000

So far i have found this this and this but there are no values available.

What do you think about nested styles in Styled Components?

dhondup — Mon, 06 Jan 2020 11:09:53 +0000

For example I have nested styled component for a navbar like this

const Navbar = styled.nav`
    // some style 
    .logo{ 
        // logo style 
    } 
    .nav-items{ 
        //nav-items styles 
    } 
    .nav-item{ 
    // list styles 
}`

I am only defining one styled component and using that as a base to style other elements of the navbar with nested style. Sometimes the nested style inside the styled components gets very large with many classes which might be difficult to read.
I looked at spectrum code and found that they almost never nest style inside styled component. Is it a bad practice to use nested style inside styled component? Should i create styled component for each elements like logo, nav-items? What are your thoughts?