Needle Engine como Web Component

O Needle Engine fornece 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>
    <meta charset="utf-8">
    <title>Needle Engine Web Component Example</title>
    <style> body { margin:0; padding:0; } </style>
    <!-- Import the needle-engine script -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/engine@next/dist/needle-engine.min.js"> </script>
  </head>

  <body>
    <!-- Use the <needle-engine> web component -->
    <needle-engine 
      src="https://cloud.needle.tools/-/assets/Z23hmXBZ21QnG-Z21QnG-world/file"
      background-image="https://cdn.needle.tools/static/hdris/cannon_2k.pmrem.ktx2"
      environment-image="https://cdn.needle.tools/static/hdris/cannon_2k.pmrem.ktx2"
      background-blurriness="0.4"
      environment-intensity="2"
      contact-shadows=".7"
      auto-rotate
      autoplay
      >
    </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@4/dist/needle-engine.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>
    <!-- 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;
            background-color: rgba(200, 250, 200);
        }

        needle-engine {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>

</head>

<body>

    <!-- load a gltf or glb here as your scene -->
    <needle-engine src="https://cloud.needle.tools/-/assets/Z23hmXB27L6Db-world/file" camera-controls
        background-color="transparent" environment-image="studio"></needle-engine>

</body>

<script type="module">
    import { onStart } from 'https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js';
    onStart((context) => {
        console.log('Hello Needle');
    });
</script>

</html>

Ver no github

Página traduzida automaticamente usando IA