https://github.com/nestarz/vue-trois

Vue + Three + Cannon
https://github.com/nestarz/vue-trois

cannonjs react-three-fiber threejs vue

Last synced: 19 days ago
JSON representation

Vue + Three + Cannon

• Host: GitHub
• URL: https://github.com/nestarz/vue-trois
• Owner: nestarz
• License: mit
• Created: 2020-04-21T05:10:43.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-10-16T15:59:30.000Z (over 3 years ago)
• Last Synced: 2024-11-22T00:51:37.265Z (3 months ago)
• Topics: cannonjs, react-three-fiber, threejs, vue
• Language: JavaScript
• Homepage: https://nestarz.github.io/vue-trois/
• Size: 1.49 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Trois

- [x] vue-three-fiber

- [x] vue-cannon

- [x] cannon-worker

- [x] game

## Usage Example

Define a component

```js

import { h, watch, shallowRef } from "vue";

import * as THREE from "three";

import Object3D from "vue-three-fiber/components/Object3D.js";

import { useLoader } from "vue-three-fiber/hooks/useLoader.js";

import { useSphere, useBox, usePlane } from "vue-cannon/hooks/useCannon.js";

const Ball = {

  setup() {

    const ball = shallowRef();

    useSphere(() => ({ mass: 1, position: [0, 5, 0] }), ball);

    const { results: map } = useLoader(THREE.TextureLoader, earthImg);

    watch(map, () => {

      if (ball.value.material.map) ball.value.material.map.dispose();

      ball.value.material.map = map.value;

      ball.value.material.needsUpdate = true;

    });

    return () =>

      h(Object3D, {

        objectRef: ball,

        value: new THREE.Mesh(

          new THREE.SphereBufferGeometry(0.5, 64, 64),

          new THREE.MeshStandardMaterial()

        ),

      });

  },

};

```

Wrap it in a scene

```html



  

    

      

    

  



import { createApp } from "vue";

import * as THREE from "three";

import Renderer from "vue-three-fiber/components/Renderer.js";

import Physics from "vue-cannon/components/Physics.js";

import Ball from "game/components/Ball.js";

const App = {

  components: { Physics, Renderer, Ball },

  setup() {

    return {

      renderer: {

        gl: { alpha: true },

      },

      physics: {

        tolerance: 0.001,

        iterations: 5,

        axisIndex: 0,

        defaultContactMaterial: {

          contactEquationStiffness: 1e6,

          contactEquationRelaxation: 5,

          contactEquationRegularizationTime: 3,

        },

      },

      balls: [

        { position: new THREE.Vector3(-1, 5, 0) },

        { position: new THREE.Vector3(1, 5, 0) },

      ],

    };

  },

};

createApp(App).mount("#app");

```