Lines and other components not explicitly defined in the repo

[saumyasinghal747]

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!

[fritx]

@saumyasinghal747 hi, here are some approaches:

1. like https://github.com/fritx/vue-threejs/blob/dev/src/components/Light.vue#L17

<script>
import * as THREE from 'three'
import { Object3D } from 'vue-threejs'
export default {
  name: 'LineOrWhatever',
  mixins: [Object3D],
  props: {
    // ...
  },
  data () {
    let curObj = this.obj
    if (!curObj) {
      curObj = new THREE.Line({/* ... */})
      // curObj = new THREE.WhateverXXX({/* ... */})
    }
    curObj.name = curObj.name || curObj.type
    return { curObj }
  }
}
</script>

2. like https://github.com/fritx/vue-threejs/blob/dev/examples/Ocean.vue#L3

<mesh name="Ocean" @update:obj="handleMesh">
  <geometry type="Plane" :args="[10000, 10000, 40, 40]"></geometry>
  <material type="MeshBasic" :color="0x0044ff">
  <texture :options="txtOpts"></texture>
  </material>
</mesh>

<script>
// ...
handleMesh(mesh) {
  if (!mesh) return
  // do something on the mesh...
  let g = mesh.geometry
  g.rotateX(-Math.PI / 2)
  for (let i = 0, l = g.vertices.length; i < l; i++) {
    g.vertices[ i ].y = 10 * Math.sin(i / 2)
  }
  this.geom = g
}
</script>

[fritx]

@saumyasinghal747 sorry for the very, very late response T_T