# Membuat Sakelar Lampu 3D dengan Interaksi - Spline Academy (https://spline.design/id/academy/tutorials/build-a-3d-light-switch-with-interaction)

> Dalam tutorial ini, kita akan kembali membahas ide interaksi toggle dengan fitur baru 'Toggle' yang tersedia di Mouse event dan Key event.

1. [Academy](https://spline.design/id/academy)
2. [Tutorial](https://spline.design/id/academy/tutorials)
3. Membuat Sakelar Lampu 3D dengan Interaksi

# Membuat Sakelar Lampu 3D dengan Interaksi

Spline 3DMenengah13 mnt

Dalam tutorial ini, kita akan kembali membahas ide interaksi toggle dengan fitur baru 'Toggle' yang tersedia di Mouse event dan Key event.

Fitur ini memudahkan pembuatan efek toggle hanya dengan satu event.

Versi live: <https://my.spline.design/switchtutorial-70a23dd070513899912c011c202b0368/>

## Yang akan Anda pelajari

1. [0:00Pengantar](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=0s)
2. [0:55Membuat dasar sakelar](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=55s)
3. [3:00Membuat bentuk sakelar](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=180s)
4. [7:20Menambahkan tepian sakelar](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=440s)
5. [8:40Menambahkan event toggle mouse](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=520s)
6. [9:55Detail akhir](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=595s)

## Sumber terkait

- [Switch ToggleTemplate](https://app.spline.design/academy/tutorials/build-a-3d-light-switch-with-interaction?redirect-duplicate-template-uuid=10f3c48a-c074-4e8d-bea0-607edaa22121&is-2d-file=false)
- [3D Modeling ToolsDokumen](https://docs.spline.design/designing-in-3-d/3d-modeling-tools)
- [Materials & ShadingDokumen](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [Events & InteractivityDokumen](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)
- [Transition ActionDokumen](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Ikhtisar

- Spline 3D
- 13 mnt
- Menengah

## Bagian dari

- [Dasar-Dasar Modeling di Spline](https://spline.design/id/academy/collections/modeling-essentials-in-spline/build-a-3d-light-switch-with-interaction)

## Tutorial terkait

[Semua tutorial](https://spline.design/id/academy/tutorials)

[Membuat Keyboard Interaktif Gelap dalam 3DSpline 3DMenengah16 mnt](https://spline.design/id/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Mendesain Keyboard 3D InteraktifSpline 3DMenengah17 mnt](https://spline.design/id/academy/tutorials/design-an-interactive-3d-keyboard)[Membuat Planet 3D yang Realistis dengan Material & PencahayaanSpline 3DPemula7 mnt](https://spline.design/id/academy/tutorials/build-a-realistic-3d-planet-with-materials-lighting)

[Spline](https://spline.design/id)

Editor 3D dan 2D untuk tim dan agen mereka. Rilis ke web, iOS, dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Desain 3D](https://spline.design/id/3d-design)
- [Hana](https://spline.design/id/hana)
- [Omma](https://omma.build)
- [Pembuatan 3D dengan AI](https://spline.design/id/ai-generate)
- [Spline MCP](https://spline.design/id/mcp)
- [Spline Arena](https://spline.design/id/arena)
- [Harga](https://spline.design/id/pricing)
- [Enterprise](https://spline.design/id/enterprise)

#### Runtime

- [Web](https://spline.design/id/web)
- [iOS](https://spline.design/id/ios)
- [Android](https://spline.design/id/android)

#### Aplikasi

- [Unduh](https://spline.design/id/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Unduh Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/id/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solusi](https://spline.design/solutions)

#### Komunitas

- [Komunitas Spline](https://community.spline.design)
- [Blog](https://spline.design/id/blog)
- [Changelog](https://spline.design/id/changelog)
- [Pendidikan](https://spline.design/id/education)
- [Contra](https://spline.design/contra)
- [Afiliasi](https://spline.design/id/affiliate)

#### Perusahaan

- [Pelanggan](https://spline.design/id/customers)
- [Karier](https://www.ycombinator.com/companies/spline/jobs)
- [Keamanan](https://spline.design/id/security)

#### Legal

- [Syarat & Ketentuan](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Kontak

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.