Tencent EdgeOne Makers: Deploying a 3D AI Procedural Asset Studio with Next.js and Three.js

ibay — Wed, 16 Sep 2026 04:32:42 +0000

Building a web application is only one part of the development process. Once the application is ready, developers still need to think about deployment, performance, infrastructure, and how users can access the project reliably.

For my project in the DevHandal 2026 Batch 2 program, I built a 3D AI Procedural Asset Studio, a web-based application that allows users to generate and manipulate simple 3D scenes through natural-language instructions.

After developing the application locally, I deployed it using Tencent EdgeOne Makers. This article shares my technical experience, project architecture, deployment process, and several lessons I learned while deploying a modern Next.js and Three.js application.

Project Overview

The project is called Asset Studio. It is designed as a lightweight 3D workspace where users can interact with procedural 3D objects and use an AI assistant to generate or modify scenes through natural-language prompts.

For example, a user can enter a prompt such as:

“Buat rumah 2 lantai dengan atap pelana.”

The application can then translate the request into structured scene information, which is used to create objects inside the 3D environment.

The interface consists of several main areas:

A scene hierarchy showing generated 3D objects
A Three.js-based 3D viewport
An AI assistant panel
Scene and object information
Tools for modifying the generated scene
GLB export functionality

The project uses Next.js, React, Three.js, React Three Fiber, React Three Drei, Zustand, and TypeScript.

The source code is also organized as a pnpm monorepo, with the main web application located inside apps/web and reusable functionality separated into workspace packages.

Why Tencent EdgeOne Makers?

For this project, I wanted to use a deployment platform that could handle a modern web application without requiring me to manually configure a traditional server.

Tencent EdgeOne Makers provides support for modern full-stack frameworks, including Next.js. Its current Next.js integration supports features such as App Router, SSR, ISR, SSG, React Server Components, Route Handlers, and other Next.js capabilities.

This makes EdgeOne Makers interesting for developers who are building applications that go beyond a simple static website.

The platform also integrates with Git repositories, allowing deployment to be triggered from the development workflow.

For a student developer working on portfolio projects, this type of workflow is useful because the deployment process can remain closely connected to the source code.

Preparing the Project

One important aspect of my project was its monorepo structure.

The repository roughly follows this structure:
3d-generator/
├── apps/
│ └── web/
├── packages/
├── docs/
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

The web application has its own package.json inside apps/web.

It also depends on internal workspace packages:
{
"dependencies": {
"@asset-studio/llm-adapter": "workspace:*",
"@asset-studio/scene-engine": "workspace:^"
}
}

Because of this structure, I kept the deployment root at the repository root rather than changing it directly to apps/web.

The build process can then install the workspace dependencies and build the web application using pnpm.

The relevant build command is:
pnpm --filter @asset-studio/web build

This approach allows the Next.js application to continue resolving the internal workspace packages correctly.

Configuring EdgeOne Makers

For the deployment configuration, I used the Next framework preset.

The main configuration was:
`Framework:
Next

Root Directory:
./

Install Command:
pnpm install

Compile Command:
pnpm --filter @asset-studio/web build`

Choosing the normal Next preset is important because the project is a Next.js application. EdgeOne Makers also provides a separate configuration for static export projects, but those are intended for applications that explicitly generate a fully static output. The official documentation lists different default output directories for standard Next.js deployments and static export mode.

For developers working with Next.js, it is therefore useful to understand whether their application requires Next.js runtime features or can be completely exported as static files.

Deployment Result

After configuring the project and connecting the Git repository, EdgeOne Makers successfully completed the deployment pipeline.

The deployment process consisted of several stages:
Initialize
↓
Clone
↓
Install
↓
Build
↓
Deploy

All stages completed successfully.

The application is now publicly accessible through the EdgeOne Makers deployment domain:

https://threed-dpduaz9nfl3m.edgeone.dev/

The deployed application provides the same core 3D workspace that I developed locally, including the scene hierarchy, 3D viewport, and AI-assisted scene generation workflow.

What I Learned

One of the most important lessons from this deployment was that deployment configuration needs to match the actual project architecture.

A project may work perfectly on a local machine but still require additional configuration when deployed. This becomes especially important for monorepos because the application may depend on packages located outside the application directory.

Another lesson is to understand the difference between a standard Next.js deployment and a static export.

Next.js supports multiple rendering approaches, including SSR, ISR, SSG, and CSR, while EdgeOne Makers provides support for these different modes.

This means developers should first determine how their application is actually built before choosing the deployment configuration.

For example, a portfolio website consisting entirely of static pages may be suitable for static export. On the other hand, an application that depends on server-side functionality may require the normal Next.js deployment configuration.

Best Practices for Developers

Based on this project, I would recommend several practices when deploying a similar application.

Understand your repository structure

Before configuring the deployment platform, identify the actual application root and whether the project is a monorepo.

Test the production build locally

Run the same build command locally before deploying. This makes it easier to distinguish application problems from deployment configuration problems.

Choose the framework preset carefully

Using the correct framework preset can reduce unnecessary configuration and allow the platform to apply framework-specific deployment behavior.

Keep environment variables separate from source code

API keys and other sensitive configuration should be stored as environment variables rather than committed to Git repositories. EdgeOne Makers provides environment-variable configuration for deployment environments.

Verify the deployed application

A successful build does not replace testing the actual production URL. Always open the deployment URL and test the application's important workflows after deployment.

Conclusion

Deploying my 3D AI Procedural Asset Studio with Tencent EdgeOne Makers gave me practical experience in connecting application architecture, Git-based development, framework configuration, and cloud deployment.

The project combines several technologies that are increasingly common in modern web development: Next.js, TypeScript, Three.js, AI-assisted workflows, and a monorepo architecture.

For me, the most valuable part was not simply getting the project online. It was understanding how the application's architecture affects the deployment process.

Tencent EdgeOne Makers provides a workflow that can accommodate both modern frontend applications and full-stack frameworks such as Next.js. Its documentation also provides framework-specific guidance, which is useful when moving a project from local development into a production environment.

The final deployed project can be accessed here:

https://threed-dpduaz9nfl3m.edgeone.dev/

I hope this project can encourage other young developers to experiment with 3D web development, AI-assisted applications, and modern deployment workflows rather than limiting themselves to conventional web projects.

Project: 3D AI Procedural Asset Studio
Deployment: Tencent EdgeOne Makers
Stack: Next.js, React, TypeScript, Three.js, React Three Fiber, pnpm

TencentEdgeOne #EdgeOneMakers #CODEPOLITAN #EdgeOne

DEV Community: ibay

Tencent EdgeOne Makers: Deploying a 3D AI Procedural Asset Studio with Next.js and Three.js

TencentEdgeOne #EdgeOneMakers #CODEPOLITAN #EdgeOne