Các thuộc tính của Web Component Needle Engine

Needle Engine có sẵn dưới dạng một web component: <needle-engine>. Web component này có thể được sử dụng để tải và hiển thị các cảnh 3D, mô hình, v.v. trong trình duyệt web. Nó đi kèm với một bộ thuộc tính cho phép bạn cấu hình hành vi, giao diện và cảm nhận của nó. Tất cả các cài đặt này có thể bị ghi đè bởi mã, nhưng các thuộc tính là một cách thuận tiện để thiết lập chúng trong HTML.

::: tip Web component nằm trong index.html Cho dù tạo một dự án thông qua Unity hoặc Blender, hoặc trực tiếp bằng mã, bạn đều có thể sử dụng và điều chỉnh web component <needle-engine>. Thông thường, bạn sẽ tìm thấy nó trong tệp index.html của dự án web của mình. :::

Bảng dưới đây hiển thị danh sách các thuộc tính có sẵn và mô tả của chúng.

Thuộc tính

Mô tả

Tải

src

Đường dẫn đến một hoặc nhiều tệp glTF hoặc glb. Các loại được hỗ trợ là string, string[] hoặc một mảng dạng chuỗi (phân tách bằng ,)

dracoDecoderPath

URL đến draco decoder ví dụ: ./include/draco/ để sử dụng Draco decoder cục bộ

dracoDecoderType

Loại draco decoder. Các tùy chọn là wasm hoặc js. Xem three.js documentation

ktx2DecoderPath

URL đến KTX2 decoder ví dụ: ./include/ktx2/ để sử dụng KTX2 decoder cục bộ

Kết xuất

background-color

tùy chọn, mã màu hex được sử dụng làm màu nền. Ví dụ: rgb(255, 200, 100), #dddd00

background-image

tùy chọn, URL đến hình ảnh skybox (hình ảnh nền) hoặc một chuỗi cài sẵn: studio, blurred-skybox, quicklook, quicklook-ar

background-blurriness

tùy chọn, giá trị làm mờ giữa 0 (không mờ) và 1 (mờ tối đa) cho background-image. Ví dụ: background-blurriness="0.5"

environment-image

tùy chọn, URL đến hình ảnh môi trường (ánh sáng môi trường) hoặc một chuỗi cài sẵn: studio, blurred-skybox, quicklook, quicklook-ar

contactshadows

tùy chọn, kết xuất contact shadows

tone-mapping

tùy chọn, các giá trị được hỗ trợ là none, linear, neutral, agx

tone-mapping-exposure

số tùy chọn, ví dụ tăng độ phơi sáng với tone-mapping-exposure="1.5", yêu cầu tone-mapping phải được đặt

Tương tác

autoplay

thêm hoặc đặt thành true để tự động phát hoạt ảnh, ví dụ: <needle-engine autoplay

camera-controls

thêm hoặc đặt thành true để tự động thêm OrbitControls nếu không tìm thấy điều khiển camera nào trong cảnh

auto-rotate

thêm để bật tự động xoay (chỉ sử dụng với camera-controls)

Sự kiện

loadstart

Tên của hàm cần gọi khi bắt đầu tải. Lưu ý rằng các đối số là (ctx:Context, evt:Event). Bạn có thể gọi evt.preventDefault() để ẩn lớp phủ tải mặc định

progress

Tên của hàm cần gọi khi quá trình tải cập nhật. onProgress(ctx:Context, evt: {detail: {context:Context, name:string, index:number, count:number, totalProgress01:number}) { ... }

loadfinished

Tên của hàm cần gọi khi quá trình tải kết thúc

Hiển thị Tải

Các tùy chọn có sẵn để thay đổi giao diện hiển thị tải của Needle Engine. Sử dụng ?debugloadingrendering để chỉnh sửa dễ dàng hơn

loading-background

PRO — Mặc định: transparent. Thay đổi màu nền khi tải (ví dụ: #dd5500)

loading-logo-src

PRO — Thay đổi hình ảnh logo khi tải (ví dụ: https://yourdomain.com/logo.png hoặc /logo.png)

hide-loading-overlay

PRO — Không hiển thị lớp phủ tải

Nội bộ

hash

Được sử dụng nội bộ, được thêm vào các tệp đang tải để buộc cập nhật (ví dụ: khi trình duyệt đã lưu trữ tệp glb). Không nên chỉnh sửa thủ công.

Thông báo nâng cấp:

Các thuộc tính đã xóa trong Needle Engine 4.5.0 loading-style, loading-background-color, loading-text-color, primary-color, secondary-color

Ví dụ

<!-- Đặt đường dẫn đến tệp glb tùy chỉnh cần tải -->
<needle-engine src="path/to/your.glb"></needle-engine>

<!-- Ghi đè vị trí của draco decoder -->
<needle-engine src="path/to/your.glb" dracoDecoderPath="./include/draco/"></needle-engine>

Đặt hình ảnh môi trường, phát hoạt ảnh và điều khiển camera tự động. Xem trực tiếp trên stackblitz

<needle-engine
      camera-controls
      auto-rotate
      autoplay
      skybox-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
      environment-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
      src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF-Embedded/DamagedHelmet.gltf"
      >
      </needle-engine>

Nhận một sự kiện khi ngữ cảnh needle-engine đã tải xong:

<needle-engine loadfinished="onLoadFinished"> </needle-engine>
<script>
    function onLoadFinished() {
        console.log("Needle Engine has finished loading");
    }
</script>

Kiểu Tải Tùy Chỉnh (PRO)

Bạn có thể dễ dàng sửa đổi giao diện của Needle Engine bằng cách đặt các thuộc tính thích hợp trên thành phần web <needle-engine>. Vui lòng xem bảng trên để biết chi tiết.

Xem mã trên github

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

Previousneedle.config.json Next@serializable và các decorator khác

Last updated 1 month ago