+ 
+ 
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.
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-group ::: code-group-item index.html
<!DOCTYPE html>
<html>
<head>
<!-- Optional import map if you want to add additional JS modules and let's use use `import { Behaviour } from "@needle-tools/engine"` -->
<script type="importmap">
{
"imports": {
"@needle-tools/engine": "https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"
}
}
</script>
<!-- Import the Needle Engine module -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js">
</script>
</head>
<body style="margin:0; padding:0;">
<!--
Add the <needle-engine> HTML component to your page, and specify a source file.
This .glb file contains interactions, sounds, a skybox, and animations,
because it was exported from our Unity integration.
-->
<needle-engine src="https://cloud.needle.tools/-/assets/ZUBcksQ0gIz-Q0gIz/file" background-blurriness="0.8"></needle-engine>
</body>
</html>::: ::: code-group-item Kết quả
::: :::: [Mở ví dụ này trên Stackblitz](https://stackblitz.com/edit/needle-engine-prebundled?file=index.html)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/dist/needle-engine.min.js">
</script>Nếu bạn biết dự án của mình không yêu cầu các tính năng vật lý (physics), bạn cũng có thể sử dụng phiên bản nhỏ hơn của Needle Engine, không có physics engine. Điều này sẽ làm giảm tổng kích thước tải về.
<script type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.light.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:
- Mở thư mục chứa file HTML của bạn trong Visual Studio Code.
- Cài đặt extension LiveServer.
- Kích hoạt live-server (có nút "Go Live" ở chân trang của VSCode).
- Mở
http://localhost:5500/index.htmltrong 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.
Tips
Đả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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Made with Needle</title>
<!-- importmap -->
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
"three/": "https://cdn.jsdelivr.net/npm/three",
}
}
</script>
<!-- parcel require must currently defined somewhere for peerjs -->
<script> var parcelRequire; </script>
<!-- the .light version does not include dependencies like Rapier.js (so no physics) to reduce the bundle size, if your project needs physics then just change it to needle-engine.min.js -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"></script>
<style>
body { margin: 0; }
needle-engine {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: grey;
}
</style>
</head>
<body>
<!-- load a gltf or glb here as your scene and listen to the finished event to start interacting with it -->
<needle-engine src="myScene.glb" loadfinished="onLoaded"></needle-engine>
</body>
<script>
function onLoaded(ctx) {
console.log("Loading a glb file finished 😎");
console.log("This is the scene: ", ctx.scene);
}
</script>
</html>Trang được dịch tự động bằng AI