# Cipta Ikon 3D dari Awal - Spline 101 | Bina Adegan Interaktif Pertama Anda - Spline Academy (https://spline.design/ms/academy/tutorials/create-3d-icons-from-scratch)

> Hai! Dalam tutorial ini, kami menyelami cara mencipta ikon 3D menggunakan Spline, merangkumi topik seperti mengubah vektor 2D kepada 3D, menggunakan pen…

1. [Academy](https://spline.design/ms/academy)
2. [Kursus](https://spline.design/ms/academy/collections)
3. [Spline 101 | Bina Adegan Interaktif Pertama Anda](https://spline.design/ms/academy/collections/spline-101-build-your-first-interactive-scene)
4. Cipta Ikon 3D dari Awal

# Cipta Ikon 3D dari Awal

Pelajaran 3 daripada 16Spline 3DPemula16 min

Hai! Dalam tutorial ini, kami menyelami cara mencipta ikon 3D menggunakan Spline, merangkumi topik seperti mengubah vektor 2D kepada 3D, menggunakan pen tool, dan mengimport serta menukar SVG. Bersama-sama kita akan mencipta ikon dari mula hingga akhir, menambah bahan untuk mencipta kesan kaca fros. Kami juga meneroka cara menjadikan ikon interaktif dan memanfaatkannya untuk projek web atau aplikasi.

Jom kita mulakan!

\---

Sumber di sini! 👋: 🏃Ini tutorial hebat untuk mengetahui lebih lanjut tentang menjadikan sesuatu interaktif dalam Spline: <https://www.youtube.com/watch?v=JPUSjRxQEKI&t=352s>

🏗️ Lebih banyak cara untuk membina dalam Spline: <https://www.youtube.com/watch?v=xc-ExwgYDQI>

💻 3D untuk Laman Web Anda:

<https://www.youtube.com/watch?v=ncoSN9mgWe8&t=165s>

💖 3D untuk Projek iOS:

<https://www.youtube.com/watch?v=44OPMq7FdD0&t=18s>

\--- Temui lebih ramai pencipta dan projek hebat #MadeInSpline di <https://community.spline.design/>

## Apa yang akan anda pelajari

1. [0:00Pengenalan kepada Ikon 3D](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=0s)
2. [0:21Mengubah 2D kepada 3D](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=21s)
3. [1:00Menggunakan Pen Tool dan Bentuk](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=60s)
4. [2:31Mengimport dan Menukar SVG](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=151s)
5. [4:38Menambah Bahan untuk Kesan 3D](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=278s)
6. [14:04Tambah Interaksi Ringkas pada Ikon](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=844s)

## Sumber berkaitan

- [Message IconTemplat](https://app.spline.design/academy/tutorials/create-3d-icons-from-scratch?redirect-duplicate-template-uuid=806351b2-5c4c-4587-b4e1-eaeb698c5445&is-2d-file=false)
- [Pen ToolDokumen](https://docs.spline.design/designing-in-3-d/pen-tool)
- [Extruding 2D objects in 3DDokumen](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [Materials & ShadingDokumen](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)

## Gambaran keseluruhan

- Spline 3D
- 16 min
- Pemula

## Seterusnya

[Tambah Interaksi Berasaskan Tetikus pada Objek 3D14 minPemula](https://spline.design/ms/academy/collections/spline-101-build-your-first-interactive-scene/add-mouse-based-interactions-to-3d-objects)[Teruskan](https://spline.design/ms/academy/collections/spline-101-build-your-first-interactive-scene/add-mouse-based-interactions-to-3d-objects)

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

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

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

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

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

#### Hubungi

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

© 2026 - Spline, Inc.