위치 이동

 

position

// Three.js 기본 설정
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
    // 첫 번째 큐브 생성 (기본 위치)
    const geometry1 = new THREE.BoxGeometry();
    const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube1 = new THREE.Mesh(geometry1, material1);
    scene.add(cube1);
 
    // 두 번째 큐브 생성 (위치 이동)
    const geometry2 = new THREE.BoxGeometry();
    const material2 = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    const cube2 = new THREE.Mesh(geometry2, material2);
 
    // cube2의 위치를 x축으로 -1만큼 이동시킴
    cube2.position.set(-1, 0, 0);
    scene.add(cube2);
 
    // 카메라 위치 설정
    camera.position.z = 5;
 
    // 애니메이션 루프
    function animate() {
        requestAnimationFrame(animate);
 
        // 큐브들을 회전시킴
        cube1.rotation.x += 0.01;
        cube1.rotation.y += 0.01;
 
        cube2.rotation.x += 0.01;
        cube2.rotation.y += 0.01;
 
        // 렌더링
        renderer.render(scene, camera);
    }
 
    animate();

 

변환 : 형태의 변화는 주는 것

• 위치 이동
• 크기 변경
• 회전

 

 

속성값으로 변경해주기

mesh.position.y = 2;

애니메이션을 주려면 값에 변화를 주면 되었다.

포지션을 설정할 때 mesh.position.y = 2; 와 같이 속성의 값으로 세팅을 주었었다.

 

 

.set 메서드 사용해 값 변경 해주기

mesh.position.set(-1, 0, 0);

.set 메서드 사용해도 된다. mesh.position.set(x, y, z); 이다.

 

 

.position 이란?

threejs 공식 문서 Vector3

const a = new THREE.Vector3( 0, 1, 0 );

• 백터3은 3차원 공간에서 어떤 점의 위치를 나타내는 객체이다.
• 원점에서 거리이다.

 

// 위치 거리 콘솔로 확인하기
 
console.log( mesh.position.length() );

// 어떤 백터3까지의 거리를 나타낸다.
 
console.log( mesh.position.distanceTo(new THREE.Vector3(1, 2, 0)) );

// 메쉬에서 카메라의 포지션까지의 거리를 숫자로 표현
 
console.log( mesh.position.distanceTo(camera.position) );