とりあえず、このサイトを見て勉強。
まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。
と言うので、とりあえず、下記コードを貼り付けて実行.
html
<html>
<head>
<meta charset="utf-8" />
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from "three";
// サイズを指定
const width = 960;
const height = 540;
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#myCanvas"),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
// 箱を作成
const geometry = new THREE.BoxGeometry(400, 400, 400);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry, material);
scene.add(box);
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
box.rotation.y += 0.01;
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
実行環境は、Vue.js 勉強の時に用意してた、VS Code に Live Server という拡張機能を入れたもの。
実行すると、こんな画面表示になった。
平面のスクリーンショットだとわかりにくいですが、この箱は（自動的に）横回転しています。
(追記) CodePen で書いた
See the Pen three.js 入門1_1 by sasuke (@vhmbdiog-the-flexboxer) on CodePen.
その２
サンプルのこの辺のソースをいじってこの箱を複数個にしてみた。
html
// 箱を作成
const geometry = new THREE.BoxGeometry(400, 400, 400);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry, material);
scene.add(box);
// 箱2を作成
const geometry2 = new THREE.BoxGeometry(200, 200, 200);
const box2 = new THREE.Mesh(geometry2, material);
//場所を変える
box2.position.x = 400;
box2.position.z = 400;
scene.add(box2);
// 箱3を作成
const geometry3 = new THREE.BoxGeometry(100, 100, 100);
const box3 = new THREE.Mesh(geometry2, material);
//場所を変える
box3.position.x = -600;
box3.position.z = -400;
scene.add(box3);
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
box.rotation.y += 0.01; //y回転
box2.rotation.z += 0.01; //z回転
box3.rotation.x += 0.01; //x回転
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
画面表示はこうなりました。
・箱を増やす。
・位置を重ならないようにずらす。
また、回転の軸もそれぞれ別の軸にしています。
html
// 毎フレーム時に実行されるループイベントです
function tick() {
box.rotation.y += 0.01; //y回転
box2.rotation.z += 0.01; //z回転
box3.rotation.x += 0.01; //x回転
箱は少しずつ回転してます。
(追記) CodePen で書いた
See the Pen three.js 入門1_2 by sasuke (@vhmbdiog-the-flexboxer) on CodePen.