Whether you have your app up and running or you are starting from scratch this short tutorial should help you get started with using Three.js in your react application. — Create React App I like to start my React projects with create-react-app kick off: npx create-react-app . 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…

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 …

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

What will you learn — 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…

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…

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…

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…

Lately I went through a quite tough process of figuring out how to export my nCloth animation to FBX. Here is description of my struggle and outcome. — 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.

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