flo-bit.dev
[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
4.3 kB
143 lines
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 var stereo, camera, renderer, scene, obstacles;
22
23 var platformDistance = 1.5;
24
25 var player, playerYSpeed;
26 var clock = new THREE.Clock();
27
28 var keys = {},
29 jump = true;
30
31 function setup() {
32 window.addEventListener("resize", resize, false);
33 window.addEventListener("keydown", keydown, false);
34 window.addEventListener("keyup", keyup, false);
35 // create your own three.js renderer, scene and camera and add some objects
36 renderer = new THREE.WebGLRenderer();
37
38 renderer.setSize(window.innerWidth, window.innerHeight);
39 renderer.setPixelRatio(window.devicePixelRatio);
40 document.body.appendChild(renderer.domElement);
41 scene = new THREE.Scene();
42 camera = new THREE.PerspectiveCamera(
43 75,
44 window.innerWidth / window.innerHeight,
45 0.5,
46 4
47 );
48
49 // create a new autostereogram renderer, pass the three.js renderer, scene and camera
50 stereo = new STEREO.AutostereogramRenderer(renderer, camera, scene);
51 //stereo.show("depth");
52
53 createPlatforms();
54
55 player = new THREE.Mesh(
56 new THREE.BoxGeometry(0.2, 0.2, 0.2),
57 new THREE.MeshStandardMaterial()
58 );
59 player.position.z = -1.5;
60 scene.add(player);
61 playerYSpeed = 0;
62 }
63
64 function createPlatforms() {
65 obstacles = [];
66 for (let i = 1; i < 5; i++) {
67 let mesh = new THREE.Mesh(
68 new THREE.BoxGeometry(1, 0.1, 1),
69 new THREE.MeshStandardMaterial()
70 );
71 mesh.position.y = -0.5 - Math.random() * 0.5;
72 mesh.position.z = i * -platformDistance;
73 mesh.position.x = (Math.random() - 0.5) * 2;
74 scene.add(mesh);
75 obstacles.push(mesh);
76 }
77 }
78
79 function resize() {
80 camera.aspect = window.innerWidth / window.innerHeight;
81 camera.updateProjectionMatrix();
82
83 renderer.setSize(window.innerWidth, window.innerHeight);
84
85 stereo.setup();
86 }
87 // render the autostereogram
88 function render() {
89 requestAnimationFrame(render);
90 for (let i = 0; i < obstacles.length; i++) {
91 obstacles[i].position.z += 0.01;
92 if (obstacles[i].position.z > 0.5) {
93 obstacles[i].position.z =
94 (i > 0
95 ? obstacles[i - 1].position.z
96 : obstacles[obstacles.length - 1].position.z) -
97 platformDistance;
98 obstacles[i].position.x = (Math.random() - 0.5) * 2;
99 obstacles[i].position.y = -0.5 - Math.random() * 0.5;
100 }
101 if (
102 Math.abs(obstacles[i].position.z - player.position.z) < 0.6 &&
103 Math.abs(obstacles[i].position.x - player.position.x) < 0.6 &&
104 Math.abs(obstacles[i].position.y - player.position.y) < 0.2
105 ) {
106 playerYSpeed = 0.1;
107 jump = true;
108 }
109 }
110 playerYSpeed -= 0.005;
111 player.position.y += playerYSpeed;
112
113 if (keys[87] && jump) {
114 playerYSpeed = 0.1;
115 jump = false;
116 }
117 if (keys[65]) {
118 player.position.x -= 0.05;
119 }
120 if (keys[68]) {
121 player.position.x += 0.05;
122 }
123 if (player.position.y < -10) {
124 player.position.y = 0;
125 player.position.x = 0;
126 playerYSpeed = 0;
127 jump = true;
128 }
129
130 stereo.render();
131 }
132 function keydown(evt) {
133 keys[evt.keyCode] = true;
134 }
135 function keyup(evt) {
136 keys[evt.keyCode] = false;
137 }
138
139 setup();
140 render();
141 </script>
142 </body>
143</html>