[READ-ONLY] Mirror of https://github.com/flo-bit/autostereogram-renderer. real time rendering of an autostereogram using the depth texture of a three.js scene
flo-bit.github.io/autostereogram-renderer/
3d-rendering
autostereogram
javascript
threejs
added minimal demo, cleanup
+78
-16
+3
-1
README.md
+3
-1
README.md
···
8
8
9
9
## Usage
10
10
11
+
See [minimal-demo.html](https://flo-bit.github.io/autostereogram-renderer/minimal-demo.html) for a working example.
12
+
11
13
```javascript
12
14
// import three.js and autostereogram renderer
13
15
import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js";
14
-
import * as STEREO from "./autostereogram.js";
16
+
import * as STEREO from "https://flo-bit.github.io/autostereogram-renderer/autostereogram.js";
15
17
16
18
// create your own three.js renderer, scene and camera and add some objects
17
19
var renderer = new THREE.WebGLRenderer();
+1
-1
game.js
+1
-1
game.js
+18
-14
index.html
+18
-14
index.html
···
1
1
<!DOCTYPE html>
2
2
<html>
3
-
<head>
4
-
<meta charset="utf-8">
5
-
<title>My first three.js app</title>
6
-
<style>
7
-
body { margin: 0; }
8
-
canvas { display: block; }
9
-
</style>
10
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
11
-
</head>
12
-
<body>
13
-
<script src="autostereogram.js" type="module"></script>
14
-
<script src="game.js" type="module"></script>
15
-
</body>
16
-
</html>
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<title>autostereogram renderer - demo</title>
6
+
<style>
7
+
body {
8
+
margin: 0;
9
+
}
10
+
canvas {
11
+
display: block;
12
+
}
13
+
</style>
14
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
15
+
</head>
16
+
<body>
17
+
<script src="autostereogram.js" type="module"></script>
18
+
<script src="game.js" type="module"></script>
19
+
</body>
20
+
</html>
+56
minimal-demo.html
+56
minimal-demo.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<title>autostereogram renderer - minimal demo</title>
6
+
<style>
7
+
body {
8
+
margin: 0;
9
+
}
10
+
canvas {
11
+
display: block;
12
+
}
13
+
</style>
14
+
</head>
15
+
<body>
16
+
<script type="module">
17
+
// import three.js and autostereogram renderer
18
+
import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js";
19
+
import * as STEREO from "https://flo-bit.github.io/autostereogram-renderer/autostereogram.js";
20
+
21
+
// create your own three.js renderer, scene and camera and add some objects
22
+
var renderer = new THREE.WebGLRenderer();
23
+
24
+
renderer.setSize(window.innerWidth, window.innerHeight);
25
+
renderer.setPixelRatio(window.devicePixelRatio);
26
+
document.body.appendChild(renderer.domElement);
27
+
var scene = new THREE.Scene();
28
+
var camera = new THREE.PerspectiveCamera(
29
+
75,
30
+
window.innerWidth / window.innerHeight,
31
+
0.1,
32
+
4
33
+
);
34
+
35
+
// create example mesh
36
+
let mesh = new THREE.Mesh(
37
+
new THREE.IcosahedronGeometry(2.5, 0),
38
+
new THREE.MeshStandardMaterial()
39
+
);
40
+
mesh.position.z = -4;
41
+
scene.add(mesh);
42
+
43
+
// create a new autostereogram renderer, pass the three.js renderer, scene and camera
44
+
var stereo = new STEREO.AutostereogramRenderer(renderer, camera, scene);
45
+
46
+
// render the autostereogram
47
+
function render() {
48
+
requestAnimationFrame(render);
49
+
mesh.rotation.x += 0.01;
50
+
mesh.rotation.y += 0.004;
51
+
stereo.render();
52
+
}
53
+
render();
54
+
</script>
55
+
</body>
56
+
</html>