How to assign three.js to display content?

Question

Canvas

In all three.js examples, the canvas block is inserted programmatically, something like this:

var figure = document.getElementById ('....');   // блочный элемент, куда вставляю рендер
figure.appendChild( renderer.domElement );

But this is not good for me, because. Vue is used, and operating on the DOM that bypasses Vue leads to all kinds of trouble.

I want to write directly in HTML and somehow assign this canvas for three.js render output <canvas id="threejs_here"> </canvas>

Answer 1

I want to write directly in HTML and somehow assign this canvas for three.js render output<canvas id="threejs_here"> </canvas>

No problems. Set your canvas to ref: And specify it when creating the renderer:
<canvas ref="threejs"></canvas>

new THREE.WebGLRenderer({
  canvas: this.$refs.threejs,
})

Somehow so .