W.D.Sphere

ウェブ開発の技術を楽しむ空間

three.jsを散策する④ プリミティブなジオメトリいろいろ(多面体、平面、リング、球体、トーラス)

three.jsを学んでいくシリーズの４回目です。前回につづきプリミティブなジオメトリを描画していきます。多面体、平面、リング、球体、トーラスを描画してみます。

three.jsの公式サイトのマニュアルを参考にいろいろなジオメトリを描画していきます。公式サイトを確認したい方は下記のリンクからどうぞ。

three.js manual Fundamentals Primitives

ルートフォルダにベースとなるindex.htmlとmain.jsを下記のように作成します。ジオメトリの部分を変更して描画していきます。アニメーションの部分の変数もメッシュに合わせて変更すればOKです。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">//ビューポートの指定
    <title>three.js app</title>
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
     {
       "imports": {
	 "three": "https://unpkg.com/three@v0.155.0/build/three.module.js",
	 "three/addons/": "https://unpkg.com/three@v0.155.0/examples/jsm/"
       }
     }
    </script>
  </head>
  <body>
    <div id="canvas-container"></div>
    <script type="module" src="main.js"></script>
  </body>
</html>

main.js

import * as THREE from 'three';

const container = document.querySelector( '#canvas-container' );//描画先の要素を取得
let width = container.clientWidth;//幅の指定
let height = container.clientWidth / 1.618;//幅に合わせて高さを指定

//シーン
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );

//カメラ
const camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
camera.position.z = 4;

//レンダラー
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize( width, height );
container.appendChild( renderer.domElement );

//リサイズの処理
function resize() {		
    renderer.setSize( container.clientWidth, container.clientWidth / 1.618 );
    camera.aspect = container.clientWidth / ( container.clientWidth / 1.618 );		
    camera.updateProjectionMatrix();
};
window.addEventListener( "resize", resize );

//ジオメトリ
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshPhongMaterial({ color: 0xd000080 });
const cube = new THREE.Mesh( geometry, material );
cube.castShadow = true;
cube.position.y = 0.6;
scene.add( cube );

//土台のジオメトリ
const planeGeometry = new THREE.PlaneGeometry( 100, 100 );
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.position.set( 0, 0, -3 );
plane.receiveShadow = true;
scene.add( plane );

//ライト
const light = new THREE.DirectionalLight( 0xffffff, 6.0 );
light.position.set( 2, 1, 2 );
light.castShadow = true;
scene.add(light);

//アニメーション
function animate() {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.002;
    cube.rotation.y += 0.003;
    cube.rotation.z += 0.004;

    renderer.render( scene, camera );
}

animate();

四面体 TetrahedronGeometry

四面体を描画できるジオメトリです。コンストラクタを確認します。

TetrahedronGeometry(radius : Float, detail : Integer)

radius(半径)、detail（ディテイル）を指定できます。detail(ディテイル)は0以上のインテジャを指定するようです。値が大きいほど球体に近い形状になります。

const geometry = new THREE.TetrahedronGeometry( 1, 0 );
const material = new THREE.MeshPhongMaterial({color: 0x000080});
const tetrahedron = new THREE.Mesh( geometry, material );
tetrahedron.castShadow = true;
tetrahedron.position.y = 0.6;
scene.add( tetrahedron );
threejs-tutorial4-01

八面体 OctahedronGeometry

八面体を描画できるジオメトリです。コンストラクタを確認します。

OctahedronGeometry(radius : Float, detail : Integer)

こちらもradius(半径)、detail（ディテイル）を指定できます。

const geometry = new THREE.OctahedronGeometry( 1, 0 );
const material = new THREE.MeshPhongMaterial({color: 0x000080});
const octahedron = new THREE.Mesh( geometry, material );
octahedron.castShadow = true;
octahedron.position.y = 0.6;
scene.add( octahedron );
threejs-tutorial4-02

二十面体 IcosahedronGeometry

二十面体を描画できるジオメトリです。コンストラクタを確認します。

IcosahedronGeometry(radius : Float, detail : Integer)

