[Three.js]ジオメトリ1
以前の記事では、幾何学で六面体の形状を定義したものを使ってみました
Three.jsが基本的に提供するgeometree. 地理情報は基本的に継承 ・ ・
継承多面体ジオメトリ Geometry 3 Dオブジェクトの形状を定義します.上図はこれを定義するデータを示しています. テクスチャマッピング用UV座標 任意定義のデート 上記のデータは,3次元可視化時に一度にGPUに転送して高速処理を行う.
前回の記事で作成したsetupModel()関数を見てみましょう.
変更後、WireframeGeometryが表示するコードを追加します.
WireframeGeometryをキャンセルした場合
これで、ユーザーはマウスを使用して正六面体を回転させるコードを作成します.横・縦・深の分割数は指定せず、デフォルト値は1です. もし全部2に指定したら?横方向、縦方向、深さ方向の2つの部分に分かれています.
BoxGeometry
この記事では、BoxGeometryを含む3つ.jsが提供する基本geo metryを表示します.BufferGeometry
ParametricGeometry
数学関数式に2つの値を入力した座標からなる幾何学的図形.EdgesGeometry
地理情報の隣接面を構成する角度から地理情報を再構築する.PolyhedrongGeometry
多面体を構成するジオメトリです.継承
IcosahedronGeometry
20面体OctahedronGeometry
8面体DodecahedronGeometry
12面体TetrahedronGeometry
4面体ジオメトリです.Vertex
:xyz軸に対する形状の頂点の座標を定義します.Vertex Index
:三次元オブジェクト面を構成する頂点のインデックスNormal Vector
:頂点の垂直ベクトルVertex Color
:後端頂点の色WireframeGeometry
前回の記事で作成したsetupModel()関数を見てみましょう.
変更後、WireframeGeometryが表示するコードを追加します.
_setupModel() {
/***** 변경 전 *****/
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// const material = new THREE.MeshPhongMaterial({ color: 0x44a88 });
// const cube = new THREE.Mesh(geometry, material);
// this._scene.add(cube);
// this._cube = cube;
/***** 변경 후 *****/
const geometry = new THREE.BoxGeometry(1, 1, 1);
const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x44a88 });
const cube = new THREE.Mesh(geometry, fillMaterial);
// 선 추가
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 });
const line = new THREE.LineSegments(
new THREE.WireframeGeometry(geometry), // WireframeGeometry : 와이어프레임 형태로 지오메트리를 표헌
lineMaterial
);
const group = new THREE.Group();
group.add(cube);
group.add(line);
this._scene.add(group);
this._cube = group;
}
WireframeGeometryをキャンセルした場合
const line = new THREE.LineSegments(geometry, lineMaterial);
モデルのすべてのプロファイルは表示されません.これで、ユーザーはマウスを使用して正六面体を回転させるコードを作成します.
import { OrbitControls } from "./OrbitControls.js";
まずOrbitControlsをインポートし、以前解凍したファイルに例/jsm/controls/orbitControlsが存在します._setControls() {
// OrbitsControls 객체를 생성할 때는 카메라 객체와 마우스 이벤트를 받는 DOM 요소가 필요하다.
new OrbitControls(this._camera, this._divContainer);
}
setControls関数を記述することで、ユーザーはマウスで回転することができます._setupModel() {
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x44a88 });
const cube = new THREE.Mesh(geometry, fillMaterial);
// 선 추가
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 });
const line = new THREE.LineSegments(
new THREE.WireframeGeometry(geometry), // WireframeGeometry : 와이어프레임 형태로 지오메트리를 표헌
lineMaterial
);
const group = new THREE.Group();
group.add(cube);
group.add(line);
this._scene.add(group);
this._cube = group;
}
BoxGeometryは、水平、垂直、深さのサイズと、水平、垂直、深さの分割、すなわちセグメント数として定義されます.完全なJSコード
import * as THREE from "../build/three.module.js";
import { OrbitControls } from "./OrbitControls.js";
class App {
constructor() {
const divContainer = document.querySelector("#webgl-container");
this._divContainer = divContainer;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
divContainer.appendChild(renderer.domElement);
this._renderer = renderer;
const scene = new THREE.Scene();
this._scene = scene;
this._setupCamera();
this._setupLight();
this._setupModel();
this._setControls();
window.onresize = this.resize.bind(this);
this.resize();
requestAnimationFrame(this.render.bind(this));
}
_setupCamera() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
camera.position.z = 2;
this._camera = camera;
}
_setupLight() {
const color = 0xffffff;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
this._scene.add(light);
}
_setControls() {
new OrbitControls(this._camera, this._divContainer);
}
_setupModel() {
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x44a88 });
const cube = new THREE.Mesh(geometry, fillMaterial);
// 선 추가
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 });
const line = new THREE.LineSegments(
new THREE.WireframeGeometry(geometry),
lineMaterial
);
const group = new THREE.Group();
group.add(cube);
group.add(line);
this._scene.add(group);
this._cube = group;
}
resize() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
this._camera.aspect = width / height;
this._camera.updateProjectionMatrix();
this._renderer.setSize(width, height);
}
render(time) {
this._renderer.render(this._scene, this._camera);
this.update(time);
requestAnimationFrame(this.render.bind(this));
}
update(time) {
time *= 0.001;
this._cube.rotation.x = time;
this._cube.rotation.y = time;
}
}
window.onload = function () {
new App();
};
Reference
この問題について([Three.js]ジオメトリ1), 我々は、より多くの情報をここで見つけました https://velog.io/@godud2604/Three.js-지오메트리Geometry-Part-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol