VitePress

Appearance

Canvasクラス ​

a3.Canvasは通常のHTML要素としてページに配置するタイプの 3D表示クラスです。HTMLカスタム要素<canvas-a3>として使用できます。 a3.Windowと違って自動ではページに追加されないので、自分で 配置場所を決めます。そのぶんCSSでサイズ・位置・枠線などを自由に デザインできます。

使用例 ​

JavaScriptから生成してページに追加する方法と、HTMLにタグを書く 方法があります。

js
// JavaScriptでの使用例
const view = new a3.Canvas();
view.style.cssText = 'width:600px;height:300px;';
document.body.appendChild(view);
html
<!-- HTMLでの使用例 -->
<canvas-a3 style="width: 600px; height: 300px;"></canvas-a3>

以下は角丸の枠線をCSSでつけた例です。

js
import * as a3 from 'a3js';

const view = new a3.Canvas();
view.style.cssText = 'width:100%;height:280px;border:solid 1px gray;border-radius:8px;';
document.body.appendChild(view);
const obj = new a3.SampleObject();
view.scene.add(obj);

生成オプション ​

new a3.Canvas(options)のオプションには以下のものがあります。

  • antialias — trueにすると描画品質が上がりますが処理が 重くなります。デフォルトはfalse。
  • transparent — trueにすると3Dキャンバスの背景が透明になり、 ページの背景が透けて見えます。デフォルトはfalse。
  • camera — 使用するカメラ。省略時はデフォルトの透視投影カメラが 使用されます。
js
const view = new a3.Canvas({antialias: true, transparent: true});

alert()・prompt()・click3dイベント ​

Windowクラスと同様に、alert()/prompt()の ダイアログ機能とclick3dイベントが使えます。

詳細はAPIドキュメントを 参照してください。