Adding mesh objects dynamically with Vue's reactive objects.

[EricTheRay]

I was looking into incorporating Three.js into my Vue (or possibly Nuxt) project, and then found TresJS. I like the idea of making canvas, scenes and meshes declarative, without having to initialize them with extra lines of code. However, I want to add objects (meshes) to the scene dynamically; that is to say, spawn objects and add them to the scene anytime needed. I tried maintaining a Vue reactive object, containing all objects I want to render in the canvas, and then have the TresMesh component iterate through it (v-for), but it didn't seem to work as I expected.

The code is as below:

<script setup lang="ts">
import * as THREE from 'three';
import { v4 as uuidv4 } from 'uuid';

definePageMeta({
  layout: "main"
});

const cameraParams = reactive({
  args: [75, 16/9, 0.1, 1000] as [number, number, number, number], 
  position: new THREE.Vector3(10, 0, 0)
});

const objectMap: Record<string, any> = reactive({});

const addSphere = function (): void {

  const id = "sphere--" + uuidv4();

  objectMap[id] = {
    id: id, 
    component: "TresMesh", 
    position: [0, 0, 0], 
    slots: [
      {
        component: "TresSphereGeometry", 
        props: { args: [1] }
      }, 
      {
        component: "TresMeshBasicMaterial", 
        props: { color: 0x0000ff }
      }
    ], 
    ref: null
  };

  return;
};

const deleteObject = function (object: any): void {

  delete objectMap[object.id];

  return;
};
</script>

<template>
  <div>
    <h1>This is a TresJS canvas.</h1>

    <template v-for="(object, id) in objectMap">
      <div>
        <span>"{{ object.ref?.uuid }}": {{ object.ref?.position }}</span>
        <button type="button" @click="() => object.position[1] += 2"><span>raise</span></button>
        <button type="button" @click="() => object.position[1] -= 2"><span>drop</span></button>
        <button type="button" @click="deleteObject(object)"><span>delete</span></button>
      </div>
    </template>
    
    <button type="button" @click="addSphere">add a sphere</button>

    <div id="canvas-container">
      <TresCanvas clear-color="black">
        <TresPerspectiveCamera v-bind="cameraParams" />
        <OrbitControls />
        <TresGridHelper />

        <template v-for="(object, id) in objectMap" :key="id">
          <TransformControls 
            :object="object.ref" 
            mode="translate" 
            axis="XZ" 
            :showX="true" 
            :showY="false" 
            :showZ="true" 
          />
          <component 
            :is="object.component" 
            :ref="(el: THREE.Mesh) => { object.ref = el; }" 
            :position="object.position"
          >
            <component v-for="slot in object.slots" :is="slot.component" v-bind="slot.props" />
          </component>
        </template>
      </TresCanvas>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#canvas-container {
  width: 800px;
  height: 450px;
}
</style>

To be specific, when I delete an object from the said reactive object, the related mesh does not leave the canvas. Also, if I alter object.position, the mesh does not move accordingly.

I really like the simplicity brought by TresJS, and would like to use it in my project. Please let me know if what I want to achieve can be done by the above method, or if it can only be done the regular Three.js way. Thank you all.