HTML内に配置したcanvasにThree.jsの設定を行う

Three.jsを使用する際、canvasを自動生成するのではなく、あらかじめHTMLに用意したcanvasタグを使ってThree.jsの描画を行う設定をメモ。

サンプルコード

HTMLにcanvasタグを用意します。

<div class="wrap">
  <canvas id="canvas"></canvas>
</div>

WebGLRenderer()のパラメータで、対象にするcanvasを設定できます。

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// レンダラーの作成
const canvas = document.getElementById("canvas");
const renderer = new THREE.WebGLRenderer({
  canvas: canvas
});
renderer.setSize(window.innerWidth, window.innerHeight);

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);
// カメラの位置変更と更新
camera.position.set(0, 0, 10);
controls.update();

// オブジェクトの作成
const geometry = new THREE.BoxGeometry(5, 5, 5);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
})
const object = new THREE.Mesh(geometry, material);
scene.add(object);

function animate() {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

これでcanvasタグに対して設定ができました。
canvasタグにThree.jsを設定するデモページ