Canvas插入vue3组件(ref方式)【选修】

这节课给大家演示通过Vue3 ref方式把threejs的canvas画布嵌入到某个vue组件中。

本节课属于扩展选修内容，如果你暂时用不到，跳过也行。

Vue3 ref方式获取div元素

在原生HTML中，咱们一般可能会通过DOM节点的id、name之类获取HTML元素。

vue2、vue3都提供了ref的功能，来获取某个vue组件中的元素，下面说下vue3通过ref标记获取HTML元素方式

<!-- HelloWorld.vue组件 -->
<script setup>
import { ref } from 'vue'
const webgl = ref(null);
</script>
<template>
  <div ref="webgl"><!-- 想在这里插入threejs canvas画布 --></div>
</template>

获取canvas画布插入vue组件

twin.js中threejs代码可以export一个webgl渲染器对象，方便在其它文件获取canvas画布。

import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30,width/height,1,3000);
// WebGL渲染器
const renderer = new THREE.WebGLRenderer();
...
// 原来canvas直接插入body代码删除
// document.body.appendChild(renderer.domElement);
export default renderer;

<script setup>
import { ref } from 'vue'
import { onMounted } from 'vue'

import renderer from './twin.js';//获取到threejswebgl的渲染器对象
const webgl = ref(null);
onMounted(() => {
  //webgl.value：表示ref值为webgl的div元素
  webgl.value.appendChild(renderer.domElement);
});
</script>

<template>
  <div ref="webgl"></div>
</template>