Sign in

Creative front end developer, currently excited about learning 3D graphics. Visit magdazelezik.com

Create React App

I like to start my React projects with create-react-app kick off:

npx create-react-app .
Removed everything except necessary files.

Let’s clean it up first. I like to remove everything I’m not starting with and yes, that also includes testing and css files. I know I might need them in the future but I would create my own structure then when I need it. I like not to leave anything in the project just in case. It’s pretty much like hoarding and only leaves a mess. So the cleaned up structure should look something like this.

Remember to clean up index.js and App.js files from missing…


Looping colors in sections

Very quick guide how to loop colors array in React styled components.

Problem

You have a list of sections in your document, you want each to have a different color from array.

Solution

Note: This tutorial is done using styled-components package but with easily work with other method for using styled components

Setting up styled components

You can skip to next section if you know how to do this

I use styled-components package. Install it in your React project:

npm i styled-components

Having dependency installed, let’s set up the HTML section component as our first styled component. Create a folder Section in your project and inside…


While Wireframe Geometry is supercool helper tool to see your mesh, let’s take a little bit different approach to achieve some fun results.

TL;DR

MeshStandardMaterial has a property wireframe, which let’s you display the edges instead of solid coverage of the object. It still preserves the material properties like colors, reflectivity, etc…

Let’s look at example

Sample sphere code
Sample sphere

Above you can see a basic Three.js code snippet creating an orange sphere on canvas. Nothing fancy. The sphere is made from a basic material which does not respond to light, therefore we can see the model as is.


How to make draggable slider/carousel with WebGL distortion effect like on example below

Technologies we will use:

  • JavaScript (duh) ES6 (here uses in React component)
  • PIXI.js library for WebGL
  • GSAP library for animations
  • some CSS with SCSS preprocessor

Overview

We will setup the carousel with JSX (with tips how to do it in pure HTML/JS workflow). Then we will style it. In the next step, we will apply drag to the carousel. Next, we will import PIXI library and add a canvas to every item in the slider with some distortions prepared. Lastly, using GSAP, we will animate the distortions while dragging action is performed.

The setup


Parent does not stretch to child’s height.

I want height to be 100% of the viewport.

Why is element overflowing even though I’ve my height set?

Although width is pretty straightforward, height seems to cause people many problems. Here comes a quick overview on approaching CSS dimensions.

Difference between width and height

No, it’s not about one being horizontal or vertical.

Width

By default width of an element is the width of it’s content. If content is fluid, maximum width will reach window width. If content is not fluid, like an image for example, width will stretch to fit it and so will all the ancestors…


Why is element on top of the page when I want it attached to parent?

Can element be fixed to the parent?

Element is in the DOM but not visible on the page?

How to center element on the page?

This are some questions I stumbled upon on the net regarding CSS position, which can cause a real headache if you don’t take 5 minutes to understand it properly.

I would like to cover some basic principals so you won’t struggle in the future.

Position: static

Aka “the default”. The element is positioned according to natural flow of the document. Nothing fancy…


This fairly simple process seem to cause a lot of trouble for many people. Here I come with a very quick tutorial on duplicating an animation in Three.js based on what I’ve learned so far on forums and docs.

Note: code I present is from my React app (therefore a lot of this keyword etc). I present the code to explain, not for copying :)

Not all at once

Firstly, it is important to remember that simply copying the model won’t let you copy it’s animation — even if it is defined in the FBX or any other file you’re uploading. …


This article is part of my series of ‘Learning 3D animation’, where I cover problems I’ve solved, learning materials I’ve used and buttons I’ve clicked. Feel welcome to join me.

Universal message

You will learn how to convert physical object animation to general animation that does not require physical engine.

What I want to do

I have a nice animation of a floating dress prepared using nCloth in Maya. What I would like to have eventually is that animation displayed neatly on my website with help of Three.js library.

Note: I will prepare another article on importing FBX animation to Three.JS for babies (like me).

Tryouts

I baked…


This article is part of my series of ‘Learning 3D animation’, where I cover problems I’ve solved, learning materials I’ve used and buttons I’ve clicked. Feel welcome to join me.

Universal message

You will get a grip on MASH tool and create moving repetitive structure. You will also learn how to twist things ❤

What I want to do

I would like to achieve a sort on waving cloth model, but with clearly visible threads. Later I would like to animate disintegration of those threads, therefore I cannot simply use nCloth with bump maps, I need to go deeper.

Tryouts

As I mentioned above what I simply could…


This article is part of my series of ‘Learning 3D animation’, where I cover problems I’ve solved, learning materials I’ve used and buttons I’ve clicked. Feel welcome to join me.

Universal message

You will learn how to create an explosion of a model.

What I want to do

I’m relatively new to 3D editing software but I sure got ideas. For my project I’ve been aiming to create a sequence of garments morphing into one another. It turned out not to be so easy.

Tryouts

Using Marvelous Designer program I have prepared several dresses models, which I have then imported to Maya. In my mind I was prepared…

Magda Żelezik

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store