Fork
0
Fav
0
View
381
  • Play

Fullscreen

Smart Phone

  • Readme
  • ES6 44 lines
  • HTML 4 lines
  • CSS 6 lines

three.js: 50行以下でテクスチャつきの箱をマウス操作によるカメラワークで自由に捉える

50行足らずのJavaScriptコードで3次元空間に立方体をつくり、テクスチャを貼る。さらには、オービット/ズーム/パンといったマウス操作によるカメラワークまで仕込む。

マウスによるカメラ操作

  • オービット: ドラッグ
  • ズーム: ホイール
  • パン: 右ボタンドラッグ

Basic example code of less than 50 lines creating a box with texture and controlling the camera with mouse.

Camera control with mouse

  • Orbit - left mouse
  • Zoom - middle mouse, or mousewheel
  • Pan - right mouse, or left mouse + ctrl/meta/shiftKey
  • three.js: Controlling the camera with OrbitControls
  • three.js: Controlling the camera with OrbitControls

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags