+ 
+ 
Needle Engine como Web Component
Needle Engine proporciona un web component fácil de usar que se puede utilizar para mostrar escenas 3D ricas e interactivas directamente en HTML con solo unas pocas líneas de código. Es el mismo web component que impulsa nuestras integraciones.
Una vez que superes las opciones de configuración del web component, puedes extenderlo con scripts y componentes personalizados, y acceso programático completo al grafo de escena.
¡Usa las integraciones!
Para escenas 3D complejas e iteración rápida, recomendamos usar Needle Engine con una de nuestras integraciones. Proporcionan un potente flujo de trabajo de creación, incluyendo una vista previa en vivo, hot reloading y un pipeline de construcción avanzado con optimizaciones 3D.
Inicio Rápido
:::: 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 Resultado
::: :::: [Abrir este ejemplo en Stackblitz](https://stackblitz.com/edit/needle-engine-prebundled?file=index.html)Instalar desde npm
Puedes trabajar directamente con Needle Engine sin usar ninguna Integración. Needle Engine usa three.js como grafo de escena y librería de renderizado, por lo que toda la funcionalidad de three.js también está disponible en Needle.
Puedes instalar Needle Engine desde npm ejecutando: npm i @needle-tools/engine
Instalar needle-engine desde un CDN
Aunque nuestra plantilla predeterminada usa vite, Needle Engine también se puede usar directamente con Javascript puro, sin usar ningún bundler.
Puedes añadir una versión completa y preempaquetada de Needle Engine a tu sitio web con solo una línea de código. Esto incluye nuestros componentes principales, física, partículas, redes, XR y más. ¡Usa esto si no estás seguro!
<script type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js">
</script>Si sabes que tu proyecto no requiere características de física, también puedes usar una versión más pequeña de Needle Engine, sin el motor de física. Esto reducirá el tamaño total descargado.
<script type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.light.min.js">
</script>Muchos ejemplos se pueden encontrar en StackBlitz.
Prototipado Rápido en StackBlitz
Para experimentos rápidos, proporcionamos un enlace conveniente para crear un nuevo proyecto listo para empezar: engine.needle.tools/new También hay disponible una gran colección de ejemplos en nuestra Needle Engine Stackblitz Collection
Desarrollo Local con VS Code
Si quieres trabajar con Needle Engine sin ninguna integración, entonces probablemente querrás ejecutar un servidor local para tu sitio web. Aquí te mostramos cómo puedes hacerlo con Visual Studio Code:
- Abre la carpeta con tu archivo HTML en Visual Studio Code.
- Instala la extensión LiveServer.
- Activa live-server (hay un botón "Go Live" en el pie de página de VSCode)
- Abre
http://localhost:5500/index.htmlen tu navegador web, si no se abre automáticamente.
three.js y Needle Engine
Como Needle Engine usa three.js como grafo de escena y librería de renderizado, toda la funcionalidad de three.js también está disponible en Needle y se puede usar desde scripts de componentes. Estamos usando un fork de three.js que incluye características y mejoras adicionales, especialmente en relación con WebXR, Animación y exportación USDZ.
Consejos
Asegúrate de actualizar la ruta <needle-engine src="myScene.glb"> a un archivo glb existente o descarga este archivo glb de ejemplo y ponlo en la misma carpeta que el index.html, nómbralo myScene.glb o actualiza la ruta 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>Página traducida automáticamente usando IA