こちらもradius(半径)、detail（ディテイル）を指定できます。

const geometry = new THREE.IcosahedronGeometry( 1, 0 );
const material = new THREE.MeshPhongMaterial({ color: 0x000080 });
const icosahedron = new THREE.Mesh( geometry, material );
icosahedron.castShadow = true;
icosahedron.position.y = 0.6;
scene.add( icosahedron );
threejs-tutorial4-03

平面 PlaneGeometry

平面を描画できるジオメトリです。これまでの例で影を映すために使用してきたジオメトリですね。コンストラクタを確認します。

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

width（幅）とheight（高さ）とそれぞれの区切り数が指定できます。

const geometry = new THREE.PlaneGeometry( 2, 2, 4, 4 );
const material = new THREE.MeshPhongMaterial({color: 0x000080, wireframe: true});
const plane1 = new THREE.Mesh( geometry, material );
plane1.castShadow = true;
plane1.position.y = 0.6;
scene.add( plane1 );
threejs-tutorial4-04

リングジオメトリ RingGeometry

リングの形状を描画できるジオメトリです。コンストラクタを確認します。

RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)

innerRadius（内側の半径）、outerRadius（外側の半径）、thetaSegments（輪の区切り数）、phiSegments（太さの区切り数）、thetaStart（円の区切り初めの角度）、thetaLength（中心角）が指定できます。シンプルにinnerRadius（内側の半径）、outerRadius（外側の半径）、thetaSegments（輪の区切り数）のみ指定してみます。

const geometry = new THREE.RingGeometry( 1.4, 1.6, 32 );
const material = new THREE.MeshPhongMaterial({color: 0x000080, wireframe: true});
const ring = new THREE.Mesh( geometry, material );
ring.castShadow = true;
ring.position.y = 0.6;
scene.add( ring );
threejs-tutorial4-05

球体 SphereGeometry

球体を描画できるジオメトリです。コンストラクタを確認します。

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

radius（半径）、widthSegments（幅の区切り数）、heightSegments（高さの区切り数）、phiStart（水平の開始角度）、phiLength（水平からの振り幅）、thetaStart（垂直の開始角度）、（垂直からの振り幅）を指定できます。今回はradius（半径）、widthSegments（幅の区切り数）、heightSegments（高さの区切り数）のみ指定してみます。

const geometry = new THREE.SphereGeometry( 1.2, 24, 24 );
const material = new THREE.MeshPhongMaterial({color: 0x000080, wireframe: true});
const sphere = new THREE.Mesh( geometry, material );
sphere.castShadow = true;
sphere.position.y = 0.6;
scene.add( sphere );
threejs-tutorial4-06

トーラス TorusGeometry

トーラス（円環）を描画できるジオメトリです。コンストラクタを確認します。

TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)

radius(半径)、tube（管の太さ）、radialSegments（断面の区切り数）、tubularSegments（管の区切り数）、arc（中心角）を指定できます。

const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshPhongMaterial({color: 0x000080});
const torus = new THREE.Mesh( geometry, material );
torus.castShadow = true;
torus.position.y = 0.6;
scene.add( torus );
threejs-tutorial4-07

トーラス結び目 TorusKnotGeometry

トーラス結び目を描画できるジオメトリです。コンストラクタを確認します。

TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)

radius(半径)、tube（管の太さ）、tube（管の太さ）、radialSegments（断面の区切り数）、p（回転軸を曲がる回数）、q（トーラス内側に曲がる回数）を指定できます。デフォルトでpが2、qが3になっているのでそのまま描画してみます。

const geometry = new THREE.TorusKnotGeometry( 0.8, 0.4, 16, 64 );
const material = new THREE.MeshPhongMaterial({color: 0x000080});
const torusKnot = new THREE.Mesh( geometry, material );
torusKnot.castShadow = true;
torusKnot.position.y = 0.6;
scene.add( torusKnot );
threejs-tutorial4-08

プリミティブなジオメトリをいろいろ確認できました。


< Previous ArticleNext Article >
Back to Articles
©2025 W.D.Sphere All Rights Reserved.