fritx/vue-threejs

Vue bindings for Three.js

vue-threejs

[WIP] Three.js bindings for Vue

Migrated from react-threejs

Demos: react-world, vue-world

// import VueThreejs from 'vue-threejs' // below 0.2.0
import * as VueThreejs from 'vue-threejs' // >= 0.2.0

Vue.use(VueThreejs)

<template>
  <renderer :size="{ w: 600, h: 400 }">
    <scene>
      <camera :position="{ z: 15 }"></camera>
      <mesh :obj="mesh" :position="{ y: -200 }"></mesh>
      <animation :fn="animate" :speed="3"></animation>
    </scene>
  </renderer>
</template>

Physics

<movement-system>
  <mass-object :rv0="{ x: 2, y: 2 }" :v0="{ x: 10 }"
      :f="{ x: -3, y: -2 }" :m="1">
    <cube texture="cobblestone" :size="1"></cube>
  </mass-object>
  <mass-object :rv0="{ x: 2, z: 2 }" :v0="{ z: 20 }"
      :f="{ y: -1, z: -8 }" :m="1.2">
    <cube texture="diamond" :size="1.2"></cube>
  </mass-object>
</movement-system>

<oimo-world :options="{ gravity: [0, -9.8, 0] }">
  <space-system :m-scale="10 ** 4">
    <space-object v-for="t in textures" :key="t">
      <oimo-body :options="{ move: true, density: 1 }">
        <cube :texture="t" :size="1"></cube>
      </oimo-body>
    </space-object>
  </space-system>
</oimo-world>

Roadmap

• Basic components
  • renderer/scene/camera/listener
  • object3d/light/audio/controls/animation
  • mesh/geometry/material/texture/obj-mtl
• Watch for props change
  • position/rotation/obj
  • more
• Animation
  • component/animate/speed/paused/blocked
  • global-control
• Physical engine
  • movement(a/v/pos/ra/rv/rot)/mass(m/F)
  • gravity(G/r)/collision/oimo
  • circular-motion/centripetal-force
• Unit test
  • karma/mocha/phantom
  • avoriaz/ava

Study Notes

• VueJS extend component: remove parent's property
• Vue2 migration commits of vue-threejs
  • cannot use <slot> as root element
  • lifecycle ready => mounted
  • template or render function not defined
  • avoid mutating a prop directly
  • this.$dispatch is not a function
• v-ref is not working with element
• Can I use a compoent inherit other compoent?

vue-threejs's Issues

ReferenceError: window is not defined

ReferenceError
window is not defined

All I did was import the library:

<script>
import VueThreejs from 'vue-threejs';
export default {};
</script>

Refresh the page, get that error.
Stack trace is crashing on window.webkitRequestAnimationFrame...:

};

function requestAnimationFrame(callback) {
  setTimeout(callback, 1000 / 60);
}
var requestAnimationFrame$1 = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || requestAnimationFrame;

