Generate AI with Meshy! How to instantly display 3D models that even beginners can do with React x Three.js!

The URL has been copied!

Recently, generating 3D models using AI has become surprisingly easy. Among them, the AI tool called "Meshy" allows you to quickly generate high-quality 3D models with intuitive operations.
In this blog, we will explain how to display 3D models generated using Meshy React and Three.js

📺 Check Mesh : You can check it on the official page from this link

Meshy AI – The #1 AI 3D Model Ge…

Meshy AI – The #1 AI 3D Model Generator for Creators Meshy is an AI 3D model generator that helps to effortlessly transform images and text into 3D models in seconds.

even beginners can try with confidence, so if you are interested in developing using React or Three.js, be sure to read it to the end!

We will continue to create lessons and works from TypeScript x React Three Fiber in the future!
We will be making an announcement on YouTube, so please subscribe to our YouTube channel and wait for notifications!

📺 Watch YouTube : You can watch it from this link

YouTube

Hack Lab. 256 Share your videos with friends, family and people all over the world

TypeScript x React Three Fiber

If you'd like to know what React Three Fiber can do, please refer to the following!
We have easy-to-use works available!

Click here for works using React Three Fiber

table of contents

3D model display demo

You can see the demo of the finished product in the video below.

📺 Watch the demo on YouTube : You can watch it from this link

YouTube

Generate AI with Meshy! How to instantly display 3D models that even beginners can do with React x Three.js! Generate AI with Meshy! How to instantly display 3D models that even beginners can do with React x Three.js! Using "Meshy", which allows you to easily create 3D models with AI, and React x Three.js, you can use it on your browser...

Additionally, the source code for this project is available on GitHub.
Please download the code and try it out!

💾 GitHub Repository : Check the source code at this link

GitHub

react-three-ui/src/pages/Meshy3DModel at 0e06bc6f07d33cf24499feb0cdb6484c75aeacf4 · aazutaku/react-t… React x Three.js. Contribute to aazutaku/react-three-ui development by creating an account on GitHub.

If you're wondering, "I've seen it, how do I make it?", don't worry!
In this article, we will explain step-by-step how to view this 3D model.

Necessary Techniques and Key Library

This project uses the following technologies and libraries: Here is a brief explanation of each role.

React
- Library for front-end development
- Efficient UI construction with component-based design
Three.js
- A library for drawing 3D graphics on the web
- It makes it easy to handle complex WebGL operations
React Three Fiber
- Wrapper library for handling Three.js in React
- You can take advantage of the powerful features of Three.js in React development style
React Thee Drei
- React Three Fiber Extension Library
- React Three Fiber Extension Library
Meshy
- A service that allows you to easily generate high-quality 3D models using AI

Overall implementation design

This project will achieve a simple process: "Use AI tools to generate a 3D model and display it in the browser using React and Three.js."

Blueprint (simple flow)

Loading the model

Use React and Three.js to import the generated 3D model into your project.
OBJLoader and MTLLLoader to display the model in a Three.js scene.

Adding HTML elements (screen area)

Use the Html of the Drei library
The form is styled in HTML/CSS.

Camera operation and background design

Limit camera movement to horizontal only, adjusting it to allow users to view the model properly.
A gradient is set in the background to enhance the visual appeal.

Environmental preparation

This section provides the initial setup for your project. Create a React app using the npx command, install the required libraries and organize the folder structure.

Creating a React App

First, create a React app using the npx command.

npx create-react-app meshy-3d-model --template typescript

meshy-3d-model is the name of the project
--template Use a TypeScript-enabled template by specifying

Installing the required libraries

Install React Three Fiber and other libraries.

cd meshy-3d-model npm install three @react-three/fiber @react-three/drei

three : Three.js main body
@react-three/fiber : A wrapper for using Three.js with React
@react-three/drei : Useful helpers such as camera controls and text drawing

Reviewing folder structure and deleting unnecessary files

Organize and add folders from the initial state as follows:
Basically, it is the default value, but for files you don't know, please check out GitHub.

