使用 Blender MCP + Claude Desktop 製作 3D 模型並用 React Three 渲染 (AI 建模, MCP, GLB檔案, Three.js)

Introduction

This tutorial will guide you through the process of creating 3D models using Blender MCP and Claude AI, and rendering them with React Three.js. This step-by-step approach is designed for beginners, making it easy to follow along and learn the basics of 3D modeling and rendering.

Step 1: Install Required Tools

To get started, you'll need to install the necessary software components:

1. PowerShell Setup:

   • Open PowerShell on your computer.
   • Run the following command to install the required scripts:

     powershell -ExecutionPolicy RemoteSigned -c "irm https://astral.sh/uv/install.ps1 | iex"
     

2. Install Blender MCP:

   • Visit the Blender MCP GitHub repository: Blender MCP.
   • Follow the instructions provided on the repository page to download and set up Blender MCP.

Step 2: Create a 3D Model with Blender MCP

Once you have installed Blender MCP, proceed to create your 3D model:

1. Open Blender:

   • Launch Blender and load the MCP add-on.

2. Modeling Process:

   • Use the tools provided by Blender MCP to create your 3D model.
   • If you're a beginner, consider starting with basic shapes and gradually add details.
   • Explore tutorials within Blender for specific modeling techniques.

3. Exporting the Model:

   • Once your model is complete, export it as a GLB file.
   • Go to File > Export > glTF 2.0 (.glb) and save your model.

Step 3: Set Up React Project

Now that you have your model, it’s time to set up a React project to render the model using Three.js:

1. Create a React App:

   • Open your terminal and create a new React application:

     npx create-react-app my-3d-app
     cd my-3d-app
     

2. Install Three.js and React-Three-Fiber:

   • Install the necessary libraries:

     npm install three @react-three/fiber
     

3. Add 3D File Preview Sandbox:

   • To preview your GLB files, you can use the 3D file preview sandbox. Access it here: 3D File Preview Sandbox.
   • You can also review the code for the 3D file preview sandbox on GitHub: 3D Preview Code.

Step 4: Code the React Component for Rendering

You will now create a component to render your 3D model in your React app:

1. Create a New Component:

   • Inside the src directory, create a new file named ModelViewer.js.

2. Add the Following Code:

   • Use the code below to render your GLB model:

   import React from 'react';
   import { Canvas } from '@react-three/fiber';
   import { useGLTF } from '@react-three/drei';
   
   function Model(props) {
     const { nodes, materials } = useGLTF('/path/to/your/model.glb');
     return <primitive object={nodes.yourModelName} {...props} />;
   }
   
   export default function ModelViewer() {
     return (
       <Canvas>
         <ambientLight />
         <pointLight position={[10, 10, 10]} />
         <Model />
       </Canvas>
     );
   }
   

3. Update Your App Component:

   • In App.js, import and use the ModelViewer component to display your 3D model.

Conclusion

You have now successfully created a 3D model using Blender MCP, exported it, and rendered it in a React application using Three.js.

Key Takeaways

• Installing the necessary tools is crucial to start your modeling journey.
• Blender MCP provides an accessible way to create complex 3D models.
• React and Three.js offer a powerful combination for rendering 3D content on the web.

Next Steps

• Experiment with different modeling techniques in Blender.
• Explore more advanced features in React Three.js to enhance your 3D applications.
• Consider sharing your models or applications with the community for feedback and improvement.