그래픽스/Three.js (5) 썸네일형 리스트형 gltfLoader에서 에러가 날 때 / type="module"을 사용할 때 개념 import할 때 three.js 스크립트 대신 'three.module.js'를 사용하면 오류가 나지 않는다. renderer에서 'renderer.outputEncoding = THREE.sRGBEncoding;' 을 입력하면 load한 모델의 색이 조명에 따라 변하지 않는다 gltf 오브젝트 출력하기 개념 three.js에서도 오브젝트를 만들 수 있지만, 3d max같은 프로그램에서 오브젝트를 만들어 그걸 출력하는 편이 좋다. 참고자료 //three.js에서 gltf 출력하기 https://velog.io/@9rganizedchaos/Three.js-journey-%EA%B0%95%EC%9D%98%EB%85%B8%ED%8A%B8-21 Learning Three.js - 3장 빛 관련 객체 Three.Color 개요 Three.js의 모든 빛 객체는 Three.Color 객체를 통해 색상값을 받는다. 그러나 빛 객체는 보통 인자로 '정수' 값을 전달받는다. 이는 빛 객체의 생성자에 의해 정수값을 이용한 Three.Color 객체를 생성하기 때문이다. 인자로 정수값 대신 Three.Color 객체를 전달해도 무리 없이 잘 작동한다. 아예 정수값이 아니라 아래에 나온 헥사 문자열을 전달해도 된다(rgb값은 전달하면 안된다, 인자가 너무 많아져서 그런듯). Light 객체들은 초기 설정 이후 색을 변경하고 싶으면 color 속성의 값을 변경하면 되는데 이 때는 Three.Color 객체 값을 전달해야 한다. 인자 전달 세 가지 방식으로 전달할 수 있다. 헥사 문자열 - "#0c0c.. Learning Three.js - 2장 개념 Scene의 3요소 카메라 조명 오브젝트(객체) 자식 Three.js는 자식 객체를 리스트로 관리한다. 지오메트리(물체) 지오메트리는 기본적으로 3D 공간에서 점(꼭지점이라 불린다)들과 이 점들을 연결하는 면들의 집합을 말한다. Three.js에서 면은 항상 삼각형을 만드는 세 개의 꼭지점으로 구성된다. 따라서 정육면체의 경우 각 면은 두 개의 삼각형으로 구성된다. Three.js가 제공하는 지오메트리를 사용할 경우 꼭지점과 면들을 직접 정의할 필요가 없다. 하지만 수동으로 꼭지점과 면을 사용해 지오메트리를 생성하는 것도 가능하다. 생성방법 var vertices = [ new THREE.Vector3( ,, ) ... ] : 정점의 목록을 담은 객체를 생성한다. var faces = [ new T.. Learning Threejs - 1장 Renderer Renderer - WebGLRenderer외에도 다양한 렌더러가 있다. 다만 WebGL 만이 그래픽카드를 사용한다. 다른 Renderer는 cpu에 부하를 주며 material과 shadow를 사용할 수 없다. 그림자 - 그림자의 렌더링은 컴퓨팅 파워가 많이 필요하기 때문에 기본적으로 비활성화 되어있다. 실험을 위한 다양한 기능들 애니메이션 requestAnimationFrame 애니메이션의 재생을 위해선 특정한 간격으로 장면을 리렌더링해야한다. 이를 위해 js의 함수를 사용한다. requestAnimationFrame( ) : 해당 함수를(render를 처리하는 함수를 넣으면 된다) 정해진 간격으로 실행하도록 한다. function renderScene(){ requestAnimati.. 이전 1 다음
