When working with Vue using the Options API, here is a code snippet I have:
<script lang="ts">
import * as THREE from 'three';
export default {
mounted() {
console.assert(this.$refs.container instanceof HTMLCanvasElement, this.$refs.container);
const renderer = new THREE.WebGLRenderer({
canvas: this.$refs.container as HTMLCanvasElement,
antialias: true,
alpha: true
});
}
};
</script>
<template>
<canvas ref="container" id="earthCanvas"></canvas>
</template>
Transitioning to the Composition API poses a challenge. The call to "this" no longer works correctly, as it's now considered "possibly undefined". To resolve this issue, I opted for using 'ref' and 'container.value' instead:
<script lang="ts">
import * as THREE from 'three';
import { onMounted, ref } from 'vue';
let container = ref(null)
onMounted(() => {
console.assert(container.value instanceof HTMLCanvasElement, container.value);
const renderer = new THREE.WebGLRenderer({
canvas: container.value as HTMLCanvasElement,
antialias: true,
alpha: true
});
});
</script>
<template>
<canvas ref="container" id="earthCanvas"></canvas>
</template>
However, Vue throws an error with the implementation: Calling 'container.value' results in: "The left-hand side of an 'instanceof' expression must be of type 'any', an object type or a type parameter".
I'm still learning, so your guidance on how to appropriately convert a ref to the element would be greatly appreciated. Apologies for the basic question...
Even chatGPT couldn't help me pinpoint what I might be missing. Using its suggestions lead to more errors... https://i.sstatic.net/65N6M.png