easy-three
Eng日本語

create.html

create.html(domElement: HTMLElement, props : Object) : Mesh

domElement - HTML要素。
props - 設定オブジェクト。
  • position (Array) : 位置 (デフォルト : [0, 0, 0])。
  • rotation (Array) : 回転 (デフォルト : [0, 0, 0])。
  • scale (Array) : スケール (デフォルト : [1, 1, 1])。
  • autoAdd (Boolean) : シーンに自動追加するか？ (デフォルト : true)。

HTML要素を3D空間に配置します。

HTML要素は、表示されるものでないと正しくレンダリングされません。
そのため、create.html()で配置するHTML要素は、display:noneやvisibility:hiddenなどで非表示にせず、
画面外に配置するなどして、表示される状態にしておく必要があります。

単純に left: -10000px などで画面外に配置するだけでは、ページが横に伸びてスクロールバーが表示されてしまいます。
コンテナとなるdiv要素 (position: relative, overflow: hidden)などで囲い、 その中に position: absolute で配置するのがオススメです。

コードの例

HTML要素の配置

document.createElement()でHTML要素を作成し、create.html()で配置します。

const { camera, create, controls, animate } = init()
camera.position.set(0, 0, 2);
controls.connect();

create.ambientLight();
create.directionalLight();

const div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.display = "flex";
div.style.flexDirection = "column";
div.style.justifyContent = "space-around";
div.style.alignItems = "center";
div.style.backgroundColor = "#aaa";
div.style.position = "absolute";
div.style.top = "0";
div.style.left = "10000px";
div.innerHTML = "HTML Mesh"
document.body.appendChild(div);

create.html(div, {
  scale: [15, 15, 15]
});

animate()

HTML要素の配置

既存のHTML要素を配置する場合は、document.querySelector()などで取得します。

0
const { camera, create, controls, animate } = init()
camera.position.set(1, 1, 2)
controls.connect()

create.ambientLight()
create.directionalLight()

create.html(document.querySelector("#html-mesh"), {
  scale: [15, 15, 15]
})

animate()