meshy-3d-model/ ├── node_modules/ ├── public/ ├── models/ // 3D models and related files │ ├── monitor.obj // OBJ files generated with Meshy │ │ ├── monitor.mtl // MTL files generated with Meshy │ │ └── texture.png // Textures to be added as needed ├── src/ │ ├── components/ // Directory for adding other components │ ├── data/ // For files that manage data if necessary │ ├── pages/ // Components managed on a page basis │ ├── Meshy3DModel/ │ │ ├── Meshy3DModelPage.tsx // Main page code │ │ │ │ │ │ │── Meshy3DModelPage.css // Stylesheet │ │── App.tsx // App entry points │ │── index.tsx // React rendering process │ │── App.css // Global style │ │── index.css // Global CSS │── package.json │── tsconfig.json // TypeScript settings └── README.md // Project overview

The files to be modified this time are as follows:

App.tsx : App entry points
pages/Meshy3DModel: The folder to be created this time
- Meshy3DModelPage.tsx : Component of the main page.

Detailed explanation of the source code for each step

In the following sections, we will explain in detail the five parts below in order.

PART

STEP

Generate 3D models with Meshy

Use Meshy to generate 3D models with AI

STEP

Constant definition

Defines basic constants required for displaying 3D models and operating cameras, such as CAMERA_POSITION and MONITOR_SCALE.
HTML_POSITION and HTML_ROTATION , the position and orientation of HTML elements (forms) in the monitor are adjusted.

STEP

Monitor Display Components

Load Meshy-generated 3D models and textures using MTLLLoader and OBJLoader
Draw a model using primitive
Html of the Drei library and place the login form in the monitor part
Finely adjust the appearance of HTML elements with position , rotation , and scale

STEP

Main Components

Create a 3D scene using Canvas in React Three Fiber
Render the model and set the camera
Apply background designs to enhance visual appeal using CSS linear-gradient
OrbitControls , limiting camera movement to horizontal (left and right) only
This setting makes the monitor easier to view from the front

Check the whole source

Below is the complete source code for the explosive 3D buttons created in this article. All the code is put together, so it's easy to get an idea of how it works.

If you would like to see other sources, please check on GitHub.

import './App.css'; import { Meshy3DModel } from './pages'; function App() { return (<div className="App"><Meshy3DModel /></div> ); } export default App;

import React from "react"; import { Canvas } from "@react-three/fiber"; import { OrbitControls, Html } from "@react-three/drei"; import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; import { MTLLLoader } from "three/examples/jsm/loaders/MTLLLoader"; import { useLoader } from "@react-three/fiber"; import * as THREE from "three"; // ===== // PART 1: Constant definition // ===== const CAMERA_POSITION = new THREE.Vector3(0, 0, 3); // Define camera position in Vector3 format const MONITOR_SCALE = 1; const MONITOR_ROTATION = [0, -Math.PI / 2, 0]; const HTML_POSITION = new THREE.Vector3(0, 0.15, 0.06); const HTML_ROTATION = new THREE.Euler(-0.075, 0, 0); const HTML_SCALE = new THREE.Vector3(2.45, 1.85, 0.5); // ===== // PART 2: Monitor Display Components // ===== const MonitorDisplay: React.FC = () => { const materials = useLoader(MTLLoader, "/models/monitor.mtl"); const obj = useLoader(OBJLoader, "/models/monitor.obj", (loader) => { materials.preload(); loader.setMaterials(materials); }); return ( <> {/* Monitor model */}<primitive object={obj} scale={MONITOR_SCALE} position={[0, 0, 0]} rotation={MONITOR_ROTATION} /> {/* HTML element (display part) */} <Html transform position={HTML_POSITION} distanceFactor={1} occlude scale={HTML_SCALE} rotation={HTML_ROTATION} ><div style={{ width: "300px", height: "200px", background: "white", borderRadius: "10px", boxShadow: "0 0 10px rgba(0,0,0,0.5)", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", padding: "10px", textAlign: "center", }} ><h2> Login </h2><input type="text" placeholder="Username" style={{ marginBottom: "10px", padding: "5px" }} /><input type="password" placeholder="Password" style={{ marginBottom: "10px", padding: "5px" }} /> <button style={{ padding: "10px 20px", background: "blue", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", }} >Submit</button></div></Html></> ); }; // ==== // PART 3: Main Component // ===== const Meshy3DModel: React.FC = () => { return ( <div style={{ width: "100vw", height: "100vh", background: "linear-gradient(135deg, #1e3c72,rgb(78, 126, 211))", // グラデーション }} ><Canvas camera={{ position: CAMERA_POSITION, fov: 60 }}><ambientLight intensity={20} /><spotLight position={[10, 10, 10]} intensity={2} /> {/* Monitor display */}<MonitorDisplay /> {/* Limit camera operation */}<OrbitControls minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /></Canvas></div> ); }; export default Meshy3DModel;

