1. 문제이해 다음은 3D 모델을 불러오는 React, React Three Fiber의 코드 현황이다. [CanvasPage.tsx] import { Canvas } from "@react-three/fiber"; import { TalkBalloonComp } from "../component/talk/TalkBalloonComp"; import { talkBalloonAtom } from "../atom/TalkBalloonAtom" import { useRecoilValue } from "recoil" import { MapUtilComp } from "../component/talk/MapUtilComp"; import { Physics, Debug } from '@react-three/cann..
1. poly haven https://polyhaven.com/a/shanghai_bund Shanghai Bund HDRI • Poly Haven Download this free HDRI from Poly Haven polyhaven.com 위 사이트에서 HDRIs 파일을 자유롭게 가져올 수 있다. // RGBE Loader var loader = new RGBELoader() loader.setDataType(THREE.UnsignedByteType) loader.load('../static/ex-14/shanghai_bund_1k.hdr', function (texture) { texture.mapping = THREE.EquirectangularReflectionMapping scene.bac..
1. 원리 정육면체 공간에 하나씩 이미지를 붙임으로써 하나의 공간을 만들게 된다. https://opengameart.org/content/skiingpenguins-skybox-pack skiingpenguins' skybox pack From 512² to 2048², JPEG format. It was made using a paid version of Terragen, which allows commercial use. opengameart.org 위 사이트는 위 공간 구성이 가능하게 이미지를 무료로 풀어놓았다. 1. 텍스쳐 추가 import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/Orbi..
1. 색상 변수 등록 const FogColor = 0x004fff const objColor = 0xffffff const FloorColor = 0x555555 이렇게 색상 변수를 등록하고, color를 적용할 곳에다가 변수만 넣어주면 끝이다. 이렇게 변수를 활용하면 나중에 일일이 오브젝트마다 color를 바꿔주지 않아도 된다. 배경 색상을 변경해보자 const scene = new THREE.Scene() scene.background = new THREE.Color(FloorColor) 아래는 전체 코드이다. import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js..
1. 기본 코드 import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { WEBGL } from './webgl' if (WEBGL.isWebGLAvailable()) { // console.log(OrbitControls); // 장면 추가 const scene = new THREE.Scene(); scene.background = new THREE.Color(0xeeeeee); // 카메라 추가 const fov = 120; const aspect = window.innerWidth / window.innerHeight; const near = 0...
1. 그림자 적용하는 방법 1. Renderer에 그림자 사용 설정 2. 빛을 받아 그림자를 표현할 물체와 그 그림자를 받을 물체를 특정 코드로 설정 3. 빛에 그림자 설정 기본적으로 그림자가 있으려면 빛과 물체가 있어야 한다. 그러나 빛의 종류에 따라 그림자 표현이 안되는 것도 있다. const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // ambientLight.castShadow = true; // 그림자 안먹힘 scene.add(ambientLight); AmbientLight가 그것이다. 1) 렌더러에 그림자 맵을 추가해준다. renderer.shadowMap.enabled = true; 2) 빛을 받아 그림자를 표현할 물체 설정 castS..
1. 기본코드 import * as THREE from 'three' import { WEBGL } from './webgl' if (WEBGL.isWebGLAvailable()) { // 장면 추가 const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // 카메라 추가 const fov = 75; const aspect = window.innerWidth / window.innerHeight; const near = 0.1; const far = 1000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.x = 0;..
1. 화각 FOV는 Field of view의 약어로 화각이라고 한다. 시야각이라고도 한다. 렌즈의 종류는 광각렌즈, 표준렌즈, 망원렌즈로 크게 3가지다. 1) 망원렌즈 (화각 28도 이하) 오브젝트를 가까이 크게 보이게 하고 싶다면, 망원으로 표현해야 한다. 그러기 위해서는 화각이 좁아야 한다. 대략 8~28도 정도이다. 2) 표준렌즈 (화각 47도) 평범하게 보여주고 싶을 때 쓴다. 3) 광각렌즈 (화각 63~84도) 망원렌즈의 특징은 화각이 좁고, 멀리있는 피사체를 가까이 있는 것처럼 확대해서 촬영할 수 있다. 그만큼 사진 속에 담기는 영역이 좁게 표현된다. 즉, 마을과 도시같은 부분을 표현하고 싶다면 광각으로 표현한다. 2. 카메라 설정 // 카메라 const fov = 47; const aspe..
