Three.js チュートリアル: Threejs の共通ジオメトリの概要

推奨: NSDT シーン エディターを 3D ツールチェーンに 追加します。

その他の一連のツール: NSDT Jianshi デジタル ツイン

Threejs 共通ジオメトリの概要

Three.js は多くのジオメトリ API を提供します。このレッスンでは、後の学習の基礎を築くために、比較的単純なケースをいくつか紹介します。

threejs ドキュメントを組み合わせて、以下のすべてのジオメトリ関連のコードをテストし、3D 効果をプレビューできます。

//BoxGeometry：长方体
const geometry = new THREE.BoxGeometry(100, 100, 100);
// SphereGeometry：球体
const geometry = new THREE.SphereGeometry(50);
// CylinderGeometry：圆柱
const geometry = new THREE.CylinderGeometry(50,50,100);
// PlaneGeometry：矩形平面
const geometry = new THREE.PlaneGeometry(100,50);
// CircleGeometry：圆形平面
const geometry = new THREE.CircleGeometry(50);

両側から見える

Three.js のマテリアルはデフォルトで表側が表示、裏側が非表示になっていますが、長方形平面PlaneGeometryや円形平面の場合、両面を見たい場合は設定することができますside: THREE.DoubleSide。

new THREE.MeshBasicMaterial({
    side: THREE.FrontSide, //默认只有正面可见
});

new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide, //两面可见
});

3Dモデリングラーニングスタジオ

前: Three.js チュートリアル: 配列キューブとカメラ適応エクスペリエンス (mvrlink.com)

次へ: Three.js チュートリアル: メッシュ マテリアル Phong のハイライト (mvrlink.com)