DEV Community: Aiaru / 아야루

Resolving Environment Preset Loading Error in React Three Fiber

Aiaru / 아야루 — Wed, 27 Nov 2024 02:39:07 +0000

Recently I got this error on a project using Three Fiber Js which was working perfectly fine before.

After reading these discussions:

The problem is occurring because it cannot find the preset used in the <Environment> component.

It seems like there are two solutions:

Update Three Fiber JS to version 9.70.4 or above
npm install @react-three/drei@^9.70.4
For a more resilient approach, store the environment map locally:

Identify the HDR file name from the error message (e.g., 'dikhololo_night_1k.hdr' for preset='night')
Download the HDR file from free resources website.
Place the file in your project's public directory at /public/hdri/
Update your Environment component to reference the local file:

<Environment files="/hdri/your_file.hdr">
...
</Environment>

This local file approach prevents future loading issues and gives you more control over the environment map used in your scene.

You can check the source code here: code file

Hope it helped anyone!

Convert SVG into a 3D figure using React Three.js Fiber

Aiaru / 아야루 — Wed, 02 Oct 2024 10:38:17 +0000

In this post, I will show you how to create a custom 3D figure using Three.js and integrate it into a React.js website.
Source code: github.

1. Get an SVG of the Figure

The first step is to create or download an SVG (Scalable Vector Graphics) of the shape you want to turn into a 3D object. For this example, I will create a 3D figure based on a traditional red Kazakh ornament. I downloaded the image and converted it into an SVG. You can easily convert any image into SVG format using free tools like online converters.

2. Install Dependencies

Before we begin, ensure you have created a React app and placed the downloaded SVG file in the /public folder.

We will be using Three.js Fiber, a React renderer for Three.js. It’s simple to use, especially if you're already familiar with Three.js.

Install the necessary packages with the following command:

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

3. Create the 3D Figure

We’ll use the useLoader hook to load the SVG file (/oyu.svg). The SVGLoader parses the SVG and returns data that we can use to generate 3D shapes. The SVG paths are then converted into shapes, and using flatMap, we get a flat array of all shapes. Finally, by adding depth, the shape is extruded into a 3D figure.

// /src/components/Figure.js file
import React from "react";
import { useLoader } from "@react-three/fiber";
import * as THREE from "three";
import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader";

const Figure = () => {
  const svgData = useLoader(SVGLoader, "/oyu.svg");

  const shapes = svgData.paths.flatMap((path) => path.toShapes(true));

  const geometry = new THREE.ExtrudeGeometry(shapes, {
    depth: 10,
  });
  geometry.center();

  return (
    <mesh geometry={geometry} scale={0.07}>
      <meshPhongMaterial attach="material" color="red" />
    </mesh>
  );
};

export default Figure;

Play with scale and find the appropriate value for your figure. I used 0.07 because the figure was too big as an example.

Now we have the 3D figure, but we need a canvas to display it and some lighting to visualize it.

4. Create a canvas

Create a component called CustomCanvas where we will place the 3D figure. The canvas will include ambient and directional lights to illuminate the figure. Additionally, I’ve added OrbitControls to enable rotating and zooming around the 3D figure. Lights were chosen as an example, you can play with values.

<Canvas camera={{ position: [0, 0, 20] }}>
    <OrbitControls enableZoom={true} enablePan={true} />
    <ambientLight intensity={0.5} />
    <directionalLight position={[10, 10, 5]} intensity={1} />
    <Figure position={[0, 0, 0]} />
  </Canvas>

Since we're loading the SVG, it's a good idea to wrap the canvas in Suspense, allowing users to see a loading message while the figure is being prepared. Here's the updated canvas:

// /src/components/Canvas.js file
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Text } from "@react-three/drei";
import Figure from "./Figure";
import { Suspense } from "react";

const Loading = () => {
  return (
    <Text>
      Loading...
    </Text>
  );
};

const Scene = () => (
  <>
    <OrbitControls enableZoom={true} enablePan={true} />
    <ambientLight intensity={0.5} />
    <directionalLight position={[10, 10, 5]} intensity={1} />
    <Figure position={[0, 0, 0]} />
  </>
);

export const CustomCanvas = () => (
  <Canvas camera={{ position: [0, 0, 20] }}>
    <Suspense fallback={<Loading />}>
      <Scene />
    </Suspense>
  </Canvas>
);

5. Integrate the Canvas into Your App

Now, let's include the CustomCanvas in your main App.js file.

import "./App.css";
import { CustomCanvas } from "./components/Canvas";

function App() {
  return (
    <div className="App">
      <div className="main">
        <CustomCanvas />
      </div>
    </div>
  );
}

export default App;

Finally, add some basic styling for your canvas in App.css to ensure it takes up the full screen.

...

.main {
  height: 100vh;
  width: 100vw;
  overflow: hidden; //adjust for your needs
}

After completing the above steps, your 3D figure should be displayed, and it will look something like this:

Feel free to play with depth and customize the material as you wish! Hope it was helpful~

The source code can be found here.

Connecting Tailwind CSS, NextJS, and Storybook

Aiaru / 아야루 — Thu, 29 Jun 2023 07:14:51 +0000

Short summary of how to connect NextJS, TailwindCSS and Storybook.

The connection is showed by making a simple button.

Step 1: Create NextJS app

npx create-next-app --typescript
If you need detailed steps of creating NextJS app, please check its documentation here.

Step 2: Make a button

You can edit the src/pages/index.tsx file for the purpose of testing. We will create a simple button, which can change its background color when clicked. Color is generated randomly, and updated using state in React. Thus, add import {useState} from 'react' at the top of the file and edit the Home function as follows:

export default function Home() {
  const [ccolor, setCcolor] = useState<string>("");

  function changeColor() {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    setCcolor(randomColor);
  }

  return (
        <div>
          <p> get a random color &#128071;</p>
          <button onClick={changeColor} style ={{backgroundColor: "#" + `${ccolor}`}}> 👏 </button>
        </div>
  )
}

You can check the result by running the app (npm run dev). Button background color changes when clicked.

Step 3: Install Tailwind CSS

Now we can add Tailwind CSS by following its documentation.
In the created app folder, install Tailwind CSS.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

According to your current folder structure, modify the content pathways in the tailwind.config.js file.

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind CSS directives to the top of your styles/global.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Try running the app to check if everything is working without errors.

Step 4: Add Tailwind CSS to the button

import { use, useState } from "react";


export default function Home() {
  const [ccolor, setCcolor] = useState<string>("");

  function changeColor() {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    setCcolor(randomColor);
  }

  return (
    <div className="flex flex-col justify-center items-center 
                                        w-screen h-screen bg-gray-300">
      <p className="font-mono text-xl text-center"> get a random color </p>
        <button className = "rounded-full text-5xl m-4 p-8 shadow-xl" onClick={changeColor} style ={{backgroundColor: "#" + `${ccolor}`}}> 👏 </button>
    </div>
  )
}

The code above changes the background color of the page, changes the text properties and makes the button round and shadowed.

Up to this point, you connected NextJS with Tailwind CSS.

Step 5: Install Storybook

In the same folder, install Storybook:

npx storybook@latest init

And try running it to check if it is working properly: npm run storybook

Modify .storybook/main.js as follows:

import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  **staticDirs: ['../public'],**
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    **"@storybook/addon-postcss",**
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

Edit .storybook/preview.js by adding this line at the top of the file:

import '../src/styles/globals.css';

Now as the folder structure changed, we should edit the content path for tailwind.config.js file as well:

content: [
    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
],

Step 6: Create story for the button

We want to create a button component, which will have 2 templates: default button and round button. The component has 3 arguments to play with: border radius, background color, and the emoji of the button.

Following the Storybook’s documentation, added our button in Button.tsx file.

import {useState} from 'react';
import './button.css';

