Как назначить для вывода контента three.js?

Question

[Николай Чуприк]

Во всех примерах использования three.js блок canvas вставляется программно, как-то так:

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

Но мне это не годится, т.к. используется Vue, и оперирование с DOM в обход Vue приводит ко всяким неприятностям.

Я хочу прямо в HTML написать <canvas id="threejs_here"> </canvas> и как-то назначить этот canvas для вывода рендера three.js

Answer 1

[0xD34F]

Я хочу прямо в HTML написать <canvas id="threejs_here"> </canvas> и как-то назначить этот canvas для вывода рендера three.js

Нет проблем. Ставите своему canvas'у ref:

<canvas ref="threejs"></canvas>

И указываете его при создании рендерера:

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

Как-то так.

Comments

[Николай Чуприк]

Спасибо.