3D แบบอินเทอร์แอคทีฟ สร้างมาเพื่อเว็บ

ฝังฉาก 3D ด้วยแท็ก HTML เพียงแท็กเดียว หรือส่งออกเป็นโค้ดสำหรับ Vanilla JS, React, Next.js และ Three.js

your-website.com
Spline Viewer

แท็กเดียว ใช้ได้ทุกเว็บไซต์

<spline-viewer> คือเว็บคอมโพเนนต์แบบเนทีฟ จึงใช้งานได้ใน Framer, Webflow, Squarespace, React, Svelte และ HTML ธรรมดา รับรู้ได้ทั้งหน้าเพจ ไม่ใช่แค่แคนวาสของตัวเอง ฉากจึงติดตามเคอร์เซอร์ หันมองเคอร์เซอร์ และเคลื่อนไหวตามการเลื่อนหน้าได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับSpline Viewer
main.js
import { Application } from '@splinetool/runtime';

// Render the scene on a canvas
const canvas = document.getElementById('canvas3d');
const app = new Application(canvas);

app.load('https://prod.spline.design/DGI6oWLNcrhyDwvi/scene.splinecode');
ส่งออกเป็นโค้ด

ฉาก 3D ของคุณในรูปแบบโค้ด

ส่งออกเป็น Vanilla JS, React, Next.js, Three.js หรือ react-three-fiber คัดลอกโค้ด เปิดใน CodeSandbox หรือดาวน์โหลดไฟล์ไปโฮสต์เอง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการส่งออกเป็นโค้ด
บนเว็บยังมีอีก

ตั้งแต่ลิงก์จนถึงเซิร์ฟเวอร์ของคุณเอง

Code API

ทริกเกอร์อีเวนต์ อัปเดต Variables และเปลี่ยนพร็อพเพอร์ตีของวัตถุจากโค้ดของคุณเอง ใน Vanilla JS, React และ Next.js

URL สาธารณะ

แชร์ฉากเป็นลิงก์ หรือฝังใน Notion, Webflow, WordPress และอื่น ๆ

โฮสต์เอง

ดาวน์โหลดทั้งโปรเจกต์รวมถึงรันไทม์ แล้วเสิร์ฟจากเซิร์ฟเวอร์ของคุณเอง ในแพ็กเกจ Enterprise

WebGPU

ฉากเรนเดอร์ด้วย WebGPU และสลับไปใช้ WebGL โดยอัตโนมัติในที่ที่ไม่รองรับ

เริ่มสร้างสรรค์งาน 3D

เชื่อมต่อเอเจนต์ ชวนทีมของคุณ แล้วเผยแพร่ฉาก 3D แรกได้ตั้งแต่วันนี้