id=“application”></canvas> // 2. JavaScriptでPlayCanvas エンジン読み込み <script src=“https://code.playcanvas.com/playcanvas-stable.min.js”></script> // 3. PlayCanvas Engineの初期化 const canvas = document.getElementById(“application”) // canvasをIDからDOMから取得 const app = new pc.Application(canvas, {}); //PlayCanvasのエンジンを初期化 app.start() // メインループの開始 // 4. シーン上にキューブを100個配置 (コードの変更点） const camera = new pc.Entity(“camera”); // カメラ エンティティ(オブジェクト）を作成 camera.addComponent(“camera”, {clearColor: new pc.Color(0.5, 0.5, 0.5)}); // 「camera」コンポーネントを追加 const light = new pc.Entity(“light”); // ライト エンティティ(オブジェクト）を作成 light.addComponent(“light”); // 「light」コンポーネントを追加 app.root.addChild(camera); // シーンにカメラエンティティを追加 app.root.addChild(light); // シーンにライトエンティティを追加 const cube = new pc.Entity(“cube”); // キューブ エンティティ(オブジェクト）を作成 cube.addComponent(“render”, {type: “box”}}); // 「render」コンポーネントを追加 app.root.addChild(cube); // シーンにキューブのエンティティを追加 PlayCanvas EngineでHello, World ! （デモ 2 )表⽰されるキューブの数を増やす このコードではキューブが１つシーンに表⽰される const SIZE = 10; for (const index = 0; index < SIZE * SIZE ; index++) { // 10 x 10のキューブを⽣成するためのループ処理 const x = 2 * (index % SIZE) - SIZE; // xの位置を計算 const z = 2 * Math.floor( index / SIZE) - SIZE; // yの位置を計算 const cube= new pc.Entity(); // 新しいキューブエンティティを作成 cube .addComponent(“render”, { type: “box” }); // ボックス型のレンダリングコンポーネントを追加 cube .translate(x, -1.5, z); // キューブの位置を設定 app.root.addChild(cube ); // キューブをシーンに追加 }
yushimatenjin
yamaguchitk333
taichinakamura
axelmizu
lana2548
orimanabu
chanyou0311
yuj1osm
rokuosan
kniino
mochizuki875
faithandbrave
oguressive
sferik
holman
addyosmani
ufuk
palkan
jcasabona
eileencodes
caitiem20
keathley
csswizardry
pedronauck
destraynor