PART 1: Generate 3D models with Meshy

This time, the 3D model will be using an AI automatic generation service called Meshy.
The link is below, so please refer to it.

200 credits per month are available for free.

📺 Check Mesh : You can check it on the official page from this link

Meshy AI – The #1 AI 3D Model Ge…

Meshy AI – The #1 AI 3D Model Generator for Creators Meshy is an AI 3D model generator that helps to effortlessly transform images and text into 3D models in seconds.

Text Generation Model > Write the 3D model you want to generate at the Pronto and press the "Generate" button.

Once generated, four types of 3D models will be presented. If you have a 3D model you like, select "Select>Confirm."

This will create a 3D model with textures.
If it continues like this, I'll download it, but this time I'll try changing the texture.

Set the desired texture from the right frame to Texture > Prompt and press the Texture button.

The screen is now made from aluminum, but the screen will be filled with HTML using Threejs, so this is OK.
Click the download button to download in format: obj.

I think obj, mtl, and png will be downloaded.
If you are downloading it in a Japanese name, please change it to English appropriately.

If you change the file name, you will need to modify some of the obj and mtl files.
Please rewrite the original file name with the modified file name.

# Blender 3.6.0 # www.blender.org mtllib monitor.mtl o monitor v 0.094246 -0.375423 0.989129 v 0.097641 -0.373034 0.989317 v -0.123948 -0.629135 0.100659 v -0.131537 -0.624742 0.092791 v -0.143337 -0.627172 0.117533 v -0.003185 0.139220 -0.023328 v -0.012956 0.138576 -0.022627 v -0.016497 0.138405 -0.006704 v -0.006145 0.139249 -0.006801 v -0.178673 -0.664484 -0.063357 v -0.171106 -0.666965 -0.065225 v -0.169799 -0.666526 -0.041548 v 0.026336 0.143811 -0.053985 v 0.042294 0.007904 0.501178 v 0.044668 -0.020894 0.503462 v 0.043755 -0.024969 0.525789 ...

# Blender 3.6.0 MTL File: 'None' # www.blender.org newmtl Material.001 Ns 250.000000 Ka 1.000000 1.000000 1.00000 Ks 0.500000 0.500000 Ke 0.000000 0.00000 0.00000 Ni 1.450000 d 1.00000 illum 2 map_Kd monitor.png

This completes the creation of the 3D model.

PART 1: Constant definition

First, we will look at the import of each library and the constant definitions.

import React from "react"; import { Canvas } from "@react-three/fiber"; import { OrbitControls, Html } from "@react-three/drei"; import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; import { MTLLLoader } from "three/examples/jsm/loaders/MTLLLoader"; import { useLoader } from "@react-three/fiber"; import * as THREE from "three"; // ===== // PART 1: Constant definition // ===== const CAMERA_POSITION = new THREE.Vector3(0, 0, 3); // Define camera position in Vector3 format const MONITOR_SCALE = 1; const MONITOR_ROTATION = [0, -Math.PI / 2, 0]; const HTML_POSITION = new THREE.Vector3(0, 0.15, 0.06); const HTML_ROTATION = new THREE.Euler(-0.075, 0, 0); const HTML_SCALE = new THREE.Vector3(2.45, 1.85, 0.5);

Depending on the 3D model you generate, fine adjustments may be necessary, so please use the following as a reference to play around with the numbers.

Camera position definition
- CAMERA_POSITION: Defines the initial position of the camera
  - I have set new THREE.Vector3(0, 0, 3) to place the camera in front of the monitor
  - This allows users to view the monitor properly from the front
Defining monitor scale and rotation
- MONITOR_SCALE: Adjust the overall monitor scale
  - You can easily change the size of your model by changing the value
- MONITOR_ROTATION: Specify the monitor orientation
  - [0, -Math.PI/2, 0] and point the monitor towards the front
Defining HTML element position, rotation, and scale
- HTML_POSITION: Defines the location of the HTML element (login form)
  - The coordinates are finely adjusted to be placed on the monitor screen
- HTML_ROTATION: Adjusts the rotation of HTML elements
  - Adjust it to look good inside the screen even if the monitor has a slight tilt
- HTML_SCALE: Defines the size of the HTML element
  - The scale is set to fit on the monitor screen

PART 2: Monitor Display Components

PART 2 loads 3D models generated with Meshy and builds monitors and displays. Also, use Html

