Needle Engine como Web Component

O Needle Engine oferece um web component fácil de usar que pode ser utilizado para exibir cenas 3D ricas e interativas diretamente em HTML com apenas algumas linhas de código. É o mesmo web component que suporta as nossas integrações.

Assim que ultrapassar as opções de configuração do web component, pode estendê-lo com scripts e componentes personalizados, e acesso programático completo ao grafo de cena.

Use as integrações!

Para cenas 3D complexas e iteração rápida, recomendamos usar o Needle Engine com uma das nossas integrações. Elas fornecem um fluxo de trabalho de criação poderoso, incluindo pré-visualização ao vivo, hot reloading e um pipeline de construção avançado com otimizações 3D.

Início Rápido

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>

Resultado

<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>

Abrir este exemplo no Stackblitz

Instalar do npm

Pode trabalhar diretamente com o Needle Engine sem usar qualquer Integração. O Needle Engine usa three.js como grafo de cena e biblioteca de renderização, portanto, toda a funcionalidade do three.js também está disponível no Needle.

Pode instalar o Needle Engine do npm executando:
npm i @needle-tools/engine

Instalar needle-engine de um CDN

Embora o nosso modelo padrão use vite, o Needle Engine também pode ser usado diretamente com Javascript vanilla – sem usar qualquer bundler.

Pode adicionar uma versão completa e pré-empacotada do Needle Engine ao seu website com apenas uma linha de código. Isto inclui os nossos componentes principais, física, partículas, networking, XR, e mais. Use isto se não tiver a certeza!

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

Se sabe que o seu projeto não requer funcionalidades de física, também pode usar uma versão menor do Needle Engine, sem o motor de física. Isto reduzirá o tamanho total do download.

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

Muitos exemplos podem ser encontrados no StackBlitz.

Prototipagem Rápida no StackBlitz

Para experiências rápidas, fornecemos um link conveniente para criar um novo projeto pronto para começar: engine.needle.tools/new Uma grande coleção de exemplos também está disponível na nossa Coleção Stackblitz do Needle Engine

Desenvolvimento Local com VS Code

Se quer trabalhar com o Needle Engine sem qualquer integração, então provavelmente vai querer executar um servidor local para o seu website. Veja como pode fazer isso com o Visual Studio Code:

Abra a pasta com o seu ficheiro HTML no Visual Studio Code.
Instale a extensão LiveServer.
Ative o live-server (há um botão "Go Live" no rodapé do VSCode).
Abra http://localhost:5500/index.html no seu navegador web, se não abrir automaticamente.

three.js e Needle Engine

Como o Needle Engine usa three.js como grafo de cena e biblioteca de renderização, toda a funcionalidade do three.js também está disponível no Needle e pode ser usada a partir de scripts de componentes. Estamos a usar um fork do three.js que inclui funcionalidades e melhorias adicionais, especialmente em relação a WebXR, Animação e exportação USDZ.

Tips

Certifique-se de atualizar o caminho <needle-engine src="myScene.glb"> para um ficheiro glb existente ou descarregue este glb de exemplo e coloque-o na mesma pasta que o index.html, chame-o myScene.glb ou atualize o caminho 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>

Ver no github

Página traduzida automaticamente usando IA