サイトに3Dモデルを表示する試み②
静止していてるモデルをマウスで視点を変えて眺めるには:
前回のシーンにOrbitContolsを追加してマウスで色々な角度から眺められるようにします。
- 左ドラッグ:回転
- マウスホイールまたは中ドラッグ:縮小・拡大
- 右ドラッグ:移動
<canvas id="myCanvas" style="width:100%;"></canvas>
<script src="/js/build/three.min.js"></script>
<script src="/js/examples/js/controls/OrbitControls.js"></script>
<script>
// ページの読み込みを待つ
window.addEventListener('load', main);
function main() {
const canvas = document.querySelector('#myCanvas');
const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
renderer.setPixelRatio(2);
const fov = 50; // Field of View
const aspect = 2; // デフォルト
const near = 0.1;
const far = 500;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 3;
// カメラコントロール
const controls = new THREE.OrbitControls(camera, canvas);
// シーンを作成
const scene = new THREE.Scene();
scene.background = new THREE.Color( 'whitesmoke' );
// メッシュを作成
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
tick();
// 毎フレーム時に実行されるループイベント
function tick() {
// レンダリング
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
}
</script>
次はBlenderを使ってみます。