Skip to content

Commit c34fd79

Browse files
enijarenijar
authored
Merge branch 'felixmariotto:master' into master
2 parents fa33320 + 92e8323 commit c34fd79

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+18142
-13622
lines changed

‎.gitignore‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,4 @@ npm-debug.log
1111
node_modules/
1212
Procfile
1313
dist/
14-
build/
15-
debug.log
14+
debug.log

‎.npmignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ webpack.config.js
33
webpack.prodConfig.js
44
Procfile
55
.eslintrc
6-
dist/
6+
dist/
7+
.github/

‎README.md‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,65 @@ Give it a try in [this jsFiddle](https://jsfiddle.net/felixmariotto/y81rf5t2/44/
3939
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.
4040

4141
## Import
42-
**With NPM and ES6 :**
43-
In your console : `npm install three-mesh-ui`
42+
### JSM
43+
#### With NPM
44+
`npm install three-mesh-ui`
45+
*:warning: It requires three as peer dependency*
46+
47+
##### ES6 ([codesandbox demo](https://codesandbox.io/s/npm-package-demo-2onzpo))
48+
4449
```javascript
4550
import ThreeMeshUI from 'three-mesh-ui'
4651
```
4752

48-
**With NPM and CommonJS :**
49-
In your console : `npm install three-mesh-ui`
53+
##### CommonJS
5054
```javascript
5155
const ThreeMeshUI = require('three-mesh-ui');
5256
```
5357

54-
**With HTML <script> tag :**
58+
##### HTML &lt;script&gt; tag ([codesandbox demo](https://codesandbox.io/s/module-build-demo-bkmfi8?file=/index.html:281-913))
59+
```html
60+
<!-- Defines the import map -->
61+
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
62+
<script type="importmap">
63+
{
64+
"imports": {
65+
"three": "https://unpkg.com/[email protected]/build/three.module.js",
66+
"three-mesh-ui": "https://unpkg.com/[email protected]/build/three-mesh-ui.module.js"
67+
}
68+
}
69+
</script>
70+
71+
<!-- Then we can code our app -->
72+
<script type="module">
73+
import * as THREE from "three";
74+
import * as ThreeMeshUI from "three-mesh-ui";
75+
76+
// code goes here ...
77+
</script>
78+
```
79+
: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))*
80+
81+
82+
### JS
83+
#### HTML &lt;script&gt; tag ([codesandbox demo](https://codesandbox.io/s/js-build-demo-061eku))
5584
```html
56-
<script src='https://unpkg.com/three-mesh-ui'></script>
85+
<!-- As three-mesh-ui has a peer dependency on three.js -->
86+
<!-- Be sure to load three before three-mesh-ui -->
87+
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
88+
89+
<script src="https://unpkg.com/[email protected]/build/three-mesh-ui.js"></script>
90+
91+
<!-- Then we can code our app -->
92+
<script>
93+
/* global THREE, ThreeMeshUI */
94+
95+
// code goes here ...
96+
</script>
5797
```
98+
:muscle: *You can use the minified version named __three-mesh-ui.min.js__ ([codesandbox demo](https://codesandbox.io/s/js-build-demo-minified-onh8zi))*
99+
: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.*
100+
58101

59102
## Font files
60103

‎build/build.browser.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Browser Build</title>
6+
<style>
7+
body{ margin: 0; padding: 0; overflow: hidden; width: 100vw; height: 100vh }
8+
</style>
9+
</head>
10+
<body>
11+
12+
<!-- As three-mesh-ui has a peer dependency on three.js -->
13+
<!-- Be sure to load three before three-mesh-ui -->
14+
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
15+
<script src="./three-mesh-ui.js"></script>
16+
17+
<!-- Then we can code our app -->
18+
<script>
19+
/* global THREE, ThreeMeshUI */
20+
21+
const WIDTH = window.innerWidth;
22+
const HEIGHT = window.innerHeight;
23+
24+
let scene, camera, renderer, controls;
25+
26+
window.addEventListener( 'load', init );
27+
window.addEventListener( 'resize', onWindowResize );
28+
29+
//
30+
31+
function init() {
32+
33+
scene = new THREE.Scene();
34+
scene.background = new THREE.Color( 0x505050 );
35+
36+
camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
37+
38+
renderer = new THREE.WebGLRenderer( {
39+
antialias: true
40+
} );
41+
renderer.setPixelRatio( window.devicePixelRatio );
42+
renderer.setSize( WIDTH, HEIGHT );
43+
document.body.appendChild( renderer.domElement );
44+
45+
camera.position.set( 0, 1.6, 0 );
46+
camera.lookAt( new THREE.Vector3( 0, 1, -1.8 ) )
47+
48+
// TEXT PANEL
49+
50+
makeTextPanel();
51+
52+
//
53+
54+
renderer.setAnimationLoop( loop );
55+
56+
}
57+
58+
//
59+
60+
function makeTextPanel() {
61+
62+
const container = new ThreeMeshUI.Block( {
63+
width: 1.2,
64+
height: 0.5,
65+
padding: 0.05,
66+
justifyContent: 'center',
67+
textAlign: 'center',
68+
fontFamily: "https://raw.githubusercontent.com/felixmariotto/three-mesh-ui/master/examples/assets/Roboto-msdf.json",
69+
fontTexture: "https://raw.githubusercontent.com/felixmariotto/three-mesh-ui/master/examples/assets/Roboto-msdf.png"
70+
} );
71+
72+
container.position.set( 0, 1, -1.8 );
73+
container.rotation.x = -0.55;
74+
scene.add( container );
75+
76+
//
77+
78+
container.add(
79+
new ThreeMeshUI.Text( {
80+
content: 'three-mesh-ui.js',
81+
fontSize: 0.125
82+
} ),
83+
);
84+
85+
}
86+
87+
// handles resizing the renderer when the viewport is resized
88+
89+
function onWindowResize() {
90+
91+
camera.aspect = window.innerWidth / window.innerHeight;
92+
camera.updateProjectionMatrix();
93+
renderer.setSize( window.innerWidth, window.innerHeight );
94+
95+
}
96+
97+
//
98+
99+
function loop() {
100+
101+
ThreeMeshUI.update();
102+
renderer.render( scene, camera );
103+
104+
}
105+
106+
</script>
107+
108+
</body>
109+
</html>

‎build/build.browser.min.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Browser minified Build</title>
6+
<style>
7+
body{ margin: 0; padding: 0; overflow: hidden; width: 100vw; height: 100vh }
8+
</style>
9+
</head>
10+
<body>
11+
12+
<!-- As three-mesh-ui has a peer dependency on three.js -->
13+
<!-- Be sure to load three before three-mesh-ui -->
14+
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
15+
<script src="./three-mesh-ui.min.js"></script>
16+
17+
<!-- Then we can code our app -->
18+
<script>
19+
/* global THREE, ThreeMeshUI */
20+
21+
const WIDTH = window.innerWidth;
22+
const HEIGHT = window.innerHeight;
23+
24+
let scene, camera, renderer, controls;
25+
26+
window.addEventListener( 'load', init );
27+
window.addEventListener( 'resize', onWindowResize );
28+
29+
//
30+
31+
function init() {
32+
33+
scene = new THREE.Scene();
34+
scene.background = new THREE.Color( 0x505050 );
35+
36+
camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
37+
38+
renderer = new THREE.WebGLRenderer( {
39+
antialias: true
40+
} );
41+
renderer.setPixelRatio( window.devicePixelRatio );
42+
renderer.setSize( WIDTH, HEIGHT );
43+
document.body.appendChild( renderer.domElement );
44+
45+
camera.position.set( 0, 1.6, 0 );
46+
camera.lookAt( new THREE.Vector3( 0, 1, -1.8 ) )
47+
48+
// TEXT PANEL
49+
50+
makeTextPanel();
51+
52+
//
53+
54+
renderer.setAnimationLoop( loop );
55+
56+
}
57+
58+
//
59+
60+
function makeTextPanel() {
61+
62+
const container = new ThreeMeshUI.Block( {
63+
width: 1.4,
64+
height: 0.5,
65+
padding: 0.05,
66+
justifyContent: 'center',
67+
textAlign: 'center',
68+
fontFamily: "https://raw.githubusercontent.com/felixmariotto/three-mesh-ui/master/examples/assets/Roboto-msdf.json",
69+
fontTexture: "https://raw.githubusercontent.com/felixmariotto/three-mesh-ui/master/examples/assets/Roboto-msdf.png"
70+
} );
71+
72+
container.position.set( 0, 1, -1.8 );
73+
container.rotation.x = -0.55;
74+
scene.add( container );
75+
76+
//
77+
78+
container.add(
79+
new ThreeMeshUI.Text( {
80+
content: 'three-mesh-ui.min.js',
81+
fontSize: 0.125
82+
} ),
83+
);
84+
85+
}
86+
87+
// handles resizing the renderer when the viewport is resized
88+
89+
function onWindowResize() {
90+
91+
camera.aspect = window.innerWidth / window.innerHeight;
92+
camera.updateProjectionMatrix();
93+
renderer.setSize( window.innerWidth, window.innerHeight );
94+
95+
}
96+
97+
//
98+
99+
function loop() {
100+
101+
ThreeMeshUI.update();
102+
renderer.render( scene, camera );
103+
104+
}
105+
106+
</script>
107+
108+
</body>
109+
</html>

0 commit comments

Comments
 (0)