Overview
3DKit is a high-performance 3D standard designed to enable Near-Zero Latency Interaction in web-based business environments. This protocol goes beyond simple deployment, serving as a technical specification that grants Engineering Authority to your interface.
High Performance
Using Draco and KTX 2.0 technologies, loading times are reduced by over 85% while maintaining a consistent 60 FPS.
Easy Integration
It provides an intuitive interface that allows complex 3D scenes to be controlled using only HTML data attributes.
Basic Concepts
3DKit is a data-centric framework designed to efficiently control complex 3D graphics in web environments. By understanding the following three core concepts, you can grasp the entire system.
The Asset
A 3DKit asset is not just a simple 3D model (GLB). It is an engineered data package optimized to maximize web runtime performance.
Precision Control
All assets are configured with scales and coordinate systems optimized for web environments.
Built-in Efficiency
With over 90% compression and pre-baked data, assets are ready for immediate rendering.
Data-Attribute Schema
Instead of modifying code directly, 3DKit adopts a declarative approach, enabling control of assets through HTML attributes.
Separation of Concerns
Completely separates 3D design from control logic.
Dynamic Binding
Instantly maps interactions using simple keywords.
Delivery Strategy
An optimized pipeline that delivers prepared assets to the browser renderer in the most efficient sequence.
Async Loading
Protects user experience through asynchronous loading.
Automatic Decoding
Ensures an optimal decoding sequence that minimizes GPU load.
Data-Attribute Schema
The 3DKit library allows you to control the state of 3D objects—such as their position and size—simply by defining attributes in HTML tags, without writing any additional JavaScript code.
| Attribute | Description | Default |
|---|---|---|
data-model-path |
Absolute/relative path to the 3D asset (.glb) | null |
data-auto-rotate |
Enables automatic object rotation (true / false) | false |
data-intensity |
Controls lighting and environment reflection (0.0 ~ 2.0) | 1.0 |
data-scale |
Initial object scale when the scene loads | 1.0 |
<!-- 3DKit Declarative Implementation -->
<div class="3dkit-viewport"
data-model-path="/assets/hero_engine.glb"
data-auto-rotate="true"
data-intensity="1.5"
data-scale="0.8">
</div>Runtime Asset Pipeline
When assets need to be loaded directly within a Three.js environment, it is recommended to route the request through 3DKit’s optimized pipeline (Draco Decoder).
// 3DKit Optimized Asset Loading Implementation
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
// 1. Initialize the loader using the 3DKit standard
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
// 2. Set Decoder for High-Performance Compression
dracoLoader.setDecoderPath('/draco/gltf/');
loader.setDRACOLoader(dracoLoader);
// 3. Deployment
loader.load('3dkit_asset_v1.glb', (gltf) => {
scene.add(gltf.scene);
console.log('3DKit Protocol: Asset successfully deployed with 60FPS optimization');
});Optimization Architecture
All 3DKit assets are produced through a three-stage pipeline—spanning mesh construction, file compression, and rendering computation—fully optimized for web runtime environments. Each stage operates in tight integration rather than isolation, collectively determining the final performance output.
Reduction
(vs Standard GLB)
on Mobile
Mesh & Topology
Blender Scene Statistics
Objects : 36
Vertices : 23,455
Edges : 45,083
Faces : 21,749
Triangles : 43,670
Clean Quad Topology
All models are manually retopologized in the Blender environment. By eliminating unnecessary triangular polygons and maintaining a quad-based flow, shading distortion is fundamentally prevented at runtime.
Engineered Vertex Density
Only the minimum vertex data required to preserve visual curvature is retained, reducing data transfer overhead between CPU and GPU by over 75% (compared to uncompressed meshes).
Compression & Baking
Draco Mesh Compression
By applying the Google Draco algorithm, file sizes are reduced by up to 90% compared to standard GLB assets. This ensures immediate rendering without loading delays, even in ultra-low bandwidth network conditions.
Lightmap Baking Strategy
Real-time lighting calculations are pre-baked to eliminate GPU rendering overhead. This guarantees consistent, high-quality shading without thermal issues, even on mobile browsers.
Integration
3DKit is designed for full compatibility with modern web ecosystems. Developers can build high-end 3D environments with just a few lines of code through the provided interface—without modifying the core engine logic.
01. Declarative Approach (No-Code/Low-Code)
Control 3D scenes using only HTML data attributes, without the need for complex JavaScript.
<!-- Minimal Setup Example -->
<div class="3dkit-viewport"
data-model-path="/assets/hero_engine.glb">
</div>
02. Modern Framework (React / Next.js Hook Pattern)
Provides a Hook pattern optimized for component lifecycles, enabling stable rendering and efficient resource management.
import { useEffect, useRef } from 'react';
import { KitEngine } from '@3dkit/core';
export const FinancialHero = () => {
const canvasRef = useRef(null);
useEffect(() => {
// Initialize 3DKit optimization engine
const engine = new KitEngine(canvasRef.current, {
asset: '/assets/finance_hero_v1.glb',
quality: 'high-performance',
autoAnimate: true
});
// Immediately release GPU resources when the component unmounts
return () => engine.dispose();
}, []);
return <div ref={canvasRef} className="h-screen w-full" />;
};
All integration patterns include built-in hydration prevention logic, helping reduce common hydration issues in server-side rendering (SSR) environments.
License & Usage
3DKit is designed to deliver stable, high-performance 3D rendering in web environments. It can be used across personal and commercial projects, with flexible licensing options. View full license ↗