{"slug": "tencent-edgeone-makers-deploying-a-3d-ai-procedural-asset-studio-with-next-js-js", "title": "Tencent EdgeOne Makers: Deploying a 3D AI Procedural Asset Studio with Next.js and Three.js", "summary": "A developer built Asset Studio, a web-based 3D AI procedural asset studio that generates and manipulates 3D scenes from natural-language prompts, and deployed it using Tencent EdgeOne Makers. The application is built with Next.js, React, Three.js, React Three Fiber, Zustand, and TypeScript, organized as a pnpm monorepo with the web app in apps/web and reusable logic in workspace packages. The developer configured EdgeOne Makers with the Next.js framework preset, keeping the deployment root at the repository root and using the build command pnpm --filter @asset-studio/web build so internal workspace dependencies resolve correctly.", "body_md": "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.\n\nFor 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.\n\nAfter 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.\n\nProject Overview\n\nThe 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.\n\nFor example, a user can enter a prompt such as:\n\n`“Buat rumah 2 lantai dengan atap pelana.”`\n\nThe application can then translate the request into structured scene information, which is used to create objects inside the 3D environment.\n\nThe interface consists of several main areas:\n\nA scene hierarchy showing generated 3D objects\n\nA Three.js-based 3D viewport\n\nAn AI assistant panel\n\nScene and object information\n\nTools for modifying the generated scene\n\nGLB export functionality\n\nThe project uses Next.js, React, Three.js, React Three Fiber, React Three Drei, Zustand, and TypeScript.\n\nThe 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.\n\nWhy Tencent EdgeOne Makers?\n\nFor 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.\n\nTencent 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.\n\nThis makes EdgeOne Makers interesting for developers who are building applications that go beyond a simple static website.\n\nThe platform also integrates with Git repositories, allowing deployment to be triggered from the development workflow.\n\nFor 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.\n\nPreparing the Project\n\nOne important aspect of my project was its monorepo structure.\n\nThe repository roughly follows this structure:\n\n3d-generator/\n\n├── apps/\n\n│   └── web/\n\n├── packages/\n\n├── docs/\n\n├── package.json\n\n├── pnpm-lock.yaml\n\n└── pnpm-workspace.yaml\n\nThe web application has its own package.json inside apps/web.\n\nIt also depends on internal workspace packages:\n\n{\n\n  \"dependencies\": {\n\n    \"@asset-studio/llm-adapter\": \"workspace:*\",\n\n    \"@asset-studio/scene-engine\": \"workspace:^\"\n\n  }\n\n}\n\nBecause of this structure, I kept the deployment root at the repository root rather than changing it directly to apps/web.\n\nThe build process can then install the workspace dependencies and build the web application using pnpm.\n\nThe relevant build command is:\n\npnpm --filter @asset-studio/web build\n\nThis approach allows the Next.js application to continue resolving the internal workspace packages correctly.\n\nConfiguring EdgeOne Makers\n\nFor the deployment configuration, I used the Next framework preset.\n\nThe main configuration was:\n\n`Framework:\n\nNext\n\nRoot Directory:\n\n./\n\nInstall Command:\n\npnpm install\n\nCompile Command:\n\npnpm --filter @asset-studio/web build`\n\nChoosing 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.\n\nFor 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.\n\nDeployment Result\n\nAfter configuring the project and connecting the Git repository, EdgeOne Makers successfully completed the deployment pipeline.\n\nThe deployment process consisted of several stages:\n\nInitialize\n\n   ↓\n\nClone\n\n   ↓\n\nInstall\n\n   ↓\n\nBuild\n\n   ↓\n\nDeploy\n\nAll stages completed successfully.\n\nThe application is now publicly accessible through the EdgeOne Makers deployment domain:\n\nhttps://threed-dpduaz9nfl3m.edgeone.dev/\n\nThe deployed application provides the same core 3D workspace that I developed locally, including the scene hierarchy, 3D viewport, and AI-assisted scene generation workflow.\n\nWhat I Learned\n\nOne of the most important lessons from this deployment was that deployment configuration needs to match the actual project architecture.\n\nA 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.\n\nAnother lesson is to understand the difference between a standard Next.js deployment and a static export.\n\nNext.js supports multiple rendering approaches, including SSR, ISR, SSG, and CSR, while EdgeOne Makers provides support for these different modes.\n\nThis means developers should first determine how their application is actually built before choosing the deployment configuration.\n\nFor 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.\n\nBest Practices for Developers\n\nBased on this project, I would recommend several practices when deploying a similar application.\n\nBefore configuring the deployment platform, identify the actual application root and whether the project is a monorepo.\n\nRun the same build command locally before deploying. This makes it easier to distinguish application problems from deployment configuration problems.\n\nUsing the correct framework preset can reduce unnecessary configuration and allow the platform to apply framework-specific deployment behavior.\n\nAPI 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.\n\nA successful build does not replace testing the actual production URL. Always open the deployment URL and test the application's important workflows after deployment.\n\nConclusion\n\nDeploying 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.\n\nThe project combines several technologies that are increasingly common in modern web development: Next.js, TypeScript, Three.js, AI-assisted workflows, and a monorepo architecture.\n\nFor me, the most valuable part was not simply getting the project online. It was understanding how the application's architecture affects the deployment process.\n\nTencent 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.\n\nThe final deployed project can be accessed here:\n\n[https://threed-dpduaz9nfl3m.edgeone.dev/](https://threed-dpduaz9nfl3m.edgeone.dev/)\n\nI 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.\n\nProject: 3D AI Procedural Asset Studio\n\nDeployment: Tencent EdgeOne Makers\n\nStack: Next.js, React, TypeScript, Three.js, React Three Fiber, pnpm", "url": "https://wpnews.pro/news/tencent-edgeone-makers-deploying-a-3d-ai-procedural-asset-studio-with-next-js-js", "canonical_source": "https://dev.to/ibay_125128a17dd5b9568bd7/tencent-edgeone-makers-deploying-a-3d-ai-procedural-asset-studio-with-nextjs-and-threejs-d71", "published_at": "2026-09-16 04:32:42+00:00", "updated_at": "2026-09-16 04:37:30.920242+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "developer-tools", "ai-products"], "entities": ["Tencent EdgeOne Makers", "Next.js", "Three.js", "React Three Fiber", "Zustand", "TypeScript", "Asset Studio", "DevHandal 2026 Batch 2"], "alternates": {"html": "https://wpnews.pro/news/tencent-edgeone-makers-deploying-a-3d-ai-procedural-asset-studio-with-next-js-js", "markdown": "https://wpnews.pro/news/tencent-edgeone-makers-deploying-a-3d-ai-procedural-asset-studio-with-next-js-js.md", "text": "https://wpnews.pro/news/tencent-edgeone-makers-deploying-a-3d-ai-procedural-asset-studio-with-next-js-js.txt", "jsonld": "https://wpnews.pro/news/tencent-edgeone-makers-deploying-a-3d-ai-procedural-asset-studio-with-next-js-js.jsonld"}}