// ==== // PART 2: Monitor Display Components // ===== const MonitorDisplay: React.FC = () => { const materials = useLoader(MTLLoader, "/models/monitor.mtl"); const obj = useLoader(OBJLoader, "/models/monitor.obj", (loader) => { materials.preload(); loader.setMaterials(materials); }); return ( <> {/* Monitor model */}<primitive object={obj} scale={MONITOR_SCALE} position={[0, 0, 0]} rotation={MONITOR_ROTATION} /> {/* HTML element (display part) */} <Html transform position={HTML_POSITION} distanceFactor={1} occlude scale={HTML_SCALE} rotation={HTML_ROTATION} ><div style={{ width: "300px", height: "200px", background: "white", borderRadius: "10px", boxShadow: "0 0 10px rgba(0,0,0,0.5)", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", padding: "10px", textAlign: "center", }} ><h2> Login </h2><input type="text" placeholder="Username" style={{ marginBottom: "10px", padding: "5px" }} /><input type="password" placeholder="Password" style={{ marginBottom: "10px", padding: "5px" }} /> <button style={{ padding: "10px 20px", background: "blue", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", }} >Submit</button></div></Html></> ); };

Loading monitor models
- Draw your model accurately using OBJLoader and MTLLLoader
- Use primitive
Integrating HTML and 3D space
- Drei's Html component places HTML elements in 3D space
- the position and scale to position it so that it fits perfectly on the monitor screen.

PART 3: Main Component

In PART 3, you use React Three Fiber's Canvas to build a 3D scene and display a monitor display. It also sets restrictions on background design and camera operation to improve the overall look and ease of use.

// ==== // PART 3: Main Component // ===== const Meshy3DModel: React.FC = () => { return ( <div style={{ width: "100vw", height: "100vh", background: "linear-gradient(135deg, #1e3c72,rgb(78, 126, 211))", // グラデーション }} ><Canvas camera={{ position: CAMERA_POSITION, fov: 60 }}><ambientLight intensity={20} /><spotLight position={[10, 10, 10]} intensity={2} /> {/* Monitor display */}<MonitorDisplay /> {/* Limit camera operation */}<OrbitControls minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /></Canvas></div> ); }; export default Meshy3DModel;

Creating a 3D scene
- CameraInitial settings
  - position : Use CAMERA_POSITION
  - fov : Set Field of View (set to 60 this time)
Adding a light
- ambientLight(Ambient Light)
  - Lights that illuminate the entire scene evenly
  - intensity (set to 20) to make the model look more visible
- spotLight(Spotlight)
  - Lights that illuminate the model from a specific direction
  - Adjust the position of the light and set the monitor to properly emphasize
Monitor display layout
- Call the MonitorDisplay created in PART 2
Camera operation restrictions
- Limit operations to horizontal only
  - Set minPolarAngle and maxPolarAngle Math.PI/2 and disable camera up and down movement (*Because HTML didn't hide up and down properly)
  - Make your monitor visible from the front at all times
- Adjusting the zoom
  - This time I'm using the camera's zoom function as default, but you can also enable/disable using enableZoom
Background settings
- Apply gradients to the background of the entire 3D scene using CSS linear-gradient

lastly

Up until now, we have explained the steps from generating a 3D model using Meshy to display it in a browser using React x Three.js. This project is designed to be easy for anyone new to 3D modeling or Three.js.

Use AI-generated 3D models with Meshy
React x Three.js integration
Adding interactive HTML elements
Visual ingenuity

Use Meshy to view various 3D models!

📺 Watch the demo on YouTube : You can watch it from this link

If you found this tutorial helpful, please subscribe to our YouTube channel and give it a high rating!

YouTube

Additionally, the source code for this project is available on GitHub.
Please download the code and try it out!

💾 GitHub Repository : Check the source code at this link

GitHub

If you found this helpful, please subscribe to our channel!

📺 Watch YouTube : You can watch it from this link

YouTube

Hack Lab. 256 Share your videos with friends, family and people all over the world

TypeScript x React Three Fiber

If you'd like to know what React Three Fiber can do, please refer to the following!
We have easy-to-use works available!

Click here for works using React Three Fiber

Share if you like!

The URL has been copied!

Who wrote this article

Taku

This is a blog I started to study information security. As a new employee, I would be happy if you could look with a broad heart.
There is also Teech Lab, which is an opportunity to study programming fun, so if you are interested in software development, be sure to take a look!