본문 바로가기

3D Project

 (10)
3D Animation scroll Web 유튜브에서 스크롤에 따라 3D 모델이 회전하고 특 시점에서는 바코드 효과음 소리가 나면서 3D 모델이 사라지는 웹을 소개하는 영상을 보았다. 3D 모델을 웹에 적용하는 것에 흥미를 느끼는 나로서는 어떻게 이런 인터랙션을 구현한 것인지 궁금했다. 다행히 영상에서 구현 코드를 함께 소개해주어 면밀히 파헤쳐 보기로 하였다. 1. html,css로 기본 구조 잡기section별로 범위를 나누었고, 요소들을 대부분 가운데 정렬하였다. 반응형 웹으로 구현하였다.이번에 배운 점은 반응형 웹을 구현하는데 px보다는 em 단위를 쓰는게 훨씬 편하다는 점이다.font-size도 px보다는 vw로 하는 것을 추천.z-index는 position:static(기본값)일 때는 적용되지 않는다.position: absolute,..
[3D 인터랙티브 웹] 3D Scene - 2 렌더링 Three.js 기본세팅 import { mode } from "mathjs"; import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; const canvas = document.createElement("canvas"); document.body.appendChild(canvas); const renderer = new THREE.WebGLRenderer({canvas:canvas, antialias:true}); renderer.setPixelRa..
[3D 인터랙티브 웹] 3D Scene - 1(클릭 인터랙션) 렌더링 기본 Three.js 세팅 import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; const canvas = document.createElement("canvas"); document.body.appendChild(canvas); const renderer = new THREE.WebGLRenderer({canvas:canvas, antialias:true}); renderer.setSize(window.innerWidth, window.innerH..
[3D 인터랙티브 웹] 파티클 시스템/애니메이션 만들기 by Three.js 파티클 시스템 구축 -> 렌더링 최적화를 위해 파티클은 여러개의 3D 동그라미 모델링을 띄우는게 아니라 여러좌표에 동그라미 이미지를 띄우는 방식으로 파티클을 구축한다. BufferGeometry - 정점의 개수와 좌표를 지정할 수 있음. PointsMaterial - 모델링의 정점을 점으로 시각화 시켜주는 메터리얼, Three.js에서 파티클 전용으로 만들어 놓은 메터리얼 파티클 시스템 구현 순서 파티클이 생성될 위치 넣기 - Geometry 생성 파티클 Material 생성 파티클로 합성 //create Particle //파티클 위치 입력하기 let positions = []; //모든 파티클의 위치값을 배열에 넣을것임 // positions.push(Math.random()*2 -1); //0~1 ..
[3D 인터랙티브 웹] 스크롤 인터랙션/애니메이션 적용하기 스크롤 위치 계산하는 방법 -> 현재 스크롤이 전체 스크롤 영역에서 몇 %에 위치해 있는지 구해야함 현재 스크롤의 위치 전체 스크롤 영역 길이 브라우저의 높이 스크롤 가능 영역 계산 : 전체 스크롤 영역 - 브라우저의 높이 코드로 스크롤 계산하기 //스크롤 위치 계산하는 방법 document.body.style.height = "3000px"; window.addEventListener("scroll", (event) => { const currentScroll = document.documentElement.scrollTop; const currentScrollHeight = document.documentElement.scrollHeight; const windowHeight = window.inne..
[3D 인터랙티브 웹] Three.js에서 회전 애니메이션 적용시키기 - 3D 시계 모델링 시계의 시침, 분침, 초침에 회전 적용하는 방법 function Rotate() { scene.getObjectByName("sec").rotation.z = -(Math.PI/180)*90; scene.getObjectByName("min").rotation.z = -(Math.PI/180)*180; scene.getObjectByName("hour").rotation.z = -(Math.PI/180)*265; scene.getObjectByName("orbit").rotation.y = (Math.PI/180)*45; } 실제시간 정보 가져와서 애니메이션 적용하기 function setTime(){ const hour = scene.getObjectByName("hour"); const sec = s..
[3D 인터랙티브 웹] 3D 공간 떠다니기 키보드 입력을 통해 카메라 이동을 이용하여 공간 떠다니기 - eventListener와 연동하여 움직임 주기 eventListener 적용해서 키보드 입력(W, S) 적용하기 import { THREE, GLTFLoader, GenerateCanvas } from "./study/settings"; const canvas = GenerateCanvas(); let camera, scene, renderer, mesh; let originPosition; function init() { renderer = new THREE.WebGLRenderer({ antialias: true, canvas, }); renderer.setPixelRatio(window.devicePixelRatio); renderer...
[3D 인터랙티브 웹] glTF, glb 모델 불러오기, 애니메이션 불러오기 [ 기본 Three.js 세팅 ] import { THREE, OrbitControls, GenerateCanvas } from "./study/settings"; const canvas = GenerateCanvas(); let renderer, scene, camera, controls; function init() { renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 32, window.innerWidth / window.innerHeight ); camera.position.set(0, 0, 10); controls ..

티스토리툴바