interface ButtonProps {
  radius?: number; //border radius
  backgroundColor?: string; //background color
  emoji: 'clap' | 'heart' | 'star'; //emoji on the button
}
const emojiStyles = {
  clap: "👏",
  heart: "💔",
  star: "🌟",
};

export const Button = ({
  radius = 50,
  backgroundColor,
  emoji = 'clap'
}: ButtonProps) => {
//here comes our button
  const [ccolor, setCcolor] = useState<string>("");

  const ButtonClass = "text-5xl m-4 p-8 shadow-xl bg-gray-400 ";
  return (
    <button 
      className = {ButtonClass}
      style = {{backgroundColor, borderRadius: radius}}
      >
      {emojiStyles[emoji]}
    </button>
  );
};

Also, we create its story in Button.stories.ts as follows:

import { StoryObj, Meta } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
};

export default meta;

//create a “template” of how args map to rendering (from SB)
type Template = StoryObj<typeof Button>;

//created two variations of the button
export const Default:  Template = {
  args :{
    radius: 50,
    backgroundColor: '#ff8b8b',
    emoji: 'clap'
  },
};


export const Circle: Template = {
  args: {
    radius: 100,
    backgroundColor: 'blue',
    emoji: 'clap'
  },
};

In this simple tutorial we used NextJS with TailwindCSS by utilizing Storybook. The example is very simple and can be further developed. Please feel free to check GitHub repository with this project here.

Thank you for reading up to this point ✨

How to make tags in Overleaf

Aiaru / 아야루 — Wed, 28 Jun 2023 05:39:02 +0000

Recently, I have been updating my resume and decided to add technical skills as tags to increase readability. By the end of this post, you will learn how to draw tag-looking boxes around text in Overleaf, as shown in the picture below.

Step 1: Import required packages.

In order to create colorful boxes, we will use the tcolorbox package. If you want to know more about this package, you can check the reference here.

Import the package in the beginning of your document as follows:



\usepackage{tcolorbox}
\begin{document} ...

Step 2: Define the colorbox for your document

To keep all "tags" consistent throughout the document and avoid defining them every time, you can set the dimensions as well as the color for your colorbox at the beginning of your document:



\usepackage{tcolorbox}
\tcbset{on line, boxsep=1pt, left=0pt,right=3pt,top=0pt,bottom=0pt,colframe=red, colback=red}
\begin{document} ...

If we break down this line:
on line keeps your colorboxes inline with the rest of the text;
left,right,top, bottom are inner margins set to each side of the box;
boxsep adds an inner margin to all sides;
colframe defines the color of the box border;
colback defines the color of the box background;

Step 3: Use the color box inside your text.



Created interfaces using \tcbox{Figma}.

The result would be as follows because it has a red border as well as a red background, and an additional 3px margin on the right:

Step 4: Add custom colors for tags.

To add a personal touch to your document, you can add custom colors and use them in your boxes. To do so, add a custom color at the beginning of your document:



\definecolor{babyblue}{rgb}{0.82, 0.96, 0.936} 
\usepackage{tcolorbox}
\tcbset{on line, boxsep=1pt, left=0pt,right=3pt,top=0pt,bottom=0pt,colframe=babyblue, colback=babyblue}
\begin{document} ...

In the example above, I added a color called babyblue using the unit RGB color system and replaced the colframe and colback colors with it.

Step 5: Add specific tags

If you want to highlight a specific colorbox by defining colors or other properties only for that instance, you can do so by adding properties inline. For example, if you want to color a specific box with a different color, you can use the following:
I can use \tcbox{HTML} and \tcbox[colframe=green, colback=green]{CSS}.

Result:

By repeating the same process, you can define various tags with different custom colors:



\textbf{Skills}\\
\tcbox{Tag1} \tcbox{Tag2} \tcbox[colframe=almond, colback=almond]{Language1} 
\tcbox[colframe=almond, colback=almond]{Language2} \tcbox[colframe=yellow, colback=yellow]{Technology1}
\tcbox[colframe=yellow, colback=yellow]{Technology2}

Result:

I hope this will be useful for your project ~.~

References: