https://github.com/Plumie/Norska

Three.js plugin for Alpine 🏔️
https://github.com/Plumie/Norska

alpine threejs typescript

Last synced: 2 months ago
JSON representation

Three.js plugin for Alpine 🏔️

• Host: GitHub
• URL: https://github.com/Plumie/Norska
• Owner: Plumie
• Created: 2022-11-25T22:28:44.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-10T20:22:54.000Z (8 months ago)
• Last Synced: 2024-07-08T17:39:53.678Z (6 months ago)
• Topics: alpine, threejs, typescript
• Language: TypeScript
• Homepage: https://docs.plume.moe/norska
• Size: 4.05 MB
• Stars: 26
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome - Norska - Create interactive Three.js scenes directly with Alpine

README

        
# Norska ⛰️

_Three.js plugin for Alpine_

Check out the full documentation here: https://docs.plume.moe/norska

Live Demo: https://norska.plume.moe

# Installation

_How to install Norska with AlpineJS_

Run the following command to install Norska and its dependencies.

```bash

npm install @norska/core alpinejs three

```

Import Norska and initialize it as an Alpine plugin.

**Please note that Norska must be registered as a plugin before Alpine is initialized**

```typescript

import norska from '@norska/core';

// Initialize Norksa

const Norska = norska({

  /* options... */

});

// Register Norska as an Alpine plugin

Alpine.plugin(Norska);

window.Alpine = Alpine;

Alpine.start();

```

# Quick Start

_How to use Norska_

## Initializing a canvas

```html



```


To create a ThreeJS scene in our document, we need to initialize a Canvas, for this it is possible to use `x-3.canvas` which will create a basic scene, a camera, and a renderer with each of the default parameters that can be adjusted.

By default, the canvas element size is determined by the directive's parent's size.

## Populating our scene

There are many ways to fill your scene, but we'll keep it simple for now.

Let's start with a cube.

**The hierarchy of the scene is the same as that of the HTML blocks in the canvas. A good way to do this is to use `
` for elements with children, and void elements like `
` for the rest.**


We declare a mesh with `x-3.mesh`, then we can attach a geometry and a material with the corresponding directives.

```html



    


        


            


            


        

    



```