Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
78 commits
Select commit Hold shift + click to select a range
5d49aff
Experimental querySelector and styleSheet support WIP
swingingtom May 12, 2022
ab758b0
light cleanup and types
swingingtom May 12, 2022
d107f8c
Wip redo from last time
swingingtom Jul 7, 2022
c4d81b4
update querySelect & Stylesheet VR
swingingtom Jul 11, 2022
556656b
Cleanup and refactor
swingingtom Jul 28, 2022
139ad96
Wip merge
swingingtom Jul 29, 2022
1b11396
Wip merge
swingingtom Jul 29, 2022
1e19ae2
wip refa
swingingtom Aug 8, 2022
bbd13c3
Autosize from children working in one update call. Wip Stretch
swingingtom Aug 18, 2022
f7ac8d4
AlignItems Stretch in one update call
swingingtom Aug 19, 2022
4b47c07
Force boxSizing contentBox when element has autoSize
swingingtom Aug 19, 2022
23dcb19
Still WIP on boxSizing, bounds, autoSize, relativeSize, additional pr…
swingingtom Aug 22, 2022
e8edcfc
isolation
swingingtom Aug 22, 2022
0fb542c
Fix second layout call
swingingtom Aug 22, 2022
554c27d
Use relative Size 100% instead of parent "stretch"
swingingtom Aug 22, 2022
452db24
InvertAlpha + castShadow as inherited property.
swingingtom Aug 23, 2022
b3228fc
Working material inheritance for Text > Inline
swingingtom Aug 23, 2022
b996175
Update example and core for preparation of buttons, keyboard and rayc…
swingingtom Aug 23, 2022
7f0567a
Whitespace finalisation
swingingtom Aug 24, 2022
b977eaf
Bounds Behavior redo
swingingtom Aug 24, 2022
6caa880
Remains BestFit
swingingtom Aug 24, 2022
120d1b6
BestFit behaviour
swingingtom Aug 24, 2022
9ea8956
Redo BoxAnchorBehavior
swingingtom Aug 24, 2022
84dde1b
Update example
swingingtom Aug 24, 2022
a50c0fd
Added clippingPlane behavior as property
swingingtom Aug 27, 2022
bbdc121
renderOrder with previous implementation
swingingtom Aug 27, 2022
4954752
Add offset property
swingingtom Aug 28, 2022
5748782
fontSmooth, previously fontSuperSampling
swingingtom Aug 28, 2022
a5ee7a6
First interactive elements and behaviors
swingingtom Aug 31, 2022
050cfd0
7.x.x - First interactive components. States only HTM
swingingtom Aug 31, 2022
3f32270
Build, types and unit tests
swingingtom Sep 1, 2022
561bfa3
restore readme
swingingtom Sep 1, 2022
12be398
Update source code for samples
swingingtom Sep 2, 2022
1a1719a
Updated readme
swingingtom Sep 2, 2022
34fb203
Example update
swingingtom Sep 2, 2022
ae4adeb
Start example helpers
swingingtom Sep 2, 2022
584db96
Boxsizing explorer and baseline tool with some issue
swingingtom Sep 6, 2022
3632f86
Fix most deprecation warnings on examples
swingingtom Sep 6, 2022
91a0aa4
Fix loadSheets mutation callback
swingingtom Sep 6, 2022
9a717f2
Fix three deprecation warnings
swingingtom Sep 6, 2022
2bd4a7d
Add interactive toggle button and rix raycaster for mobile
swingingtom Sep 9, 2022
ca4eab7
Add Color description option
swingingtom Oct 4, 2022
e128f39
Add sort order in Text too
swingingtom Oct 4, 2022
10a5d68
Inform that provided parameters does fit expected types (MSDF Font Va…
swingingtom Oct 4, 2022
10a0fbb
Fix Inline margin. Right was computed for left
swingingtom Oct 4, 2022
cacbc72
Add blocks and inlineblocs arrows
swingingtom Oct 4, 2022
b0831a3
Add arrows example
swingingtom Oct 4, 2022
494cd8c
fix msdfvariant
swingingtom Oct 13, 2022
ef64570
Validate newer version of three. Clean some eslint
swingingtom Mar 24, 2023
4e5dbb4
add three dependency range
swingingtom Mar 24, 2023
f63fd30
Add exported directory to retrieve examples
swingingtom Mar 24, 2023
82a37ff
Fix some copy paste
swingingtom Mar 24, 2023
87ed308
Rebuilding a text layout should update possible overflow
swingingtom Mar 24, 2023
474b48c
Add more definition in type
swingingtom Mar 24, 2023
d84b53d
Update keyboard example to impact user text
swingingtom Mar 24, 2023
e927970
build update
swingingtom Mar 24, 2023
eb8d6d2
Reorder render
swingingtom Mar 24, 2023
09d0d87
Add typographycLayout helper
swingingtom Mar 27, 2023
459e793
Update examples to use new Behavior instead of custom code
swingingtom Mar 27, 2023
f74930d
Fix #161 in v7 instead of exclusively relying on typographic adjustments
swingingtom Mar 27, 2023
2aec4ef
Add simpleState behavior
swingingtom Mar 27, 2023
a4b94fa
Update svg font implementation
swingingtom Mar 27, 2023
f936460
Build v7.1.x
swingingtom Mar 27, 2023
9a20f6b
Add setState method for retro compatibilty
swingingtom Mar 27, 2023
9d12edb
Fix color instance equals
swingingtom Mar 27, 2023
16ff3be
Cleanup unused method
swingingtom Mar 27, 2023
1392779
Apply colors update on each properties
swingingtom Mar 27, 2023
6e47c48
Update setColor
swingingtom Mar 27, 2023
21b545f
always update inline color
swingingtom Mar 27, 2023
8988de0
Add borderOpacity to keyboardElement
swingingtom Mar 27, 2023
e2e26cd
Force color property to be update at launch
swingingtom Mar 28, 2023
07e5af6
Build for color updated at initialisation
swingingtom Mar 28, 2023
178c6ea
Text: open for customisation. Defer creation process to next update
swingingtom Mar 28, 2023
a936a3d
Wip vertical align and subs
swingingtom Apr 16, 2023
f02dde2
Text layout get defined width as first priority
swingingtom Apr 16, 2023
33e0121
updated build
swingingtom Apr 16, 2023
42adf5f
Merge branch '7.x.x-feature/vertical-align-and-subs' into 7.1.x
swingingtom Apr 16, 2023
a6c1873
Add build
swingingtom Apr 16, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
134 changes: 5 additions & 129 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,134 +1,10 @@
# three-mesh-ui

<a href="https://three-mesh-ui.herokuapp.com/#interactive_button">
<img alt="buttons example" target="_blank" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/three-mesh-ui-teasers/buttons_opti.gif" width="45%">
</a>

<a href="https://three-mesh-ui.herokuapp.com/#hidden_overflow">
<img alt="tuto example" target="_blank" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/three-mesh-ui-teasers/hidden_overflow_opti.gif" width="45%">
</a>
Branch 7.1.x is ready to starts 7.x.x evaluation period.
It has no release but its source code

<a href="https://three-mesh-ui.herokuapp.com/#nested_blocks">
<img alt="big text example" target="_blank" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/three-mesh-ui-teasers/nested_layout_opti.gif" width="45%">
</a>

<a href="https://three-mesh-ui.herokuapp.com/#keyboard">
<img alt="big text example" target="_blank" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/three-mesh-ui-teasers/keyboard_opti.gif" width="45%">
</a>

## [Examples 7.x.x (live)](https://felixmariotto.github.io/three-mesh-ui/7.x.x/) &nbsp;| &nbsp;[NPM](https://www.npmjs.com/package/three-mesh-ui) &nbsp;| &nbsp;[Documentation](https://github.com/felixmariotto/three-mesh-ui/wiki) &nbsp;| &nbsp;[Contributing](https://github.com/felixmariotto/three-mesh-ui/wiki/Roadmap-&-Contributions)

# What is it ?

**three-mesh-ui** is a small library for building VR user interfaces. The objects it creates are [three.object3Ds](https://github.com/mrdoob/three.js/blob/dev/src/core/Object3D.js), usable directly in a [three.js](https://threejs.org) scene like any other Object3D.

**It is not a framework**, but a minimalist library to be used with the last version of three.js. It has no dependency but three.js.

# Why ?

In a normal three.js workflow, the common practice is to build user interfaces with HTML/CSS.

In immersive VR, it is impossible, therefore this library was created.

# Quick Start

## Try it now

Give it a try in [this jsFiddle](https://jsfiddle.net/felixmariotto/y81rf5t2/44/)

Using react-three-fiber ? Here is a [codesandbox](https://codesandbox.io/s/react-three-mesh-ui-forked-v7n0b?file=/src/index.js) to get started.

## Import
### JSM
#### With NPM
`npm install three-mesh-ui`
*:warning: It requires three as peer dependency*

##### ES6 ([codesandbox demo](https://codesandbox.io/s/npm-package-demo-2onzpo))

```javascript
import ThreeMeshUI from 'three-mesh-ui'
```

##### CommonJS
```javascript
const ThreeMeshUI = require('three-mesh-ui');
```

##### HTML &lt;script&gt; tag ([codesandbox demo](https://codesandbox.io/s/module-build-demo-bkmfi8?file=/index.html:281-913))
```html
<!-- Defines the import map -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three-mesh-ui": "https://unpkg.com/[email protected]/build/three-mesh-ui.module.js"
}
}
</script>

<!-- Then we can code our app -->
<script type="module">
import * as THREE from "three";
import * as ThreeMeshUI from "three-mesh-ui";

// code goes here ...
</script>
```
:muscle: *You can use the minified version named __three-mesh-ui.module.min.js__ ([codesandbox demo](https://codesandbox.io/s/module-build-demo-minified-pm6jwx))*


### JS
#### HTML &lt;script&gt; tag ([codesandbox demo](https://codesandbox.io/s/js-build-demo-061eku))
```html
<!-- As three-mesh-ui has a peer dependency on three.js -->
<!-- Be sure to load three before three-mesh-ui -->
<script src="https://unpkg.com/[email protected]/build/three.js"></script>

<script src="https://unpkg.com/[email protected]/build/three-mesh-ui.js"></script>

<!-- Then we can code our app -->
<script>
/* global THREE, ThreeMeshUI */

// code goes here ...
</script>
```
:muscle: *You can use the minified version named __three-mesh-ui.min.js__ ([codesandbox demo](https://codesandbox.io/s/js-build-demo-minified-onh8zi))*
:warning: *Although this would theorically allows you to build 'something', loading js libraries instead of using jsm, might restrict the global features you would have. This is true for both three and three-mesh-ui libraries.*


## Font files

In order to display some text with three-mesh-ui, you will need to provide font files.
You can use the two files named `Roboto-msdf` in [this directory](https://github.com/felixmariotto/three-mesh-ui/tree/master/examples/assets), or [create your own font files](https://github.com/felixmariotto/three-mesh-ui/wiki/Creating-your-own-fonts)

## API

Here is an example of basic three-mesh-ui usage :

```javascript
const container = new ThreeMeshUI.Block({
width: 1.2,
height: 0.7,
padding: 0.2,
fontFamily: './assets/Roboto-msdf.json',
fontTexture: './assets/Roboto-msdf.png',
});

//

const text = new ThreeMeshUI.Text({
content: "Some text to be displayed"
});

container.add( text );

// scene is a THREE.Scene (see three.js)
scene.add( container );

// This is typically done in the render loop :
ThreeMeshUI.update();
```
## [Examples (7.x.x)](https://felixmariotto.github.io/three-mesh-ui/7.x.x/)
## [Documentation (7.x.x)](https://github.com/felixmariotto/three-mesh-ui/wiki)
## [Contributing (7.x.x)](https://github.com/felixmariotto/three-mesh-ui/wiki/Roadmap-&-Contributions)

4 changes: 2 additions & 2 deletions build/build.browser.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<!-- As three-mesh-ui has a peer dependency on three.js -->
<!-- Be sure to load three before three-mesh-ui -->
<script src="https://unpkg.com/three@0.132.2/build/three.js"></script>
<script src="https://unpkg.com/three@0.145.0/build/three.js"></script>
<script src="./three-mesh-ui.js"></script>

<!-- Then we can code our app -->
Expand Down Expand Up @@ -77,7 +77,7 @@

container.add(
new ThreeMeshUI.Text( {
content: 'three-mesh-ui.js',
textContent: 'three-mesh-ui.js\n7.x.x',
fontSize: 0.125
} ),
);
Expand Down
4 changes: 2 additions & 2 deletions build/build.browser.min.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<!-- As three-mesh-ui has a peer dependency on three.js -->
<!-- Be sure to load three before three-mesh-ui -->
<script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.145.0/build/three.min.js"></script>
<script src="./three-mesh-ui.min.js"></script>

<!-- Then we can code our app -->
Expand Down Expand Up @@ -77,7 +77,7 @@

container.add(
new ThreeMeshUI.Text( {
content: 'three-mesh-ui.min.js',
textContent: 'three-mesh-ui.min.js\n7.x.x',
fontSize: 0.125
} ),
);
Expand Down
6 changes: 3 additions & 3 deletions build/build.module.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.132.2/build/three.module.js",
"three-mesh-ui": "https://unpkg.com/[email protected]/build/three-mesh-ui.module.js"
"three": "https://unpkg.com/three@0.145.0/build/three.module.js",
"three-mesh-ui": "./three-mesh-ui.module.js"
}
}
</script>
Expand Down Expand Up @@ -86,7 +86,7 @@

container.add(
new ThreeMeshUI.Text( {
content: 'three-mesh-ui.module.js',
textContent: 'three-mesh-ui.module.js\n7.x.x',
fontSize: 0.125
} ),
);
Expand Down
4 changes: 2 additions & 2 deletions build/build.module.min.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.132.2/build/three.module.js",
"three": "https://unpkg.com/three@0.145.0/build/three.module.js",
"three-mesh-ui" : "./three-mesh-ui.module.min.js"
}
}
Expand Down Expand Up @@ -85,7 +85,7 @@

container.add(
new ThreeMeshUI.Text( {
content: 'three-mesh-ui.module.min.js',
textContent: 'three-mesh-ui.module.min.js\n7.x.x',
fontSize: 0.125
} ),
);
Expand Down
Loading