基本
全体
JavaScriptを含むHTML全体は次のコードのとおりです。
モジュールはCDNを使っているのであらかじめダウンロードする必要はありません。
スクリプトは次のとおりですが順番は厳密ではありません。最後に描画をセットします。
- シーンの設定
- カメラの設定
- レンダラーの設定
- ライトの設定
- 立体の設定
- 描画
<html>
<body>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three/build/three.module.js";
// シーンの設定
const scene = new THREE.Scene();
// カメラの設定
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight
);
camera.position.set(50, 50, 100);
camera.lookAt(0, 0, 0);
// レンダラーの設定
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// ライトの設定
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(120, 150, 100);
scene.add(directionalLight);
// ----立体の設定 ここから----
// 直方体
const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
const boxMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, 0);
scene.add(box);
// ----立体の設定 ここまで----
// 描画
renderer.render(scene, camera);
</script>
</body>
</html>
<body>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three/build/three.module.js";
// シーンの設定
const scene = new THREE.Scene();
// カメラの設定
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight
);
camera.position.set(50, 50, 100);
camera.lookAt(0, 0, 0);
// レンダラーの設定
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// ライトの設定
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(120, 150, 100);
scene.add(directionalLight);
// ----立体の設定 ここから----
// 直方体
const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
const boxMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, 0);
scene.add(box);
// ----立体の設定 ここまで----
// 描画
renderer.render(scene, camera);
</script>
</body>
</html>
結果
座標
座標は右にX、上にY、手前にZとなっています。
立体の設定
サンプルの「立体の設定」のところを書き換えます。
直方体や球体などの、形をgeometryで、材料(表面)をmaterialで設定します。
直方体
大きさ(辺の長さ)はBoxGeometry(X, Y, Z)とします。
位置はposition.set(X, Y, Z)とします。直方体のど真ん中がここになります。角(頂点)ではありません。
色はMeshStandardMaterial({color: color: 0xカラーコード})とします。カラーコードはRGBをそれぞれ2桁の16進数で表します。
// 直方体
const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
const boxMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, 0);
scene.add(box);
const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
const boxMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, 0);
scene.add(box);
球体
SphereGeometry(半径, 幅の分割数, 高さの分割数)とします。分割数は32としているケースが多いようです。
// 球体
const ballGeometry = new THREE.SphereGeometry(10, 32, 32);
const ballMaterial = new THREE.MeshStandardMaterial({
color: 0xff0000,
});
const ball = new THREE.Mesh(ballGeometry, ballMaterial);
ball.position.set(0, 0, 0);
scene.add(ball);
const ballGeometry = new THREE.SphereGeometry(10, 32, 32);
const ballMaterial = new THREE.MeshStandardMaterial({
color: 0xff0000,
});
const ball = new THREE.Mesh(ballGeometry, ballMaterial);
ball.position.set(0, 0, 0);
scene.add(ball);
円錐
ConeGeometry(半径, 高さ, 分割数)とします。
// 円錐
const coneGeometry = new THREE.ConeGeometry(10, 20, 32);
const coneMaterial = new THREE.MeshStandardMaterial({
color: 0x0000ff,
});
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(0, 0, 0);
scene.add(cone);
const coneGeometry = new THREE.ConeGeometry(10, 20, 32);
const coneMaterial = new THREE.MeshStandardMaterial({
color: 0x0000ff,
});
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(0, 0, 0);
scene.add(cone);
直線
下の例では(0,0,0)から(5,75,100)まで白の線を描きます。
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
const points = [];
points.push(new THREE.Vector3(0, 0, 0));
points.push(new THREE.Vector3(50, 75, 100));
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
const points = [];
points.push(new THREE.Vector3(0, 0, 0));
points.push(new THREE.Vector3(50, 75, 100));
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
コメント