Three JS Primer for Game Programmer Tutorial files

Three. JS Primer for Game Programmer Tutorial files are available here 程式碼在哪裡 ？ （見下頁）

從這個url可知 https: //jyunming-chen. github. io/game 3 js/tutorial/tut 1. html • 我的github ID是 jyunming-chen • 相關的repository是 game 3 js 按 此 下 載 Fall 2016 2

Basic Concepts Coordinate System, Scene, Camera Fall 2016 The same as Open. GL, Web. GL 3

+Y Object 3 D (三角網格) A base class for camera, mesh, … (concept of local coordinate frame) Specify its configuration by setting: • Object 3 D. position • Object 3 D. rotation (Euler angles ‘xyz’) Fall 2016 4

Camera Fall 2016 Camera. position Camera. look. At (Vector 3) 5

(Often used in 2 D graphics) Fall 2016 6

Basic Framework Where to get three. js? • cdnjs. com What is CDN (content delivery network)? • Distributed network of proxy servers for various internet content See also this note on “using js on the net” In case you go directly from github repository of three. js Fall 2016 7

HTML File Structure (ref) Fall 2016 8

Tut 1: Coordinate system Fall 2016 9

Overflow: hidden Fall 2016 10

Tut 2: Orbit. Controls Fall 2016 11

Tut 2: Resize Fall 2016 12

Object 3 D & Mesh +Y Object 3 D. position Object 3 D. rotation (Euler angles ‘xyz’) Fall 2016 13

Configuring Objects x Primitive Positioning z y x Primitive Grouping Custom Rotation Fall 2016 14

Tut 3: Box. Geometry Fall 2016 15

(three. js documentation) Fall 2016 16

Fall 2016 17

Fall 2016 18

Tut 4: animation Fall 2016 19

Tut 5: animation Fall 2016 20

Tut 6: controls Fall 2016 21

<DIV> & Style Fall 2016 22

Tut 61: j. Query Button <div id = ‘show’></div> Fall 2016 for on-screen display … 23

Tut 62: Keyboard Control Fall 2016 24

Exercises Fall 2016 25