WORLD

世界を構成するには

ブラウザで3DCGを表示するためには何が必要でしょうか？

私たちの生活と紐づけて考えてみましょう。 目がなければ前方に何があるかわかりませんし、宇宙が存在しなければ私たちも存在しません。 そして、宇宙を描くためのキャンバスが無ければあなたが想像した絵を出力することはできません。 主要なものはこれでそろいました。目(カメラ)、宇宙(シーン)、キャンバス(レンダラー)です。

//THREE.jsを読み込む
import * as THREE from 'three';

//シーンを作成
const scene = new THREE.Scene();
//カメラを作成
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//レンダラーを作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

//bodyにレンダラーを追加
document.body.appendChild( renderer.domElement );

以上が必要最低限のコードになります。大体わかる方はそのまま次のページに進んでください。わからない人も次のページにどんどん進みましょう！こういうものは慣れが大事ですから。