폴리프레임

데스크 탑에서 Drag 를 이용하여 3D 도형의 회전을 수행했으나, 터치 스크린에서는 touchstart, touchmove, touchend 이벤트를 추가해야합니다. 이를 추가하여 구현합니다.// Blocks.jsx/* eslint-disable */import React, { useRef, useMemo, useState, useEffect } from "react";import { useNavigate } from "react-router-dom";import { Canvas, useFrame } from "@react-three/fiber";import { Html } from "@react-three/drei";import * as THREE from "three";function createM..

three.js 2024. 11. 23. 01:21

배경을 비디오 처리하고, overlay와 3D Geometry 을 위에 구현해 본 코드입니다.// App.jsximport bgVideo from "./assets/seokang-background.mp4";import RenderModel from "./components/RenderModel";import Blocks from "./components/models/Blocks";function App() { return ( {/* */} );}export default App;// Blocks.jsk/* eslint-disable */import React, { useRef, useM..

three.js 2024. 11. 22. 22:37

Three.js 활용시 resize 활용예제window.addEventListener('resize', onWindowResize); function onWindowResize(){   camera.aspect = window.innerWidth / window.innerHeight ;   camera.updateProjectionMatrix();   renderer.setSize( winow.innerWidth, window.innerHeight );}

three.js 2024. 11. 22. 12:48

camera.lookAt()와 camera.getWorldDirection()의 차이점 camera.lookAt()용도: 카메라를 특정 좌표를 바라보도록 설정합니다.매개변수: (x, y, z) 또는 THREE.Vector3 객체.설명: 카메라의 방향을 지정된 위치로 설정하여, 해당 위치를 바라보게 합니다. 이는 카메라가 어떤 객체나 지점을 집중해서 보게 만들 때 유용합니다.camera.position.set(1, 2, -3);camera.lookAt(0, 1, 0); // 카메라가 (0, 1, 0) 위치를 바라보게 설정camera.getWorldDirection()용도: 카메라가 현재 바라보고 있는 방향을 벡터로 반환합니다. 매개변수: THREE.Vector3 객체를 받아서 반환된 방향 벡터를 저장.설명..

three.js 2024. 11. 21. 20:21

Capsule은 Three.js 라이브러리의 클래스입니다. 캡슐 형태의 기하학적 구조를 정의하고, 물리적 시뮬레이션이나 충돌 검출 등의 다양한 용도로 사용할 수 있습니다. 기하학적 정의: Capsule 클래스는 두 반구 사이에 실린더를 연결한 형태로, 3D 공간에서 캡슐 형태의 기하학적 구조를 생성합니다.물리적 시뮬레이션: 물리 엔진에서 사용하여 캡슐 형태의 객체 간의 충돌을 검출하거나, 물리적 상호작용을 시뮬레이션할 수 있습니다.충돌 검출: 게임 개발이나 시뮬레이션에서 캐릭터의 충돌 영역을 정의하는 데 유용합니다. 캡슐 형태는 특히 캐릭터의 몸체를 모델링하는 데 자주 사용됩니다.경로 찾기 및 충돌 회피: 캐릭터가 장애물을 피하며 이동할 때 유용하게 사용됩니다.import { Capsule } from ..

three.js 2024. 11. 21. 17:49

Octree는 3차원 공간 분할 데이터 구조로, 공간을 효율적으로 관리하고 검색할 수 있게 도와줍니다. 이 구조는 3D 공간을 재귀적으로 8개의 작은 부분으로 나누어 관리합니다. 이는 공간 안의 객체들이 위치한 영역을 빨리 찾고 충돌을 검사하는 등의 작업에 매우 유용합니다.Octree의 주요 특징노드 구조: 각 노드는 최대 8개의 자식 노드를 가질 수 있습니다. 이 자식 노드는 부모 노드를 8개의 동일한 크기의 구역으로 나눕니다.분할 기준: 공간이 일정 기준을 넘을 때마다, 또는 공간에 포함된 객체 수가 특정 수를 넘을 때 분할이 발생합니다.효율성: 충돌 검사나 범위 검색을 수행할 때, 불필요한 계산을 줄여줍니다.Octree의 용도충돌 검출: 3D 게임이나 시뮬레이션에서 물체 간의 충돌을 빠르게 검사하는..

three.js 2024. 11. 21. 16:54

WebGLRenderer와 CSS3DRenderer는 Three.js에서 사용하는 두 가지 주요 렌더링 방식으로, 각각의 특성과 용도가 다릅니다. WebGLRenderer기능: WebGLRenderer는 WebGL API를 사용하여 3D 그래픽을 렌더링합니다. WebGL은 GPU 가속을 통해 빠르고 성능이 뛰어난 3D 그래픽을 제공합니다1.용도: 주로 복잡한 3D 모델, 텍스처, 라이팅, 셰이더 등을 사용하는 3D 애플리케이션에 사용됩니다.성능: 높은 성능과 품질의 3D 그래픽을 제공합니다.CSS3DRenderer기능: CSS3DRenderer는 CSS를 사용하여 HTML 요소를 3D 공간에 표시합니다. 이를 통해 HTML 요소를 3D 객체처럼 보이게 할 수 있습니다1.용도: 주로 텍스트, UI 요소, ..

three.js 2024. 11. 21. 12:37

lookAt() 메서드는 월드 좌표계에서 특정 위치를 지정하여 카메라의 시선이 해당 위치를 바라보도록 설정합니다.기본값이라고 할 수 있는 초기 상태는 별도로 존재하지 않습니다. 그러나 일반적으로 카메라가 생성된 초기 상태에서는 Z축의 음의 방향을 바라봅니다.const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 초기 상태에서 camera는 (0, 0, 0)을 바라보지 않음console.log(camera.position); // Default: (0, 0, 0)console.log(camera.lookAt); // 초기값: 정의되지 않음// 명시적으로 설정camera.positi..

three.js 2024. 11. 21. 12:26