Published in Fink IT·Jul 8, 2022React dependency array is not to be ignoredFollowing dependency array rules lead to better design of code We all know this pattern in creating functional components when you want to have your functions run only on component mount: useEffect(() => { functionToRunOnlyOnMount() }, []) It is prescribed by many and better yet, working. Problem start, when you run linting on your code and see this warning: warning…React6 min readReact6 min read
Jan 19, 2022Customizing Chart.js 3.0^ (with React)Some tips and tricks for customizing Chart.js version > 3.0 I spent hours looking for, so you won’t have to. — I got a detailed design of a line chart to implement within a React interface. After browsing briefly for suitable library for graphs and charts visualizations, I decided to go with Chart.js and it’s dedicated React package react-chartjs-2. I installed a version 3.7 of Chart.js, which was the most current…React3 min readReact3 min read
Published in Fink IT·Jul 8, 2021Setting up Three.js in React App (basic tutorial)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…Threejs4 min readThreejs4 min read
Published in Fink IT·May 9, 2021Loop colors array in React styled componentsVery 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 …Reactjs3 min readReactjs3 min read
Published in Fink IT·Nov 23, 2020Colored gradient wireframe model in Three.jsWhile 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…Threejs3 min readThreejs3 min read
Published in Fink IT·May 18, 2020Draggable carousel with WebGL effectsWhat 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…Pixijs10 min readPixijs10 min read
Published in Fink IT·May 6, 2020Why is height not working?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…CSS5 min readCSS5 min read
Published in Fink IT·May 3, 2020Why is position not working?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…CSS5 min readCSS5 min read
Published in Fink IT·Apr 18, 2020Duplicating an animation in Three.jsThis 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…Threejs5 min readThreejs5 min read
Published in Fink IT·Mar 27, 2020Exporting nCloth animation to FBX using Blend Shapes in Maya3DLately 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.Maya9 min readMaya9 min read
