実現したいこと
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を用いてローカルサーバーを立てて実行しています。
0 コメント