변경내용

threejs는 버전별 그 기능이 조금씩 변해왔다. 아래 링크를 보시면 도움이 될 듯 합니다.

변경과 관련하여 설명이 잘되어 있음. 참조 바람

아래는 최신 (v0.172.0) 으로 마이그레이션 하면서 발생한 에러들에 대해서 정리해 보았습니다.

Warning

deprecated

verticles

Property 'verticles' does not exist on type...

r125 이후 PlaneGeometry와 같은 모든 지오메트리 생성기는 BufferGeometry에서 파생되었습니다. 같은 릴리스에서 지오메트리는 제거되어 BufferGeometry가 이제 지오메트리 데이터로 작업하는 유일한 방법이라는 의미입니다.

• 이전 방식

for (var i = 0; i < geom.vertices.length; i++) {
  const v = geom.vertices[i];
}

• 현재 방식

const positionAttribute = geometry.getAttribute('position');
const vertex = new THREE.Vector3();

for (let i = 0; i < positionAttribute.count; i ++) {
  const v = vertex.fromBufferAttribute(positionAttribute, i);
}

• 이전방식

leafGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 5, 0));
leafGeom.vertices[2].x -= 1;
leafGeom.vertices[3].x -= 1;
leafGeom.vertices[6].x += 1;
leafGeom.vertices[7].x += 1;~

• 현재 방식

var leafGeom = new THREE.BoxGeometry(5, 10, 1, 1);
const positionAttribute = leafGeom.getAttribute('position');
const vertex = new THREE.Vector3();

vertex.fromBufferAttribute(positionAttribute, 2).x -= 1;
vertex.fromBufferAttribute(positionAttribute, 3).x -= 1;
vertex.fromBufferAttribute(positionAttribute, 6).x -= 1;
vertex.fromBufferAttribute(positionAttribute, 7).x -= 1;

• 이전방식

var geometry = new THREE.BoxGeometry(200, 200, 200);

  for (var i = 0; i < geometry.faces.length; i += 2) {

    var hex = Math.random() * 0xffffff;
    geometry.faces[i].color.setHex(hex);
    geometry.faces[i + 1].color.setHex(hex);

  }

  var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 });

  cube = new THREE.Mesh(geometry, material);
  cube.position.y = 150;
  scene.add(cube);

• 현재방식

let geometry = new THREE.BoxGeometry();
geometry = geometry.toNonIndexed();

const positionAttribute = geometry.getAttribute('position');

const color = new THREE.Color();
const colors = [];

for (let i = 0; i < positionAttribute.count; i += 6) {

  color.setHex(Math.random() * 0xffffff);
  
  // face one

  colors.push(color.r, color.g, color.b);
  colors.push(color.r, color.g, color.b);
  colors.push(color.r, color.g, color.b);
  
  // face two
  colors.push(color.r, color.g, color.b);
  colors.push(color.r, color.g, color.b);
  colors.push(color.r, color.g, color.b);

}

const colorAttribute = new THREE.Float32BufferAttribute(colors, 3);
geometry.setAttribute('color', colorAttribute);

const material = new THREE.MeshBasicMaterial({vertexColors: true});

Property 'verticesNeedUpdate' does not exist on type...

• 이전방식

geometry.verticesNeedUpdate=true;

• 현재 방식

geometry.attributes.position.needsUpdate
(geometry.attributes as any).position.needsUpdate = true;

Property 'applyMatrix' does not exist on type...

applyMatrix -> applyMatrix4

shading

shading has been removed. Use the boolean .flatShading instead.

• 이전방식

new THREE.MeshStandardMaterial( {color: 0x33ff33, shading: THREE.FlatShading} ); 

• 현재 방식

new THREE.MeshStandardMaterial( {color: 0x33ff33, flatShading: true} );

Property 'mergeVertices' does not exist on type...

• 이전방식

const geom = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments);
geom.mergeVertices();

import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
..........
BufferGeometryUtils.mergeVertices(geom);

Euler.toVector3()

Euler.toVector3() has been removed. Use Vector3.setFromEuler() instead.

• 이전방식

object.rotation.toVector3()

• 현재방식

 new THREE.Vector3().setFromEuler(object.rotation)

기타

def.ring.tex = THREE.ImageUtils.loadTexture( def.ring.url, {flipY : false} ); deprecated				

shadowMapEnabled => shadowMap.enabled				

MeshBasicMaterial does not respond to lights. Use MeshLambertMaterial, MeshPhongMaterial, or MeshStandardMaterial.

projectionCamera.matrixWorldInverse.getInverse(projectionCamera.matrixWorld);
->
projectionCamera.matrixWorldInverse.copy( projectionCamera.matrixWorld ).invert();


new THREE.Matrix4().getInverse( parent.matrixWorld );
->
new THREE.Matrix4().copy( parent.matrixWorld).invert();