var CenteredDiv = function () {
  function CenteredDiv() {
    classCallCheck(this, CenteredDiv);
    this.backgroundElement = document.createElement('div');
     

Maybe this library has issues working with nuxt.js?
https://stackoverflow.com/questions/40707481/window-is-not-defined-in-vue-js-2

Uncaught TypeError: Cannot read property 'setCrossOrigin' of undefined

Hi,

I get this error when i try to load a model with :
<m-obj-mtl :obj-url="selectedCharacter.model" :mtl-url="selectedCharacter.material" :process="getBody" >
It works without the mtl-url but not with it.

Here the error stack :

VueThreejs.common.js?1057:4210 Uncaught TypeError: Cannot read property 'setCrossOrigin' of undefined at module.exports.6084.MTLLoader.MaterialCreator.loadTexture (VueThreejs.common.js?1057:4210) at module.exports.6084.MTLLoader.MaterialCreator.createMaterial_ (VueThreejs.common.js?1057:4156) at module.exports.6084.MTLLoader.MaterialCreator.create (VueThreejs.common.js?1057:4125) at module.exports.6084.MTLLoader.MaterialCreator.preload (VueThreejs.common.js?1057:4106) at eval (VueThreejs.common.js?1057:2726) at Object.eval [as onLoad] (VueThreejs.common.js?1057:3953) at XMLHttpRequest.eval (three.module.js?5a89:36662)

Cannot read property install of undefined

vue.runtime.esm.js?2b0e:4998 Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:4998)
    at createApp (app.js?1112:7)
    at eval (entry-client.js?a949:3)
    at Module../src/entry-client.js (main.js:2806)
    at __webpack_require__ (main.js:724)
    at fn (main.js:101)
    at Object.0 (main.js:2951)
    at __webpack_require__ (main.js:724)
    at main.js:791
    at main.js:794

VERSION:
"vue": "^2.5.22",
"vue-router": "^3.0.2",
"vue-server-renderer": "^2.6.3",
"vue-threejs": "^0.2.0-alpha.1"

Followed the documentation,

  Vue.use(VueThreejs)

  const router = createRouter()

  const app = new Vue({
    router,
    render: h => h(App)
  })

It does not work

use three.js on android webview

Can't resolve 'oimo' in 'C:\Users\admin\Desktop\3d\3d\node_modules\vue-threejs\lib'

How to use OBJLoader?

I can't seem to use the loader. See this SO post

Where do i find a tutorial using this lib?

Is vue-threejs still actively maintained.

This is potentially a very interesting project. Is the repo still maintained, and, if so, is there a roadmap for the future?

Thanks.

Lines and other components not explicitly defined in the repo

I'm trying to create some lines according to this tutorial https://threejs.org/docs/index.html#manual/en/introduction/Drawing-lines, could I have help translating this into your module?

To be specific, I'm not sure how to create the Line or the Vector3D object.

Thank you!

Documentation

Hi,
The port to vue seems really promising and nice to use, but i'm afraid that i don't know how to use it at all. A few examples would be really appreciated, like using the camera, mesh or animation that are in the example. How would i use orbital-controls here?

Thanks in advance and thank you for your great work so far with this project

非常棒的项目 但是能否添加一些更加详细的文档

非常喜欢这个项目 我从v-
three-module看到了这里，它是一个很完美的模型展示插件，能够非常简单的在vue页面中构建并显示一个模型，但是，你这个是一个自由度更高的，更棒的插件，希望能够保持更新，我很愿意在项目中使用并向朋友推荐这个插件！！对于一个设计师而言，我缺乏一些文档，虽然我能够基本的使用它，但我希望能够用到的更多，非常感谢 ：D

<animate> this.fn is not function

When attempting to use the component I get the error "this.fn is not function".

Sorry I don't have much more I'm pretty new to all this and I'm trying to troubleshoot, not sure where to go with it. Any help would be awesome!

orbit-controls can not pan and zoom

I use orbit and camera like sample:

      <orbit-controls :position="{x: 2, y: 2, z: 8}"
          :rotation="{ x: 2, y: 0, z: 3 }">
        <camera></camera>
      </orbit-controls>

I got warning like this when I try to pan or zoom

WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.

update error

[Vue warn]: Duplicate keys detected: '1'. This may cause an update error.

found in

---> <SF03>...and path of templates here

Working with lights

Hi. Thank you for this awesome library. I have a question. How can I add additional lights? I want to implement three.js example

p.s. can i somehow get current scene?

LICENSE

I would like to incorporate this code into my own MIT licenced project.

Is this code (or any part) available under an open source license? Can you create a LICENSE file?

Unsafe module - 643 vulnetabilities - 1 high

Can you review security of your module? Unsafe module - 643 vulnetabilities

$ npm i vue-threejs

found 643 vulnerabilities (632 low, 10 moderate, 1 high) in 1462 scanned packages
  run `npm audit fix` to fix 637 of them.
  3 vulnerabilities require semver-major dependency updates.
  3 vulnerabilities require manual review. See the full report for details.

Property or method "mesh" is not defined

Apologies if this is low level question but I have a Vue project and I would like to implement your module to use ThreeJS inside. What I have done

1. I placed to my main.js

import * as VueThreejs from 'vue-threejs' // >= 0.2.0
Vue.use(VueThreejs)

2. I've created Test.vue

<template>
  <renderer :size="{ w: 600, h: 400 }">
    <scene>
      <camera :position="{ z: 15 }"></camera>
      <mesh :obj="mesh" :position="{ y: -200 }"></mesh>
      <animation :fn="animate" :speed="3"></animation>
    </scene>
  </renderer>
</template>

<script>


  export default {
    data() {
      return {
        test: "test from data"
      }
    },
    methods: {},
    components: {}
  }
</script>

<style scoped>
</style>

In chrome console I have errors:

[Vue warn]: Property or method "mesh" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. S

and infinite times iterations error:

VueThreejs.common.js:5259 Uncaught TypeError: this.fn is not a function
    at VueComponent.begin

To be honest I have no idea how to use your module. Can you advice what is missing?

About vm.curObj observing optimization

Search Results: curObj
https://github.com/fritx/vue-threejs/search?q=curObj&unscoped_q=curObj

Related Vue Topic: [feature] Ability to disable Vue observation
vuejs/vue#2637

Solution Draft:
vuejs/vue#2637 (comment)

data () {
  return {
    wrapper: Object.freeze({
      actual: [bigData]
    })
  }
},
methods: {
  operation () {
    this.wrapper = Object.freeze({
      actual: [newBigData]
    })
  }
}

question: how to load model with model file content

Hi, thank you for this awesome tool.
I'm currently working with model display in electron application.

Workflow

1. select a ifc file
2. convert it into obj format using ifc-convert
3. display the obj format model in vue-threejs

Question

In electron application, I can get obj file path and the file content (it seems they can be read with fs module only). However, the object3d component requires a base-url property like this

<object3d :position="pos" :base-url="model.path">
  <mesh>
    <m-obj-mtl :obj-url="model.obj"
        :mtl-url="model.mtl">
    </m-obj-mtl>
  </mesh>
</object3d >

model object looks like this

{
  path: "C:\\Users\\username\\AppData\\Local\\Temp\\tmp-72DoMe5urEZtqO",
  obj: "c504f943-9332-43bf-ba4d-1d74bedaea92.obj",
  mtl: "c504f943-9332-43bf-ba4d-1d74bedaea92.mtl"
}

Is there a way to pass the obj and mtl file content into three.js? XMLHttpRequest request can not read file content.

Is npm version out of date?

Hi,
we are looking at the Roadmap reported in the README file of this repository and it seems that the "mesh/geometry/material/texture/obj-mtl" basic component is already implemented.
However, looking at the version present on npm https://www.npmjs.com/package/vue-threejs it seems that it is not.
Which is the truth? XD

We tried to use meshs in our project but it seems not to work: maybe you forgot to upload the new version on npm repository?

Thank you in advance for your reply.