実現したいこと
webglを描画するcanvasを背景にして、その上にpタグやdivタグで作った図形を設置したい。
前提
canvasにレンダリング?しているようなのでそのcanvasを、別に用意するテキストなどの下になるように重ねようと試みています。
発生している問題・エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <!-- three.jsのインポート --> 6 <script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script> 7 <script src="https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js"></script> 8 <script> 9 // ページの読み込みを待つ 10 window.addEventListener('DOMContentLoaded', init); 11 12 function init() { 13 // サイズを指定 14 const width = window.innerWidth; 15 const height = window.innerHeight; 16 17 // レンダラーを作成 18 const canvasElement = document.querySelector('#myCanvas'); 19 const renderer = new THREE.WebGLRenderer({ 20 canvas: canvasElement, 21 }); 22 // サイズを修正 23 canvasElement.width = width; 24 canvasElement.height = height; 25 renderer.setSize(width, height); 26 27 // シーンを作成 28 const scene = new THREE.Scene(); 29 30 // カメラを作成 31 const camera = new THREE.PerspectiveCamera(45, width / height); 32 // カメラの初期座標を設定 33 camera.position.set(0, 0, 1000); 34 35 // カメラコントローラーを作成 36 const controls = new THREE.OrbitControls(camera, canvasElement); 37 38 // 形状とマテリアルからメッシュを作成します 39 const mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300), new THREE.MeshNormalMaterial()); 40 scene.add(mesh); 41 42 tick(); 43 44 // 毎フレーム時に実行されるループイベントです 45 function tick() { 46 // レンダリング 47 renderer.render(scene, camera); 48 requestAnimationFrame(tick); 49 } 50 51 // myT canvasを取得 52 const board = document.querySelector("#myT"); 53 const ctx = board.getContext("2d"); 54 // サイズを修正 55 board.width = width; 56 board.height = height; 57 // 見やすくするため大きさと色を変更 58 ctx.font = "48px serif"; 59 ctx.fillStyle = "Red"; 60 // 文字を追加 61 ctx.fillText("Hello world", 500, 500); 62 } 63 </script> 64 <style> 65 #wrapper { 66 position: relative; 67 } 68 69 #myT { 70 position: absolute; 71 top: 0; 72 left: 0; 73 } 74 75 #myCanvas { 76 position: absolute; 77 top: 0; 78 left: 0; 79 } 80 </style> 81 <title>Document</title> 82</head> 83 84<body> 85 <!-- テキストとwebglを重ねて表示したい! --> 86 <div id="wrapper"> 87 <canvas id="myCanvas"></canvas> 88 <canvas id="myT"></canvas> 89 </div> 90</body> 91 92</html>
試したこと
https://qiita.com/TR246/items/4b84deadb26f1c450722
からcanvas同士でなら重ねられることを知り、はじめ<p>Hello World</p>とcanvasを重ねようとしていたのですがfillText()を用いて文字列を別のcanvasに移してみました。それらcanvasの大きさは同じになるように揃えたところ、重なる部分でオブジェクトの操作ができなくなりました。
そこでオブジェクトが描写されているcanvasにtextをfillText()で追加してみたのですが今度はtextが描写されなくなりました。
上記htmlのcss部分はこの記事を参考に書きました。
補足情報(FW/ツールのバージョンなど)
上記コードでid="myT"のcanvasをコメントアウトすると正常にオブジェクトを操作できます。(querySelector()でnullが返るため少し怒られますが動作に支障はないです)
vscodeの拡張機能であるliveserverを用いてローカルサーバーを立てて実行しています。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。