프론트엔드 첫걸음

import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; window.addEventListener("load", function () { init(); }); function init() { const renderer = new THREE.WebGLRenderer({ antialias: true, }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const scene = new THREE.Scene(); const camera = n..

https://threejs.org/docs/?q=Buffer#api/en/core/BufferGeometry three.js docs threejs.org BufferGeometry안에 정점에 대한 정보를 담아서 Geometry를 만들 수 있다. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, innerWidth / innerHeight, 0.1, 1000 ); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(innerWidth, innerHeight); renderer.setPixelRatio(device..

gsap으로 rotation을 바꾸고 렌더함수를 루프시키면 렌더링될 때 마다 바뀐 rotation으로 렌더링된다 만약 그냥 자연스럽게 회전하는 것이 아니라 단순히 각도만 바꿔주려면 renderer(scene,camera)를 렌더함수에 넣지 않고 gsap 함수 호출 후 renderer(scene,camera) 만 사용하면 된다. See the Pen gsap rotating cube by JEONG (@cona) on CodePen.

설명 궤도 컨트롤을 사용하면 카메라가 대상 주위를 선회할 수 있습니다. 사용자의 마우스 이벤트를 감지하여, 카메라를 이동시키거나 회전시키는 등의 작업을 수행합니다. 그러나 이러한 변화를 실제로 적용하려면 매 프레임마다 update 메서드를 호출하여 카메라의 변화를 적용해 주어야 합니다. update를 호출해야 할 때 카메라 시점 수동으로 바꿀 때 OrbitControls가 카메라의 위치, 시점을 바꾸는 역할을 하기 때문에, 사용자가 직접 카메라의 위치를 바꾸는 경우 변경 후에 OrbitControls 클래스의 update() 메서드를 호출하여 카메라의 위치와 시점 등을 업데이트해야 합니다. (그래야 OrbitControls 클래스가 제공하는 인터랙션 기능과 수동으로 변경된 카메라 위치나 시점 등이 일치함..

function handleResize() { camera.aspect = window.innerWidth / window.innerHeight; //카메라의 종횡비 수정 camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); //렌더러 사이즈 수정 renderer.render(scene, camera); //재렌더링 } window.addEventListener('resize', handleResize);

The WebGL renderer displays your beautifully crafted scenes using WebGL. WebGLRenderer 는 WebGL을 이용해서 예쁘게 만들어진 화면을 보여준다. 생성자(optional) canvas 렌더러가 그것의 결과를 그릴 canvas domElement 속성과 일치body에 canvas를 붙이겠다는 의미 const renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); antialias 안티앨리어싱을 할 것인가 alpha 투명도 . 아무것도 없는 공간은 투명하게 보이도록 설정 default는 false (1): 불투명 , true (0) : 투명 속..

three.js-master.zip 다운로드 https://threejs.org/ [Three.js – JavaScript 3D Library threejs.org](https://threejs.org/) js 파일 직접 참조 참조하는 js 파일에 다운받은 three.js 코어 파일 경로 적어줌 main.js //import * as THREE from "three"; import * as THREE from "./three.module.js"; //import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import * as THREE from "./OrbitControls.js"; import ~~ from &#39..

더해진것들? three.js의 핵심은 3D engine에 집중하고, 유용한 컴포넌트들(controls, loaders, 전처리효과등등)은 examples/jsm 폴더에 있다. 이것들을 Addons라고 한단다. 이전엔 examples라고 했다지.. 얘네들은 그대로( off the shelf , 기성품으로) 사용할수도 있고 재조합 및 커스터마이징 할 수 있어서 examples라고 하는데, 다른 서드파티 패키지들은 업데이트되고 변경되는 반면 얘네들은 최신버전이 반영안됨. 그러니까 업데이트는 필요없지만 반드시 개별적으로 import 해줘야 함. npm으로 install 한 상태에서도 OrbitControls를 사용하려면 three/addons/~ 에서 따로 import 해줘야 한다는 것! import { Orb..