[Capstone Project] THREE.Geometry deprecated

※ 해당 글은 capstone 종합설계 프로젝트를 하면서 적었던 일지를 돌아보며 작성한 것입니다.

개발일지 2022.10.03 

custom geometry를 제작하는 코드를 보면 THREE.Geometry를 사용하는 것들이 있다.

Updating THREE.Geometry to THREE.BufferGeometry

Updating THREE.Geometry to THREE.BufferGeometry - Three.js Tutorials

버전 r125에서부터 THREE.Geometry가 deprecated 상태였다. r125가 버전을 의미하는 것이라면, 현 three.js 버전이 0.143.0 이므로 이미 삭제된 모양이다. THREE.Geometry를 호출하면 에러가 발생한다. 이미 THREE.Geometry는 삭제되었다.

Geometry가 사용된 코드들을 BufferGeometry로 변경해서 테스트 해보자.

three.js 10편. 나비 만들기

three.js 10편. 나비 만들기

 

deprecated된 geometry의 경우 vertices.push를 통해 vertex 정보를 입력하고, vertex간 연결을 Face3를 통해서 입력하는 방식이었다.

근데 바뀐 bufferGeometry는 폴리곤을 구성하는 세 개의 연속된 vertex로 하나의 폴리곤을 구성하도록 연결시키는 모양이다.

 

import * as THREE from 'three';
import { DoubleSide } from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

let butterfly;

// function
let createButterfly = function(){
	let geometry = new THREE.BufferGeometry();
	let material = new THREE.MeshBasicMaterial({
		color:0xabcdff,
		side: DoubleSide,
	});
	butterfly = new THREE.Mesh(geometry, material);

	const points = [
		// new THREE.Vector3(0,0,0), // index0
		// new THREE.Vector3(5,0,0), // index1
		// new THREE.Vector3(2,4,3), // index2
		// new THREE.Vector3(2,4,-3), // index3

		new THREE.Vector3(0,0,0), // index0
		new THREE.Vector3(5,0,0), // index1
		new THREE.Vector3(2,4,3), // index2

		new THREE.Vector3(0,0,0), // index0
		new THREE.Vector3(5,0,0), // index1
		new THREE.Vector3(2,4,-3), // index3
	];
	geometry.setFromPoints(points);

	butterfly.rotation.x = 0.4;
	butterfly.rotation.y = 0.6;

	scene.add(butterfly);
}

// Renderer
const canvas = document.querySelector('#three-canvas');
const renderer = new THREE.WebGLRenderer({
	canvas,
	antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

// Scene
const scene = new THREE.Scene();

// Camera
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
);
camera.position.z = 4;
scene.add(camera);

// Light
const ambientLight = new THREE.AmbientLight('white', 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight('white', 1);
directionalLight.position.x = 1;
directionalLight.position.z = 2;
scene.add(directionalLight);

// Controls
const controls = new OrbitControls(camera, renderer.domElement);

// Mesh

// draw
createButterfly();

let add = 0.7;
console.log(butterfly.geometry.attributes);
console.log(butterfly.geometry);
function draw() {
	butterfly.geometry.attributes.position.array[7] -= add;
	butterfly.geometry.attributes.position.array[16] -= add;
	butterfly.geometry.attributes.position.needsUpdate = true;

	if (butterfly.geometry.attributes.position.array[7] > 5 || butterfly.geometry.attributes.position.array[16] < -5) {
		add *= -1;
	}

	renderer.render(scene, camera);
	renderer.setAnimationLoop(draw);
}

function setSize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.render(scene, camera);
}

// event
window.addEventListener('resize', setSize);

draw();