# ThreeJS

20개의 포스트
post-thumbnail

Three.js로 3D 웹 쉽게 구현하기

들어가며 왜 관심을 가지게 되었나 학교를 (드디어) 졸업했다. 요즘은 그 동안 해보고 싶었던 개발을 마음껏 하면서 시간을 보내고 있다. 최근 노코드 툴을 사용한 게임 개발을 마치고, JS와 관련된 무언가를 해보고 싶었던 참에 회사 동료분께서 한 사이트를 공유해 주셨

2022년 7월 27일
·
0개의 댓글
·
post-thumbnail

three.js 정리

예전에 학교다닐때 졸업작품으로 opengl 을 사용해서 프로젝트를 진행한 적이 있었는데... 그때 생각이 나서 인프런 Three.js 강의 를 들으면서 정리하고 웹게임을 만들어 볼려고 한다.

2022년 7월 5일
·
0개의 댓글
·
post-thumbnail

클래스에 대하여

threeJS와 유니티를 활용한 클래스 설명

2022년 6월 2일
·
0개의 댓글
·
post-thumbnail

threejs note - 개발을 편리하게 해주는 도구들(Utility)

Axes(축), Grid 헬퍼 내가 표현하고자 한 mesh 가 어디쯤에 있는지 알고 싶을 때 쓰면 좋겠다..? AxesHelper 별건 없다. three js 에서 이미 제공하고 있다. 축을 보여주는 놈. 생성자에 넘기는 숫자는 길이를 말한다. 자세한 건 아래 링

2022년 5월 10일
·
0개의 댓글
·
post-thumbnail

threejs note - transform

position (위치 변환) Vector3 사용법 scale (크기 변환) rotate (회전) 물체(Mesh)를 y 축으로 45도, x 축으로 20도를 돌린다고 가정하고 위와 같이 작성하면 아마 의도와 다르게 회전이 될 것이다. 이유인 즉슨 처음에 y 축으로

2022년 5월 10일
·
0개의 댓글
·
post-thumbnail

threejs note - animation

studiomeal 님의 'three.js로 시작하는 3D 인터랙티브 웹' 강의를 듣고 단순 정리한 것임을 밝힘쓰.(보는 이에 대한 친절을 염두하지 않은 글) requestAnimationFrame() 새로운 동작 또는 업데이트를 할 경우 렌더링 되기 전에 이 함수를

2022년 5월 10일
·
0개의 댓글
·
post-thumbnail

threejs note - Scene과 아이들

studiomeal 님의 'three.js로 시작하는 3D 인터랙티브 웹' 강의를 듣고 단순 정리한 것임을 밝힘쓰.(보는 이에 대한 친절을 염두하지 않은 글) Scene - 무대/장면 3d로 구현될 화면을 연극 무대로 가정한다면, 이 무대가 바로 scene (장면)

2022년 5월 10일
·
0개의 댓글
·
post-thumbnail

ThreeJs (3) Scene Graph

Geometry는 material과 함께 mesh를 구성하는 요소이다. 3차원 객체의 형상 등을 정의한다. material은 3차원 객체의 색상이나 투명도 등을 정의한다. mesh는 3차원 객체를 화면에 표시하기 위한 클래스이며 Object3D의 파생 클래스이다.Obj

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

ThreeJs (3) Geometry

BoxGeometry 정육면체 (가로, 세로, 깊이)면이 회색으로 채워지고 외곽선이 노란색으로 표시되는 육면체로 변경BoxGeometry는 가로, 세로, 깊이에 대한 크기와 함께 가로, 세로, 깊이 각각에 대한 분할(Segments)수로 정의, 지정하지 않으면 기본값이

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

ThreeJs (2) Geometry

Mesh (Object3D) Mesh를 생성할 때 mesh의 형상을 정의하는 geometry와 색상이나 투명도 등을 지정할 수 있는 material이 필요하다. Geometry 3차원 오브젝트의 형상을 정의한다. 형상을 정의하기 위한 데이터는? 정점 형상을 정의하는

2022년 2월 4일
·
0개의 댓글
·
post-thumbnail

ThreeJS 공부시작!!

Three.js는 웹페이지에 3D객체를 쉽게 렌더링하도록 도와주는 자바스크립트 3D 라이브러리이다.three.js는 WebGL을 사용하여 3D를 그린다.Javascript 를 이용하여 웹에서 사용이 가능한 그래픽 라이브러리 ( Web Graphics Library )단

2022년 1월 29일
·
0개의 댓글
·
post-thumbnail

[Three.js journey 강의노트] 15

🙌🏻 해당 글은 Three.js Journey의 강의 노트입니다.

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

[Three.js journey 강의노트] 14

🙌🏻 해당 글은 Three.js Journey의 강의 노트입니다.

2021년 7월 6일
·
1개의 댓글
·
post-thumbnail

[Three.js journey 강의노트] 01 ~ 03

01 Introduction 가장 먼저 공부할 것은 scene 만들기, object 추가하기, materials 고르기, texture 추가하기 그리고 animation 추가하기! 그 다음 공부할 것은 geometry 만들기, 빛과 그림자, 3D object와의 인터랙

2021년 7월 5일
·
1개의 댓글
·

[21-06-06 TIL] html 태그를 Scene Object에 위치시키기

threejsfundamentals.org

2021년 6월 6일
·
0개의 댓글
·
post-thumbnail

셰이더로 하프톤(Halftone) 만들어보기

간단하고 쉽게 하프톤 효과를 만들어봅니다.

2021년 4월 30일
·
1개의 댓글
·

ThreeJS 7. The main components that you can use to create a Three.js application

챕터 2로 넘어왔습니다. 지금까지 해왔던 내용은 매우 기초적이고 ThreeJS 어플리케이션이 어떻게 만들어질지 대충 알아봤습니다. 지금부터는 조금더 깊게 공부해보겠습니다. ThreeJS를 만들 때 사용할 주요 컴포넌트 복습겸 Scene에 무엇을 보여줄 때 필요한 4가지 요소를 정리해보겠습니다. | Component| Description | |---|...

2019년 12월 22일
·
0개의 댓글
·

ThreeJS 1. 라이브러리 사용 준비

Skelleton.html we'll at least need to load the Three.js library, three.js TrackballControls.js, which allows you to use your mouse to rotate and pan around the scenes. In the element of this page, ...

2019년 12월 19일
·
1개의 댓글
·

Three.js 입문

이전부터 HTML5 Canvas에 관심이 많았지만 굉장히 low level의 API에 압도당해서 너무 힘들것같아서 포기했다. 하지만 이번에 Three.js 라는 WebGL을 사용하는 웹기반의 3D 렌더링을 제공해주는 라이브러리를 보고 다시 공부해야겠다고 마음먹고 공부를

2019년 12월 19일
·
5개의 댓글
·