index

+ +

Needle Engine dưới dạng Web Component

Needle Engine cung cấp một web component dễ sử dụng có thể được dùng để hiển thị các cảnh 3D phong phú, tương tác trực tiếp trong HTML chỉ với vài dòng code. Đây là web component tương tự được sử dụng trong các tích hợp của chúng tôi.

Một khi bạn vượt quá các tùy chọn cấu hình của web component, bạn có thể mở rộng nó bằng các script và component tùy chỉnh, cũng như truy cập đầy đủ vào scene graph theo lập trình.

:::tip Sử dụng các tích hợp! Đối với các cảnh 3D phức tạp và lặp lại nhanh chóng, chúng tôi khuyên bạn nên sử dụng Needle Engine với một trong các tích hợp của chúng tôi. Chúng cung cấp quy trình tạo mạnh mẽ, bao gồm xem trước trực tiếp, hot reloading và pipeline build nâng cao với các tối ưu hóa 3D. :::

Bắt đầu nhanh

::: code-tabs @tab index.html @code html

@tab Kết quả

<iframe src="/docs/code-samples/basic-webcomponent.html" style="
    width: 100%;
    aspect-ratio: 16/9;
    outline: none;
    border: none;
    "
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking"
    allowfullscreen
    ></iframe>

:::Mở ví dụ này trên Stackblitz

Cài đặt từ npm

Bạn có thể làm việc trực tiếp với Needle Engine mà không cần sử dụng bất kỳ Tích hợp nào. Needle Engine sử dụng three.js làm scene graph và thư viện render, vì vậy tất cả chức năng từ three.js cũng có sẵn trong Needle.

Bạn có thể cài đặt Needle Engine từ npm bằng cách chạy: npm i @needle-tools/engine

Cài đặt needle-engine từ một CDN

Mặc dù mẫu mặc định của chúng tôi sử dụng vite, Needle Engine cũng có thể được sử dụng trực tiếp với vanilla Javascript – mà không cần sử dụng bất kỳ bundler nào.

Bạn có thể thêm phiên bản hoàn chỉnh, được đóng gói sẵn của Needle Engine vào trang web của mình chỉ với một dòng code. Điều này bao gồm các core component, physics, particles, networking, XR, và nhiều hơn nữa. Hãy sử dụng cái này nếu bạn không chắc chắn!

<script type="module"
    src="https://cdn.jsdelivr.net/npm/@needle-tools/engine@4/dist/needle-engine.min.js">
</script>

Nhiều ví dụ có thể được tìm thấy trên StackBlitz.

Tạo mẫu nhanh trên StackBlitz

Để thử nghiệm nhanh, chúng tôi cung cấp một liên kết tiện lợi để tạo một dự án mới sẵn sàng bắt đầu: engine.needle.tools/new Một bộ sưu tập lớn các ví dụ cũng có sẵn trong Needle Engine Stackblitz Collection của chúng tôi.

Phát triển cục bộ với VS Code

Nếu bạn muốn làm việc với Needle Engine mà không có bất kỳ tích hợp nào, thì bạn sẽ muốn chạy một máy chủ cục bộ cho trang web của mình. Dưới đây là cách bạn có thể làm điều đó với Visual Studio Code:

  1. Mở thư mục chứa file HTML của bạn trong Visual Studio Code.

  2. Cài đặt extension LiveServer.

  3. Kích hoạt live-server (có nút "Go Live" ở chân trang của VSCode).

  4. Mở http://localhost:5500/index.html trong trình duyệt web của bạn, nếu nó không tự động mở.

three.js và Needle Engine

Vì Needle Engine sử dụng three.js làm scene graph và thư viện render, tất cả chức năng từ three.js cũng có sẵn trong Needle và có thể được sử dụng từ các component script. Chúng tôi đang sử dụng một fork của three.js bao gồm các tính năng và cải tiến bổ sung, đặc biệt liên quan đến WebXR, Animation và USDZ export.

::: tip Đảm bảo cập nhật đường dẫn <needle-engine src="myScene.glb"> đến một file glb hiện có hoặc tải xuống file glb mẫu này và đặt nó vào cùng thư mục với index.html, đặt tên là myScene.glb hoặc cập nhật đường dẫn src. :::

@code

Xem trên github

Trang được dịch tự động bằng AI

PreviousthreeNextunity

Last updated