52 |
CanvasUI is a UI for WebXR with the Three.JS library.
53 | Download or clone the repo.
Here are some examples to get you started.
55 |CanvasUI
2 | 3 |A Three.JS WebXR UI. Enabling easy UI creation for immersive-vr sessions
4 | 5 |6 | 7 |  8 | 9 |
10 | 11 | ## Use CanvasUI 12 |
13 |
39 |
40 | Get Started
14 | 15 | 16 | [CanvasUI tutorial (youtube) ](https://www.youtube.com/playlist?list=PLFky-gauhF45P5qrGOljUFm3a6HtX5Mfr) 17 | 18 |  19 | > [ONLINE DEMO](https://niksgames.com/webxr/dev/CanvasUI/simple/) 20 | 21 | First, make sure to import **CanvasUI** 22 | ``` 23 | import { CanvasUI } from '../../jsm/CanvasUI.js' 24 | ``` 25 | 26 | Your file structure needs both `three.module.js` and `CanvasKeyboard.js` to be accessible. The repo has the file structure like the Three.js library with the Three.js build loaded from CDN, and extra content in the examples folder. The CanvasUI examples are in the examples/CanvasUI. The class files are in examples/jsm. 27 | 28 | To create a simple text panel use : 29 | ``` 30 | const ui = new CanvasUI( ); 31 | ui.mesh.position.set(0, -0.5, -1); 32 | ui.updateElement("body", "Hello World" ); 33 | 34 | scene.add(ui.mesh); 35 | ``` 36 | 37 | A CanvasUI mesh is simply a plane that is 1 x 1 units. In a VR world this means it is 1 metre square. It has a *CanvasTexture* applied, by default this is 512 pixels square. An Arial font is applied and the size of the font is 30 pixels. There is 20 pixels of padding. The font color is white and the background color is black and the canvas will have 6 pixel radius rounded corners. 38 |
41 |
115 |
116 | ## Examples
117 | Contributing
42 | 43 | Found a bug ? Want to contribute ? Do not hesitate to open a ticket ! 44 | 45 | Please `git clone` or `download zip file` from the repo. 46 | 47 | Use [devsrv](https://github.com/eviltik/devsrv) npm module as a webserver is welcome, explanations below. 48 | 49 | In VSCode, you can use [Live Server addon](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) but only for testing generated builds, or, work without `devsrv` string replacement features. 50 | 51 | 52 | ## devsrv (nodejs module)... 53 | 54 | ### ... as a webserver 55 | 56 | `devsrv` is a custom *self signed HTTPS* (*required for webxr*) development webserver, which monitor file changes for hot reload and handle dynamic string replacement in HTML/JS/CSS files. So you can play with different Three.js versions without spending time to replace path/url yourself. We don't use webpack atm. 57 | 58 | Prerequies: you need to have [nodejs](https://nodejs.org/) installed on your computer. 59 | 60 | After cloning or unzip the repo, install `CanvasUI` dependencies. 61 | ``` 62 | $ npm install 63 | ``` 64 | It will install `devsrv` npm module in a `node_modules/` directory. 65 | 66 | Then you can start the webserver. 67 | ``` 68 | $ npm start 69 | ``` 70 | or 71 | ``` 72 | $ node node_modules/@eviltik/devsrv/bin/devsrv.js 73 | ``` 74 | 75 | You can find all interesting `devsrv` command line options [here](https://github.com/eviltik/devsrv) 76 | 77 | `devsrv` will search for and will use the first private IP Address found on your computer (i.e wifi or network card ip addr). After starting the server, you can use Google Chrome with WebXR addon, or simply your headset browser (i.e Oculus Browser for Oculus Quest, or Firefox Reality) 78 | 79 | ### ... as a static file builder 80 | 81 | In HTML/JS CanvasUI lib and examples files, you can see this: 82 | 83 | ``` 84 | import * as THREE from 'https://cdn.skypack.dev/three@THREEJSVERSION'; 85 | ``` 86 | 87 | `THREEJSVERSION` is a string dynamically replaced by `devsrv`. The value to replace with is defined in the configuration file `devsrv.config.json`. Thanks to `devsrv` dynamic string replacement feature, you can change the value directly in the URL, by adding "?r=0.135" in the URL, where 0.135 is the release number of threejs CDN side. If you use `devsrv` dynamic string replacement feature, you can NOT copy directly HTML files from /eaxmples directory, you need to generate static files. `devsrv` will take this point too. 88 | 89 | To trigger a CanvasUI build : 90 | ``` 91 | $ npm build 92 | ``` 93 | or 94 | ``` 95 | $ node node_modules/@eviltik/devsrv/bin/devsrv.js -b 96 | ``` 97 | 98 | Build options are defined in `devsrv.config.json` 99 | ``` 100 | "buildOptions": { 101 | "src":"./examples", 102 | "dst":"./dist/v1.0.0/threejs.119", 103 | "replaceRegexp":"THREEJSVERSION", 104 | "defaultValue":"0.119", 105 | "fileRegexp":"\\.(html|js)$" 106 | } 107 | ``` 108 | 109 | Then you can use `devsrv` (or any https webserver, vscode live server) again to serve the generated files : 110 | ``` 111 | $ node node_modules/@eviltik/devsrv/bin/devsrv.js -d ./dist/v1.0.0/threejs.119 112 | ``` 113 | 114 |
118 |
176 |
177 |
178 | Panel : Header, Main, Footer
119 | 120 | 121 |  122 | 123 | > [ONLINE DEMO](https://niksgames.com/webxr/dev/CanvasUI/panel/) 124 | 125 | In general CanvasUI is designed to have a content object and a config object. Let's try an example with multiple elements. 126 | ``` 127 | const config = { 128 | header:{ 129 | type: "text", 130 | position:{ top:0 }, 131 | paddingTop: 30, 132 | height: 70 133 | }, 134 | main:{ 135 | type: "text", 136 | position:{ top:70 }, 137 | height: 372, // default height is 512 so this is 512 - header height (70) - footer height (70) 138 | backgroundColor: "#bbb", 139 | fontColor: "#000" 140 | }, 141 | footer:{ 142 | type: "text", 143 | position:{ bottom:0 }, 144 | paddingTop: 30, 145 | height: 70 146 | } 147 | } 148 | 149 | const content = { 150 | header: "Header", 151 | main: "This is the main text", 152 | footer: "Footer" 153 | } 154 | 155 | const ui = new CanvasUI( content, config ); 156 | ``` 157 | Each element has a section in the config and the content objects. Notice that these are all of type **text**. We can set the position using x, y, left, top, right and bottom. The values are in relation to a default texture that is 512 pixels square. Colors are defined like css values. If an attribute is missing it will be inherited from the body which has these defaults. 158 | 159 | ``` 160 | defaultconfig = { 161 | panelSize: { width: 1, height: 1}, 162 | width: 512, 163 | height: 512, 164 | opacity: 0.7, 165 | body:{ 166 | fontFamily:'Arial', 167 | fontSize:30, 168 | padding:20, 169 | backgroundColor: '#000', 170 | fontColor:'#fff', 171 | borderRadius: 6 172 | } 173 | } 174 | ``` 175 |
179 |
265 |
266 |
267 | Panel : Custom Shaped Panels with a custom font
180 | 181 | 182 |  183 | 184 | > [DEMO](https://niksgames.com/webxr/dev/CanvasUI/shaped/) 185 | 186 | The default shape for a UI panel is a square or rounded rectangle. But you can define a shape using an svg path. Limitless possibilities. 187 | 188 | ``` 189 | const css = { 190 | body: { 191 | clipPath: "M 258.3888 5.4432 C 126.9744 5.4432 20.4432 81.8424 20.4432 164.4624 C 20.4432 229.1976 86.3448 284.2128 178.1016 304.8192 C 183.5448 357.696 173.2416 444.204 146.8032 476.6688 C 186.6552 431.9568 229.2288 356.5296 244.7808 313.3728 C 249.252 313.3728 253.9176 313.7616 258.3888 313.7616 C 389.8032 313.7616 496.14 246.888 496.14 164.4624 S 389.8032 5.4432 258.3888 5.4432 Z", 192 | backgroundColor: "#ddd", 193 | fontColor: "#000", 194 | fontFamily: "Gochi Hand" 195 | }, 196 | speech: { 197 | type: "text", 198 | position: { left: 50, top: 80 }, 199 | fontSize: 45, 200 | fontColor: "#000", 201 | width: 400, 202 | height: 250 203 | } 204 | } 205 | 206 | const content = { 207 | speech: "A custom shaped panel. How about that?" 208 | } 209 | 210 | const ui = new CanvasUI( content, css ); 211 | ``` 212 | 213 | You can generate the code for a path using [this](https://yqnn.github.io/svg-path-editor/) online tool. 214 | 215 | ### Custom FontS 216 | 217 | Notice that this example uses a custom Google Font. But you can NOT just load it in the index.html page simply by using 218 | ``. :exclamation: 219 | 220 | See [stackoverflow](https://stackoverflow.com/questions/69367436/load-local-font-from-assets-in-mounted-method-in-vue) :eyes: to see possible circumventions. 221 | 222 | In this example, we use [FontFace API](https://caniuse.com/mdn-api_fontface) circumvention, waiting for the font to be loaded before initializing the application. 223 | 224 | We need the font URL. Opening https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap give this : 225 | ``` 226 | /* latin */ 227 | @font-face { 228 | font-family: 'Gochi Hand'; 229 | font-style: normal; 230 | font-weight: 400; 231 | font-display: swap; 232 | src: url(https://fonts.gstatic.com/s/gochihand/v14/hES06XlsOjtJsgCkx1Pkfon_-w.woff2) format('woff2'); 233 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 234 | ``` 235 | 236 | Let's use the woff2 URL from the `src` attribute as parameters of the [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace). 237 | 238 | 239 | ``` 240 | 260 | ``` 261 | 262 | 263 | **So, Yes ! All web fonts will work with CanvasUI.** 264 |
268 | M 10 32 L 54 10 L 54 54 Z ",
397 | stop: "M 50 15 L 15 15 L 15 50 L 50 50 Z",
398 | next: "M 54 32 L 10 10 L 10 54 Z ",
399 | continue: "Continue"
400 | }
401 |
402 | ui = new CanvasUI( content, config );
403 | ```
404 |
405 | We define the `panelSize`, which is in world units, metres for a VR session. We also set the panel height to 128 pixels. Width will default to 512. The width and height must be powers of 2.
406 |
407 | :exclamation: Panelsize can be anything but if the aspect ratio of panelSize.width/panelSize.height is different to width/height then the text will be stretched.
408 |
409 | If the content of a button starts with `` then an svg path will be filled with the `backgroundColor`.
410 |
411 | Notice also in the config for a button the hover attribute is the background color to use when the controller ray is over the button.
412 |
413 | When buttons are used always pass the `renderer` in the config object. This ensures that CanvasUI can add events to the controllers.
414 |
415 |
416 | Buttons
269 | 270 | 271 |  272 | 273 | > [ONLINE DEMO](https://niksgames.com/webxr/dev/CanvasUI/buttons/) 274 | 275 | So far we've only added text elements to the UI. In this example we'll add **buttons**. Buttons work by detecting the movement and trigger button on your VR controllers. To ensure that they work correctly, add this to the renderers animation loop. 276 | 277 | ``` 278 | ui.update(); 279 | ``` 280 | 281 | The CanvasUI class detects your controllers but does not display them. To ensure a visual representation of the controllers. Use the usual code. For example. 282 | 283 | ``` 284 | const controllerModelFactory = new XRControllerModelFactory(); 285 | 286 | // left controller 287 | controller = renderer.xr.getController( 0 ); 288 | scene.add( controller ); 289 | 290 | controllerGrip = renderer.xr.getControllerGrip( 0 ); 291 | controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) ); 292 | scene.add( controllerGrip ); 293 | 294 | // right controller 295 | controller1 = renderer.xr.getController( 1 ); 296 | scene.add( controller1 ); 297 | 298 | controllerGrip1 = renderer.xr.getControllerGrip( 1 ); 299 | controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) ); 300 | scene.add( controllerGrip1 ); 301 | 302 | // line geometry 303 | const geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, -1 ) ] ); 304 | 305 | const line = new THREE.Line( geometry ); 306 | line.name = 'line'; 307 | line.scale.z = 10; 308 | 309 | controller.add( line.clone() ); 310 | controller1.add( line.clone() ); 311 | ``` 312 | 313 | Here is a simple example of using buttons : 314 | 315 | ``` 316 | //Make sure ui is a global scope variable 317 | let ui; 318 | 319 | function onPrev(){ 320 | const msg = "Prev pressed"; 321 | console.log(msg); 322 | ui.updateElement( "info", msg ); 323 | } 324 | 325 | function onStop(){ 326 | const msg = "Stop pressed"; 327 | console.log(msg); 328 | ui.updateElement( "info", msg ); 329 | } 330 | 331 | function onNext(){ 332 | const msg = "Next pressed"; 333 | console.log(msg); 334 | ui.updateElement( "info", msg ); 335 | } 336 | 337 | function onContinue(){ 338 | const msg = "Continue pressed"; 339 | console.log(msg); 340 | ui.updateElement( "info", msg ); 341 | } 342 | 343 | const config = { 344 | panelSize: { 345 | width: 2, 346 | height: 0.5 347 | }, 348 | height: 128, 349 | info: { 350 | type: "text", 351 | position:{ left: 6, top: 6 }, 352 | width: 500, 353 | height: 58, 354 | backgroundColor: "#aaa", 355 | fontColor: "#000" 356 | }, 357 | prev: { 358 | type: "button", 359 | position:{ top: 64, left: 0 }, 360 | width: 64, 361 | fontColor: "#bb0", 362 | hover: "#ff0", 363 | onSelect: onPrev 364 | }, 365 | stop: { 366 | type: "button", 367 | position:{ top: 64, left: 64 }, 368 | width: 64, 369 | fontColor: "#bb0", 370 | hover: "#ff0", 371 | onSelect: onStop 372 | }, 373 | next: { 374 | type: "button", 375 | position:{ top: 64, left: 128 }, 376 | width: 64, 377 | fontColor: "#bb0", 378 | hover: "#ff0", 379 | onSelect: onNext 380 | }, 381 | continue: { 382 | type: "button", 383 | position:{ top: 70, right: 10 }, 384 | width: 200, 385 | height: 52, 386 | fontColor: "#fff", 387 | backgroundColor: "#1bf", 388 | hover: "#3df", 389 | onSelect: onContinue 390 | }, 391 | renderer 392 | } 393 | 394 | const content = { 395 | info: "", 396 | prev: "
417 |
457 |
458 | Scrolling
418 | 419 | 420 |  421 | 422 | > [ONLINE DEMO](https://niksgames.com/webxr/dev/CanvasUI/scrolling/) 423 | 424 | If a section of text cannot fit in the space available then you can allow it to scroll. Because this needs to use VR controllers, you need to follow the same rules as for buttons. 425 | 426 | 1. Add `renderer` to the config object passed to the CanvasUI constructor. 427 | 2. Create a visualisation of the xr controllers in the usual way. See the buttons section for an example. 428 | 3. Add `ui.update()` to the render loop. 429 | 430 | The most important attribute of a text type, to enable scrolling, is to use `overflow: scroll`. The default is to simply hide the text that is beyond the limits of the text element area. If you want to see a blue dot where the controller ray hits the scrolling canvas, then also pass scene in the config object. 431 | 432 | ``` 433 | const config = { 434 | renderer, 435 | scene, 436 | body: { 437 | backgroundColor: "#666" 438 | }, 439 | txt: { 440 | type: "text", 441 | overflow: "scroll", 442 | position: { left: 20, top: 20 }, 443 | width: 460, 444 | height: 400, 445 | backgroundColor: "#fff", 446 | fontColor: "#000" 447 | } 448 | } 449 | 450 | const content = { 451 | txt: "This is an example of a scrolling panel. Select it with a controller and move the controller while keeping the select button pressed. In an AR app just press and drag. If a panel is set to scroll and the overflow setting is 'scroll', then a scroll bar will appear when the panel is active. But to scroll you can just drag anywhere on the panel. This is an example of a scrolling panel. Select it with a controller and move the controller while keeping the select button pressed. In an AR app just press and drag. If a panel is set to scroll and the overflow setting is 'scroll', then a scroll bar will appear when the panel is active. But to scroll you can just drag anywhere on the panel." 452 | } 453 | 454 | ui = new CanvasUI( content, config ); 455 | ``` 456 |
459 |
493 |
494 | Images
460 | 461 | 462 |  463 | 464 | > [ONLINE DEMO](https://niksgames.com/webxr/dev/CanvasUI/images/) 465 | 466 | You can display an image on the UI panel using CanvasUI. It is easily added using a img type. 467 | 468 | ``` 469 | const config = { 470 | image: { 471 | type: "img", 472 | position: { left: 20, top: 20 }, 473 | width: 472 474 | }, 475 | info: { 476 | type: "text", 477 | position: { top: 300 } 478 | } 479 | } 480 | 481 | const content = { 482 | image: "../../assets/promo.jpg", 483 | info: "The promo image from the course: Learn to create WebXR, VR and AR, experiences using Three.JS" 484 | } 485 | 486 | ui = new CanvasUI( content, config ); 487 | ``` 488 | 489 | Notice that the config defines the positioning and size. Here only the width is specified, the height will be calculated from the image, to maintain the correct aspect ratio. If you want the image stretched then directly entering a height value will force this. The content for the image is the path to the image, either an absolute path or relative. 490 | *The element name in the config and the content can be anything you choose, it does not have to be 'image'* 491 | 492 |
495 |
547 |
548 | Input text
496 | 497 | 498 |  499 | 500 | > [DEMO](https://niksgames.com/webxr/dev/CanvasUI/keyboard/) 501 | 502 | CanvasUI supports a dynamic keyboard. Specify a config type as `input-text` and on select a keyboard will be shown. In common with any button type it has the usual requirements. 503 | 504 | 1. Add `renderer` to the config object passed to the CanvasUI constructor. 505 | 2. Create a visualisation of the xr controllers in the usual way. See the buttons section for an example. 506 | 3. Add `ui.update()` to the render loop. 507 | 508 | Input text has callbacks for onChanged and onEnter. Here is an example. 509 | 510 | ``` 511 | function onChanged( txt ){ 512 | console.log( `message changed: ${txt}`); 513 | } 514 | 515 | function onEnter( txt ){ 516 | console.log(`message enter: ${txt}`); 517 | } 518 | 519 | const config = { 520 | renderer: this.renderer, 521 | panelSize: { width: 1.6, height: 0.4 }, 522 | height: 128, 523 | message: { 524 | type: "input-text", 525 | position: { left: 10, top: 8 }, 526 | height: 56, 527 | width: 492, 528 | backgroundColor: "#ccc", 529 | fontColor: "#000", 530 | onChanged, 531 | onEnter 532 | }, 533 | label: { 534 | type: "text", 535 | position: { top: 64 } 536 | } 537 | } 538 | 539 | const content = { 540 | message: "", 541 | label: "Select the panel above." 542 | } 543 | 544 | ui = new CanvasUI( content, config ); 545 | ``` 546 |
549 |
586 |
587 | ## Links
588 | - :eyes: [My courses](http://niklever.com/courses)
589 | -  [FB Three.JS Group](https://www.facebook.com/groups/nikthreejs)
590 | -  [Twitter](https://twitter.com/NikLever)
591 | -  [YouTube Channel](https://youtube.com/c/NikLever)
592 | -  [nik.j.lever@gmail.com](mailto:nik.j.lever@gmail.com)
593 |
594 |
595 |
--------------------------------------------------------------------------------
/devsrv.config.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | clientRedirects:[
3 | {
4 | urlSrc:"/",
5 | redirectTo:"/examples/index.html"
6 | }
7 | ],
8 | textReplacements: [
9 | {
10 | queryVar:"r",
11 | queryVarRegexp:/^0\.[0-9]{3}$/,
12 | replaceRegexp:/0\.135/g,
13 | defaultValue:"0.135",
14 | pathRegexp:/\.(html|jsm?)|(\/)$/
15 | },{
16 | replaceRegexp:/\/g,
17 | defaultValue:'',
18 | pathRegexp:/\.(html|jsm?)|(\/)$/
19 | }
20 | ],
21 | buildOptions:{
22 | src:"./examples",
23 | dst:"./dist/examples",
24 | replaceRegexp:/THREEJSVERSION/g,
25 | defaultValue:"0.135",
26 | fileRegexp:/\.(html|js)$/
27 | },
28 | monitorOptions:{
29 | enable:true,
30 | directories:[ './' ],
31 | fileRegexp:/\.(html|jsm?)$/,
32 | excludeRegexp:/node_modules/
33 | }
34 | }
35 |
36 | module.exports = config;
--------------------------------------------------------------------------------
/examples/CanvasUI/buttons/app.js:
--------------------------------------------------------------------------------
1 | // see devsrv.config.json for threejs version dynamically replaced by devsrv
2 | import * as THREE from 'https://cdn.skypack.dev/three@0.135';
3 | import { BoxLineGeometry } from 'https://cdn.skypack.dev/three@0.135/examples/jsm/geometries/BoxLineGeometry.js';
4 | import { XRControllerModelFactory } from 'https://cdn.skypack.dev/three@0.135/examples/jsm/webxr/XRControllerModelFactory.js';
5 |
6 | import { CanvasUI } from '../../jsm/CanvasUI.js'
7 | import { VRButton } from '../../jsm/VRButton.js';
8 |
9 | class App{
10 | constructor(){
11 | const container = document.createElement( 'div' );
12 | document.body.appendChild( container );
13 |
14 | this.camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
15 | this.camera.position.set( 0, 1.6, 0 );
16 |
17 | this.scene = new THREE.Scene();
18 | this.scene.background = new THREE.Color( 0x505050 );
19 | this.scene.add( this.camera );
20 |
21 | this.scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
22 |
23 | const light = new THREE.DirectionalLight( 0xffffff );
24 | light.position.set( 1, 1, 1 ).normalize();
25 | this.scene.add( light );
26 |
27 | this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true } );
28 | this.renderer.setPixelRatio( window.devicePixelRatio );
29 | this.renderer.setSize( window.innerWidth, window.innerHeight );
30 | this.renderer.outputEncoding = THREE.sRGBEncoding;
31 |
32 | container.appendChild( this.renderer.domElement );
33 |
34 | this.initScene();
35 | this.setupXR();
36 |
37 | window.addEventListener('resize', this.resize.bind(this) );
38 | }
39 |
40 | initScene(){
41 | this.room = new THREE.LineSegments(
42 | new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ),
43 | new THREE.LineBasicMaterial( { color: 0x808080 } )
44 | );
45 | this.room.geometry.translate( 0, 3, 0 );
46 | this.scene.add( this.room );
47 |
48 | this.createUI();
49 | }
50 |
51 | createUI() {
52 | const self = this;
53 |
54 | function onPrev(){
55 | const msg = "Prev pressed";
56 | console.log(msg);
57 | self.ui.updateElement( "info", msg );
58 | }
59 |
60 | function onStop(){
61 | const msg = "Stop pressed";
62 | console.log(msg);
63 | self.ui.updateElement( "info", msg );
64 | }
65 |
66 | function onNext(){
67 | const msg = "Next pressed";
68 | console.log(msg);
69 | self.ui.updateElement( "info", msg );
70 | }
71 |
72 | function onContinue(){
73 | const msg = "Continue pressed";
74 | console.log(msg);
75 | self.ui.updateElement( "info", msg );
76 | }
77 |
78 | const config = {
79 | panelSize: { width: 2, height: 0.5 },
80 | height: 128,
81 | info: { type: "text", position:{ left: 6, top: 6 }, width: 500, height: 58, backgroundColor: "#aaa", fontColor: "#000" },
82 | prev: { type: "button", position:{ top: 64, left: 0 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onPrev },
83 | stop: { type: "button", position:{ top: 64, left: 64 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onStop },
84 | next: { type: "button", position:{ top: 64, left: 128 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onNext },
85 | continue: { type: "button", position:{ top: 70, right: 10 }, width: 200, height: 52, fontColor: "#fff", backgroundColor: "#2659a4", hover: "#3df", onSelect: onContinue },
86 | renderer: this.renderer
87 | }
88 |
89 | const content = {
90 | info: "",
91 | prev: "Color Picker
550 | 551 |  552 | > [DEMO](https://niksgames.com/webxr/dev/CanvasUI/colorPicker/) 553 | 554 | 555 | ``` 556 | 557 | function onChange(hex) { 558 | console.log(`Picker color changed to (${hex})`); 559 | myMesh.material.color.set( hex ); 560 | } 561 | 562 | const config = { 563 | picker: { 564 | type: "picker", 565 | position: { left: 20, top: 20 }, 566 | width:472, 567 | height:422, 568 | onChange 569 | }, 570 | info: { 571 | type: "text", 572 | position: { left: 20, top: 452 }, 573 | fontSize:18 574 | }, 575 | opacity: 1 576 | } 577 | 578 | const content = { 579 | picker: "#00ff00", 580 | info: "Use the color picker to add an option to select a color" 581 | } 582 | 583 | this.ui = new CanvasUI( content, config ); 584 | ``` 585 |
44 |
45 |
46 | 
CanvasUI
45 |
48 |
49 |
50 |
51 |
56 |
57 |
70 |
71 |
72 |
73 |
78 |
79 |
--------------------------------------------------------------------------------
/examples/js/devsrv-monitor.js:
--------------------------------------------------------------------------------
1 |
2 | function devsrvMonitorFileChanges() {
3 |
4 | const evtSource = new EventSource( '/devsrv' );
5 | evtSource.addEventListener( 'reload', reload );
6 | evtSource.onerror = onerror;
7 |
8 | function reload() {
9 |
10 | console.log( 'changes detected, reloading' );
11 |
12 | const searchParams = new URLSearchParams( window.location.search );
13 | const reloadTime = parseInt( searchParams.get( 'reload' ) ) || 0;
14 |
15 | searchParams.set( 'reload', reloadTime+1 );
16 |
17 | setTimeout( () => {
18 |
19 | window.location.search = searchParams.toString();
20 |
21 | }, 200 );
22 |
23 | }
24 |
25 | function onerror( err ) {
26 |
27 | console.error( err );
28 |
29 | }
30 |
31 | }
32 |
33 | setTimeout(devsrvMonitorFileChanges, 1000);
34 |
35 |
--------------------------------------------------------------------------------
/examples/jsm/CanvasColorPicker.js:
--------------------------------------------------------------------------------
1 | import { Color } from 'https://cdn.skypack.dev/three@0.135';
2 |
3 | class CanvasColorPicker{
4 | constructor(x, y, w, h, col){
5 | this.init(x, y, w, h);
6 | this.color.hex = col;
7 | this.color.base = '#FF0000';
8 | this.needsUpdate = false;
9 | }
10 |
11 | init(x, y, w, h){
12 | let left = w*0.85;
13 | let top = h*0.85;
14 | let gap = Math.max(w*0.05, h*0.05);
15 | let splitWidth = (left-gap) * 0.5;
16 | this.picker = {x,y,width:left-gap,height:top-gap};
17 | this.strip = {x:left + x,y,width:w-left,height:h};
18 | this.color = {x,y:top + y,width:splitWidth,height:h-top};
19 | this.hex = {x:splitWidth+gap + x, y:top+y + (h-top)*0.5, width: splitWidth, height:h-top};
20 | const fontSize = splitWidth * 0.2;
21 | this.font = `${fontSize}px sans-serif`;
22 | if (this.grdWhite) delete this.grdWhite;
23 | if (this.grdBlack) delete this.grdBlack;
24 | if (this.grdStrip) delete this.grdStrip;
25 | }
26 |
27 | createGradients(ctx){
28 | this.grdWhite = ctx.createLinearGradient(this.picker.x, 0, this.picker.x + this.picker.width, 0);
29 | this.grdWhite.addColorStop(0, 'rgba(255,255,255,1)');
30 | this.grdWhite.addColorStop(1, 'rgba(255,255,255,0)');
31 |
32 | this.grdBlack = ctx.createLinearGradient(0, this.picker.y, 0, this.picker.y + this.picker.height);
33 | this.grdBlack.addColorStop(0, 'rgba(0,0,0,0)');
34 | this.grdBlack.addColorStop(1, 'rgba(0,0,0,1)');
35 |
36 | const grd = ctx.createLinearGradient(0, this.strip.y, 0, this.strip.y + this.strip.height);
37 | grd.addColorStop(0.05, 'rgba(255, 0, 0, 1)');
38 | grd.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
39 | grd.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
40 | grd.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
41 | grd.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
42 | grd.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
43 | grd.addColorStop(0.95, 'rgba(255, 0, 0, 1)');
44 | this.grdStrip = grd;
45 | }
46 |
47 | get hexStr(){
48 | let hex = this.color.hex.replace('#', '');
49 |
50 | if (hex.length === 3) {
51 | hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
52 | }
53 |
54 | return hex;
55 | }
56 |
57 | get colRGBA(){
58 | const hex = this.hexStr;
59 |
60 | const r = parseInt(hex.substring(0, 2), 16);
61 | const g = parseInt(hex.substring(2, 4), 16);
62 | const b = parseInt(hex.substring(4, 6), 16);
63 |
64 | return `rgba(${r},${g},${b},1)`;
65 | }
66 |
67 | get colTHREE(){
68 | const hex = this.hexStr;
69 |
70 | const r = parseInt(hex.substring(0, 2), 16)/255.0;
71 | const g = parseInt(hex.substring(2, 4), 16)/255.0;
72 | const b = parseInt(hex.substring(4, 6), 16)/255.0;
73 |
74 | return new Color(r, g, b);
75 | }
76 |
77 | get colR(){
78 | const hex = this.hexStr;
79 |
80 | const r = parseInt(hex.substring(0, 2), 16);
81 |
82 | return r;
83 | }
84 |
85 | get colB(){
86 | const hex = this.hexStr;
87 |
88 | const g = parseInt(hex.substring(2, 4), 16);
89 |
90 | return g;
91 | }
92 |
93 | get colB(){
94 | const hex = this.hexStr;
95 |
96 | const b = parseInt(hex.substring(4, 6), 16);
97 |
98 | return b;
99 | }
100 |
101 | inPtRect(pt, rect){
102 | return (pt.x>rect.x && pt.x<(rect.x + rect.width) && pt.y>rect.y && pt.y<(rect.y + rect.height));
103 | }
104 |
105 | onSelect(pt){
106 | if (this.inPtRect(pt, this.strip)){
107 | const imageData = this.ctx.getImageData(pt.x, pt.y, 1, 1).data;
108 | this.color.base = "#" + ((1 << 24) + (imageData[0] << 16) + (imageData[1] << 8) + imageData[2]).toString(16).slice(1);
109 | this.needsUpdate = true;
110 | }else if(this.inPtRect(pt, this.picker)){
111 | const imageData = this.ctx.getImageData(pt.x, pt.y, 1, 1).data;
112 | this.color.hex = "#" + ((1 << 24) + (imageData[0] << 16) + (imageData[1] << 8) + imageData[2]).toString(16).slice(1);
113 | this.needsUpdate = true;
114 | if (this.onChange) this.onChange(this.color.hex);
115 | }
116 | }
117 |
118 | drawPicker(ctx) {
119 | if (this.grdWhite === undefined) this.createGradients(ctx);
120 |
121 | ctx.fillStyle = this.color.base;
122 | ctx.fillRect(this.picker.x, this.picker.y, this.picker.width, this.picker.height);
123 |
124 | ctx.fillStyle = this.grdWhite;
125 | ctx.fillRect(this.picker.x, this.picker.y, this.picker.width, this.picker.height );
126 |
127 | ctx.fillStyle = this.grdBlack;
128 | ctx.fillRect(this.picker.x, this.picker.y, this.picker.width, this.picker.height );
129 | ctx.fillRect(this.picker.x, this.picker.y, this.picker.width, this.picker.height );
130 | }
131 |
132 | drawStrip(ctx){
133 | if (this.grdStrip === undefined) this.createGradients(ctx);
134 |
135 | ctx.fillStyle = this.grdStrip;
136 | ctx.fillRect(this.strip.x, this.strip.y, this.strip.width, this.strip.height);
137 | }
138 |
139 | update(ctx){
140 | this.ctx = ctx;
141 | //const transform = ctx.getTransform();
142 | //ctx.resetTransform();
143 | this.drawPicker(ctx)
144 | this.drawStrip(ctx);
145 | ctx.fillStyle = this.color.hex;
146 | ctx.fillRect(this.color.x, this.color.y, this.color.width, this.color.height);
147 | ctx.fillStyle = "#fff";
148 | ctx.font = this.font;
149 | ctx.textAlign = 'left';
150 | ctx.textBaseline = 'middle';
151 | ctx.fillText(this.color.hex, this.hex.x, this.hex.y);
152 | //ctx.setTransform(transform);
153 | }
154 | }
155 |
156 | export { CanvasColorPicker };
--------------------------------------------------------------------------------
/examples/jsm/CanvasDropdown.js:
--------------------------------------------------------------------------------
1 | class CanvasDropdown{
2 | constructor(){
3 |
4 | }
5 |
6 | update(ctx){
7 |
8 | }
9 | }
--------------------------------------------------------------------------------
/examples/jsm/CanvasKeyboard.js:
--------------------------------------------------------------------------------
1 | import { CanvasUI } from './CanvasUI.js';
2 |
3 | class CanvasKeyboard{
4 | constructor( width, renderer, lang = "EN" ){
5 | const config = this.getConfig( lang );
6 | config.panelSize = { width, height: width * 0.5 };
7 | config.height = 256;
8 | config.body = { backgroundColor: "#555" };
9 | config.renderer = renderer;
10 | const content = this.getContent( lang );
11 | this.keyboard = new CanvasUI( content, config );
12 | this.keyboard.mesh.visible = false;
13 | this.shift = false;
14 | }
15 |
16 | get mesh(){
17 | return this.keyboard.mesh;
18 | }
19 |
20 | getConfig( lang ){
21 | //EN
22 | //keys
23 | //qwertyuiop - 10 square - btn0-btn9
24 | //asdfghjkl@ - 10 square buttons - btn10-btn19
25 | //^zxcvbnm< - 1.5 shift,7 square,1.5 backspace - btn20-btn28
26 | //[?123],space.[Enter] - 2,1,4,1,2 - btn30-btn34
27 | //keys shifted
28 | //QWERTYUIOP - 10 square
29 | //ASDFGHJKL@ - 10 square buttons
30 | //^ZXCVBNM< - 1.5 shift,7 square,1.5 backspace
31 | //[?123],space.[Enter] - 2,1,4,1,2
32 | //numbers
33 | //1234567890 - 10 square
34 | //@#%&*/-+() - 10 sq
35 | //^?!"'\:;< - 1.5 shift,7 square,1.5 backspace
36 | //[ABC],space.[Enter] - 2,1,4,1,2
37 | //numbers shifted
38 | //1234567890 - 10 square
39 | //€£$^=|{}[] - 10 sq
40 | //^<>_`~:;< - 1.5 shift,7 square,1.5 backspace
41 | //[ABC],space.[Enter] - 2,1,4,1,2
42 | const config = {};
43 | let padding = 10;
44 | const paddingTop = 20;
45 | const width = ((512 - 2 * padding) / 10) - padding;
46 | const height = (( 256 - 2 * padding) / 4) - padding;
47 | const hover = "#333";
48 | const backgroundColor = "#000";
49 | //Top row
50 | let y = padding;
51 | let x = padding;
52 | for (let i=0; i<10; i++){
53 | const btn = { type: "button", position: { x, y }, width, height, padding, paddingTop, backgroundColor, borderRadius:6, hover, onSelect: this.onSelect.bind( this, i ) }
54 | config[`btn${i}`] = btn;
55 | x += (width + padding);
56 | }
57 | //2nd row
58 | y += (height + padding);
59 | x = padding;
60 | for (let i=0; i<10; i++){
61 | const btn = { type: "button", position: { x, y }, width, height, padding, paddingTop, backgroundColor, borderRadius:6, hover, onSelect: this.onSelect.bind( this, i + 10 ) }
62 | config[`btn${i+10}`] = btn;
63 | x += (width + padding);
64 | }
65 | //3rd row
66 | y += (height + padding);
67 | x = padding;
68 | for (let i=0; i<9; i++){
69 | const w = (i==0 || i==8) ? (width * 1.5 + padding * 0.5) : width;
70 | const btn = { type: "button", position: { x, y }, width: w, height, padding, paddingTop, backgroundColor, borderRadius:6, hover, onSelect: this.onSelect.bind( this, i + 20 ) };
71 | config[`btn${i+20}`] = btn;
72 | x += ( w + padding );
73 | }
74 | //4rd row
75 | y += (height + padding);
76 | x = padding;
77 | for (let i=0; i<5; i++){
78 | const w = (i==0 || i==4) ? (width * 2 + padding) : (i==2) ? (width * 4 + 3 * padding) : width;
79 | const btn = { type: "button", position: { x, y }, width: w, height, padding, paddingTop, backgroundColor, borderRadius:6, hover, onSelect: this.onSelect.bind( this, i + 30 ) };
80 | if (i==0) btn.fontSize = 20;
81 | config[`btn${i+30}`] = btn;
82 | x += ( w + padding );
83 | }
84 | return config;
85 | }
86 |
87 | getContent( lang, layoutIndex=0 ){
88 | let content = {};
89 | let keys;
90 |
91 | this.language = lang;
92 | this.keyboardIndex = layoutIndex;
93 |
94 | switch(layoutIndex){
95 | case 0:
96 | //EN
97 | //keys
98 | //qwertyuiop - 10 square - btn0-btn9
99 | //asdfghjkl@ - 10 square buttons - btn10-btn19
100 | //^zxcvbnm< - 1.5 shift,7 square,1.5 backspace - btn20-btn28
101 | //[?123],space.[Enter] - 1.5,1,4,1,1.5 - btn30-btn34
102 | keys = [ 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',
103 | 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '@',
104 | '⇧', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '⇦', '',
105 | '?123', ',', ' ', '.', '↲'];
106 | for(let i=0; iCanvasUI
58 |-
59 |
- Hello World 60 |
- Header|Main|Footer 61 |
- Custom shaped body 62 |
- Buttons 63 |
- Scrolling 64 |
- Images 65 |
- Keyboard 66 |
- Color Picker 67 |
- Slider 68 |
72 |