[Three.js]ジオメトリ1


以前の記事では、幾何学で六面体の形状を定義したものを使ってみましたBoxGeometryこの記事では、BoxGeometryを含む3つ.jsが提供する基本geo metryを表示します.
  • Three.jsが基本的に提供するgeometree.
  • 地理情報は基本的に継承BufferGeometry
  • ParametricGeometry数学関数式に2つの値を入力した座標からなる幾何学的図形.
  • EdgesGeometry地理情報の隣接面を構成する角度から地理情報を再構築する.
  • PolyhedrongGeometry多面体を構成するジオメトリです.
    継承
  • 多面体ジオメトリIcosahedronGeometry20面体OctahedronGeometry8面体DodecahedronGeometry12面体TetrahedronGeometry4面体ジオメトリです.
  • Geometry 3 Dオブジェクトの形状を定義します.上図はこれを定義するデータを示しています.
  • Vertex:xyz軸に対する形状の頂点の座標を定義します.
  • Vertex Index:三次元オブジェクト面を構成する頂点のインデックス
  • Normal Vector:頂点の垂直ベクトル
  • Vertex Color:後端頂点の色
  • テクスチャマッピング用UV座標
  • 任意定義のデート
  • 上記のデータは,3次元可視化時に一度にGPUに転送して高速処理を行う.

    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は、水平、垂直、深さのサイズと、水平、垂直、深さの分割、すなわちセグメント数として定義されます.
  • 横・縦・深の分割数は指定せず、デフォルト値は1です.
  • もし
  • 全部2に指定したら?横方向、縦方向、深さ方向の2つの部分に分かれています.

  • 完全な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();
    };