WebGL 20150309

10
WEBGL #1 Three.js Mar 09, 2015 - 이준호

Transcript of WebGL 20150309

Page 1: WebGL 20150309

WEBGL #1Three.js

Mar 09, 2015 - 이준호

Page 2: WebGL 20150309

READY예제 & 실습 - 

Three.js - 

Editor - 

GitHub Tool ( GUI ) - 

BSWebGL - 

BSWebGL Blog - 

https://github.com/projectBS/webGL

https://github.com/mrdoob/three.js

https://www.jetbrains.com/idea

http://www.sourcetreeapp.com

https://github.com/projectBS/bsWebGL

http://www.bswebgl.com

Page 3: WebGL 20150309

 makes easy...Three.js

Creating Simple and complex 3D geometries

Animating and moving objects through a 3D scene

Applying textures and materials to your objects

Loading objects from 3D modeling software

Creating 2D sprite-based graphics

Page 4: WebGL 20150309

 CoreThree.js

Scene

Camera

Renderer

Object3D ( Mesh [Geometry, Material] )

Light

http://ligo.kr/r73

Page 5: WebGL 20150309

색을 칠해보자.Material

Light

http://ligo.kr/nhy

http://ligo.kr/y70

Page 6: WebGL 20150309

이동을 해보자.

Stats, GUI

Mesh.position

Vector3

http://ligo.kr/uwt

Page 7: WebGL 20150309

PERSPECTIVE, ORTHOGRAPHICCamera

PerspectiveCamera

OrthographicCamera

http://ligo.kr/nye

Page 8: WebGL 20150309

PerspectiveCamera

45, view width / view height, 0.1, 1000

Page 9: WebGL 20150309

OrthographicCamera

Page 10: WebGL 20150309

THANK YOU