https://github.com/mablay/three-perspective

Use ThreeJS in Vue3 with minimal boilerplate
https://github.com/mablay/three-perspective

Last synced: 8 days ago
JSON representation

Use ThreeJS in Vue3 with minimal boilerplate

• Host: GitHub
• URL: https://github.com/mablay/three-perspective
• Owner: mablay
• Created: 2024-05-30T18:20:15.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-11-02T18:19:57.000Z (14 days ago)
• Last Synced: 2024-11-02T19:21:14.672Z (14 days ago)
• Language: TypeScript
• Size: 124 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Three Perspective

![](https://github.com/mablay/three-perspective/blob/5a4a5b4d0506fd4f32aa9d3877bbaf7f2fe27b95/hero.jpg)

Use [ThreeJS](https://threejs.org) in [Vue3](https://vuejs.org) with minimal boilerplate.

## Features

* auto-resize canvas

* orbital controls

* optional css import for fullscreen view

* one-liner create helper functions

* easily create multiple perspectives to the same scene

## Setup

### As Vue3 Plugin

```ts

// main.ts

import { createApp } from 'vue'

import App from './App.vue'

import { ThreePerspectivePlugin } from 'three-perspective'

import 'three-perspective/style.css'

const app = createApp(App)

app.use(ThreePerspectivePlugin)

app.mount('#app')

```

### As Nuxt3 Plugin

```ts

// plugins/three-perspective.ts

import { ThreePerspectivePlugin } from 'three-perspective'

import 'three-perspective/style.css'

export default defineNuxtPlugin(nuxtApp => {

  nuxtApp.vueApp.use(ThreePerspectivePlugin)

})

```

## Vue Example

```vue

  

  

import * as THREE from 'three'

import { onMounted, ref } from 'vue'

import { ThreePerspective, entities } from 'three-perspective'

import 'three-perspective/fullscreen.css' // optional

const perspective = ref<InstanceType<typeof ThreePerspective>>()

const scene = new THREE.Scene()

const light = new THREE.HemisphereLight('skyblue', 'brown')

const box = entities.createBox([0, 0, 0], [1, 1, 0.2], [1, 0, 0])

scene.add(box, light)

onMounted(async () => {

  if (!perspective.value) throw new Error('Missing perspective!')

  const { renderer, orbit, camera, render } = perspective.value

  // here, you have access to the renderer if needed.

})

```