Next 3D

The 3D tools helps you create the best web 3D app.

English | Português | 简体中文 | Українською | Spanish | 日本語

✨ Features

• 📦 A set of high-quality webgpu components out of the box.
• 🛡 Written in TypeScript with predictable static types.
• ⚙️ Whole package of design resources and development tools.
• 📖 Extensive documentation and demos

🖥 Environment Support

• Modern browsers
• Server-side Rendering
• Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

⭐ Support the project

If you feel awesome and want to support us in a small way, please consider starring and sharing the repo! This helps us getting known and grow the community. 🙏

🔨 Documentation

Visit https://s3d.org/docs to view the full documentation.

📦 Quick Start

1. Installation: Inside your project directory, install Next3D by running either of the following:

yarn add next3d
# or
npm i next3d

2. Here is a quick react example to get you started, it's all you need:

import { createBox, createSphere, vec4, createEngine, createScene, createPerspectiveCamera, createPointLight,createGround,scale, translate } from "next3d";
import React,{ useEffect } from 'react';
import ReactDOM from 'react-dom';

function App() {
  useEffect(() => {
    (async () => {
      const canvas = document.getElementById(
        "webgpu-canvas"
      ) as HTMLCanvasElement;

      if (!canvas) {
        console.error("canvas is not exist.");
      }

      const engine = createEngine(canvas);
      const scene = createScene(engine);

      const camera = createPerspectiveCamera(
        "c1",
        { target: vec4(0, 0, 1), position: vec4(0, 0, -1), up: vec4(0, 1, 0) },
        scene
      );


      const box = createBox("b", scene, {
        width: 2, height: 2, depth: 2
      });


      const light = createPointLight(
        "light1",
        { color: vec4(0, 0.4, 0), position: vec4(-1, -1, -1), intensity: 10, radius: 10 },
        scene
      );

      await engine.loop(() => {
        box.transform = translate(-0.02, 0, 0).mul(box.transform)
        scene.render();
      });
    })();
  }, []);

  return <canvas
          id="webgpu-canvas"
          width="512"
          height="512
        ."
        ></canvas>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

🤝 Contribution

Please make sure to read the Contributing Guide before making a pull request and commit with Commit Guide.

❤️ Sponsors

Thank you to all the people who already contributed to us!

🔗 License

MIT