21 |
37 |
22 |
36 |
23 |
35 |
24 |
34 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
39 | 
40 |
41 |
48 |
54 |
55 |
40 |
57 |
73 |
74 |
86 |
87 |
88 |
89 |
90 |
91 |
58 | 
59 | 0
60 |
61 |
59 | 0
60 |
62 | 
63 | 0
64 |
65 |
63 | 0
64 |
66 | PROGRESS
67 |
68 |
69 |
70 | LEVEL 1
71 |
72 |
92 |
135 |
136 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
209 |
210 |
211 |
--------------------------------------------------------------------------------
/rocketjourney/html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
93 |
94 |
131 |
132 |
133 |
134 |
94 | WELCOME CAPTAIN!
95 |You have been chosen to visit the nearest planet to our spaceship to pick up more energy crystals for our ship.
96 |Your rocket has primative engines, but we'll upgrade it every time you come back to the ship. Later expeditions will become progressively longer.
97 |Along your journey, be sure to look out for the following things:
98 |-
99 |
- Energy Crystals: This is what you're here for! Try to get as many as you can in the time you have. 100 |
- Rocks: Be careful of these! If your ship hits too many rocks it will force a return back to our ship for repairs. Your ship will still fly while your ship has more than -5 shields. 101 |
- Shield Rechargers: These will improve the strength of your shields, up to a maximum of 5! You'll lose a shield point for every rock you hit (which can happen at higher speeds!) 102 |
Enjoy the journey!
104 |105 | Made in ThreeJS and TypeScript 106 |
107 |108 | Models used: 109 |
110 | 111 |112 | "Rocket" by Constantine Tvalashvili is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 113 |
114 |115 | "Cliffs" by DJMaesen is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 116 |
117 |118 | "Shield Item" by Reikan is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 119 |
120 |121 | "Glowing Rock" by JAY2.0 is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 122 |
123 |124 | "Glowing crystals" by SusanKing is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 125 |
126 |127 | "SpaceShip "NORTEND"" by Ruslan Malovsky is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 128 |
129 |Also, thanks to my wife for all the playtesting and bug reports 🥰.
130 |
57 |
73 |
74 |
86 |
87 |
88 |
89 |
90 |
91 |
58 |
59 | 0
60 |
61 |
59 | 0
60 |
62 |
63 | 0
64 |
65 |
63 | 0
64 |
66 | PROGRESS
67 |
68 |
69 |
70 | LEVEL 1
71 |
72 |
92 |
135 |
136 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
209 |
210 |
211 |
--------------------------------------------------------------------------------
/rocketjourney/objects/water.js:
--------------------------------------------------------------------------------
1 | import {
2 | Color,
3 | FrontSide,
4 | LinearFilter,
5 | MathUtils,
6 | Matrix4,
7 | PerspectiveCamera,
8 | Plane,
9 | RGBFormat,
10 | ShaderMaterial,
11 | UniformsLib,
12 | UniformsUtils,
13 | Vector3,
14 | Vector4,
15 | WebGLRenderTarget,
16 | Mesh
17 | } from 'three';
18 |
19 | /**
20 | * Work based on :
21 | * https://github.com/Slayvin: Flat mirror for three.js
22 | * https://home.adelphi.edu/~stemkoski/ : An implementation of water shader based on the flat mirror
23 | * http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL
24 | */
25 |
26 | class Water extends Mesh {
27 |
28 | constructor( geometry, options = {} ) {
29 |
30 | super( geometry );
31 |
32 | const scope = this;
33 |
34 | const textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
35 | const textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
36 |
37 | const clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
38 | const alpha = options.alpha !== undefined ? options.alpha : 1.0;
39 | const time = options.time !== undefined ? options.time : 0.0;
40 | const normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
41 | const sunDirection = options.sunDirection !== undefined ? options.sunDirection : new Vector3( 0.70707, 0.70707, 0.0 );
42 | const sunColor = new Color( options.sunColor !== undefined ? options.sunColor : 0xffffff );
43 | const waterColor = new Color( options.waterColor !== undefined ? options.waterColor : 0x7F7F7F );
44 | const eye = options.eye !== undefined ? options.eye : new Vector3( 0, 0, 0 );
45 | const distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
46 | const side = options.side !== undefined ? options.side : FrontSide;
47 | const fog = options.fog !== undefined ? options.fog : false;
48 | const speed = options.speed !== undefined ? options.speed : 5.0;
49 |
50 | //
51 |
52 | const mirrorPlane = new Plane();
53 | const normal = new Vector3();
54 | const mirrorWorldPosition = new Vector3();
55 | const cameraWorldPosition = new Vector3();
56 | const rotationMatrix = new Matrix4();
57 | const lookAtPosition = new Vector3( 0, 0, - 1 );
58 | const clipPlane = new Vector4();
59 |
60 | const view = new Vector3();
61 | const target = new Vector3();
62 | const q = new Vector4();
63 |
64 | const textureMatrix = new Matrix4();
65 |
66 | const mirrorCamera = new PerspectiveCamera();
67 |
68 | var accumulator = 0.0;
69 |
70 | const parameters = {
71 | minFilter: LinearFilter,
72 | magFilter: LinearFilter,
73 | format: RGBFormat
74 | };
75 |
76 | const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, parameters );
77 |
78 | if ( ! MathUtils.isPowerOfTwo( textureWidth ) || ! MathUtils.isPowerOfTwo( textureHeight ) ) {
79 |
80 | renderTarget.texture.generateMipmaps = false;
81 |
82 | }
83 |
84 | const mirrorShader = {
85 |
86 | uniforms: UniformsUtils.merge( [
87 | UniformsLib[ 'fog' ],
88 | UniformsLib[ 'lights' ],
89 | {
90 | 'normalSampler': { value: null },
91 | 'mirrorSampler': { value: null },
92 | 'alpha': { value: 1.0 },
93 | 'time': { value: 0.0 },
94 | 'size': { value: 1.0 },
95 | 'distortionScale': { value: 20.0 },
96 | 'textureMatrix': { value: new Matrix4() },
97 | 'sunColor': { value: new Color( 0x7F7F7F ) },
98 | 'sunDirection': { value: new Vector3( 0.70707, 0.70707, 0 ) },
99 | 'eye': { value: new Vector3(0,0,0) },
100 | 'waterColor': { value: new Color( 0x555555 ) },
101 | 'speed' : {value: 5.0}
102 | }
103 | ] ),
104 |
105 | vertexShader: require('./shaders/waterVertexShader.glsl').default,
106 |
107 | fragmentShader: require('./shaders/waterFragmentShader.glsl').default
108 |
109 | };
110 | // debugger;
111 |
112 | const material = new ShaderMaterial( {
113 | fragmentShader: mirrorShader.fragmentShader,
114 | vertexShader: mirrorShader.vertexShader,
115 | uniforms: UniformsUtils.clone( mirrorShader.uniforms ),
116 | lights: true,
117 | side: side,
118 | fog: fog
119 | } );
120 |
121 | material.uniforms[ 'mirrorSampler' ].value = renderTarget.texture;
122 | material.uniforms[ 'textureMatrix' ].value = textureMatrix;
123 | material.uniforms[ 'alpha' ].value = alpha;
124 | material.uniforms[ 'time' ].value = time;
125 | material.uniforms[ 'normalSampler' ].value = normalSampler;
126 | material.uniforms[ 'sunColor' ].value = sunColor;
127 | material.uniforms[ 'waterColor' ].value = waterColor;
128 | material.uniforms[ 'sunDirection' ].value = sunDirection;
129 | material.uniforms[ 'distortionScale' ].value = distortionScale;
130 | material.uniforms['speed'].value = speed;
131 |
132 | material.uniforms[ 'eye' ].value = eye;
133 |
134 | scope.material = material;
135 |
136 | scope.onBeforeRender = function ( renderer, scene, camera ) {
137 |
138 | accumulator += 1;
139 | // console.log(accumulator);
140 |
141 | mirrorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
142 | cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
143 |
144 | rotationMatrix.extractRotation( scope.matrixWorld );
145 |
146 | normal.set( 0, 0, 1 );
147 | normal.applyMatrix4( rotationMatrix );
148 |
149 | view.subVectors( mirrorWorldPosition, cameraWorldPosition );
150 | // view.negate();
151 |
152 | // Avoid rendering when mirror is facing away
153 |
154 | if ( view.dot( normal ) > 0 ) return;
155 |
156 | view.reflect( normal ).negate();
157 | view.add( mirrorWorldPosition );
158 |
159 | rotationMatrix.extractRotation( camera.matrixWorld );
160 |
161 | lookAtPosition.set( 0, 0, - 1 );
162 | lookAtPosition.applyMatrix4( rotationMatrix );
163 | lookAtPosition.add( cameraWorldPosition );
164 | // lookAtPosition.add(new Vector3(0,0,-accumulator));
165 |
166 | target.subVectors( mirrorWorldPosition, lookAtPosition );
167 | target.reflect( normal ).negate();
168 | target.add( mirrorWorldPosition );
169 |
170 | mirrorCamera.position.copy( view );
171 | mirrorCamera.up.set( 0, 1, 0 );
172 | mirrorCamera.up.applyMatrix4( rotationMatrix );
173 | mirrorCamera.up.reflect( normal );
174 | mirrorCamera.lookAt( target );
175 |
176 | mirrorCamera.far = camera.far; // Used in WebGLBackground
177 |
178 | mirrorCamera.updateMatrixWorld();
179 | mirrorCamera.projectionMatrix.copy( camera.projectionMatrix );
180 |
181 | // Update the texture matrix
182 | textureMatrix.set(
183 | 0.5, 0.0, 0.0, 0.5,
184 | 0.0, 0.5, 0.0, 0.5,
185 | 0.0, 0.0, 0.5, 0.5,
186 | 0.0, 0.0, 0.0, 1.0
187 | );
188 | textureMatrix.multiply( mirrorCamera.projectionMatrix );
189 | textureMatrix.multiply( mirrorCamera.matrixWorldInverse );
190 |
191 | // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
192 | // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
193 | mirrorPlane.setFromNormalAndCoplanarPoint( normal, mirrorWorldPosition );
194 | mirrorPlane.applyMatrix4( mirrorCamera.matrixWorldInverse );
195 |
196 | clipPlane.set( mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant );
197 |
198 | const projectionMatrix = mirrorCamera.projectionMatrix;
199 |
200 | q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
201 | q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
202 | q.z = - 1.0;
203 | q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
204 |
205 | // Calculate the scaled plane vector
206 | clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
207 |
208 | // Replacing the third row of the projection matrix
209 | projectionMatrix.elements[ 2 ] = clipPlane.x;
210 | projectionMatrix.elements[ 6 ] = clipPlane.y;
211 | projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
212 | projectionMatrix.elements[ 14 ] = clipPlane.w;
213 |
214 | eye.setFromMatrixPosition( camera.matrixWorld );
215 |
216 | // Render
217 |
218 | const currentRenderTarget = renderer.getRenderTarget();
219 |
220 | const currentXrEnabled = renderer.xr.enabled;
221 | const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
222 |
223 | scope.visible = false;
224 |
225 | renderer.xr.enabled = false; // Avoid camera modification and recursion
226 | renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
227 |
228 | renderer.setRenderTarget( renderTarget );
229 |
230 | renderer.state.buffers.depth.setMask( true ); // make sure the depth buffer is writable so it can be properly cleared, see #18897
231 |
232 | if ( renderer.autoClear === false ) renderer.clear();
233 | renderer.render( scene, mirrorCamera );
234 |
235 | scope.visible = true;
236 |
237 | renderer.xr.enabled = currentXrEnabled;
238 | renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
239 |
240 | renderer.setRenderTarget( currentRenderTarget );
241 |
242 | // Restore viewport
243 |
244 | const viewport = camera.viewport;
245 |
246 | if ( viewport !== undefined ) {
247 |
248 | renderer.state.viewport( viewport );
249 |
250 | }
251 |
252 | };
253 | }
254 | }
255 |
256 | Water.prototype.isWater = true;
257 |
258 | export { Water };
259 |
--------------------------------------------------------------------------------
/objects/water.js:
--------------------------------------------------------------------------------
1 | import {
2 | Color,
3 | FrontSide,
4 | LinearFilter,
5 | MathUtils,
6 | Matrix4,
7 | PerspectiveCamera,
8 | Plane,
9 | RGBFormat,
10 | ShaderMaterial,
11 | UniformsLib,
12 | UniformsUtils,
13 | Vector3,
14 | Vector4,
15 | WebGLRenderTarget,
16 | Mesh
17 | } from 'three';
18 |
19 | /**
20 | * Work based on :
21 | * https://github.com/Slayvin: Flat mirror for three.js
22 | * https://home.adelphi.edu/~stemkoski/ : An implementation of water shader based on the flat mirror
23 | * http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL
24 | */
25 |
26 | class Water extends Mesh {
27 |
28 | constructor( geometry, options = {} ) {
29 |
30 | super( geometry );
31 |
32 | const scope = this;
33 |
34 | const textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
35 | const textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
36 |
37 | const clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
38 | const alpha = options.alpha !== undefined ? options.alpha : 1.0;
39 | const time = options.time !== undefined ? options.time : 0.0;
40 | const normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
41 | const sunDirection = options.sunDirection !== undefined ? options.sunDirection : new Vector3( 0.70707, 0.70707, 0.0 );
42 | const sunColor = new Color( options.sunColor !== undefined ? options.sunColor : 0xffffff );
43 | const waterColor = new Color( options.waterColor !== undefined ? options.waterColor : 0x7F7F7F );
44 | const eye = options.eye !== undefined ? options.eye : new Vector3( 0, 0, 0 );
45 | const distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
46 | const side = options.side !== undefined ? options.side : FrontSide;
47 | const fog = options.fog !== undefined ? options.fog : false;
48 | const speed = options.speed !== undefined ? options.speed : 5.0;
49 |
50 | //
51 |
52 | const mirrorPlane = new Plane();
53 | const normal = new Vector3();
54 | const mirrorWorldPosition = new Vector3();
55 | const cameraWorldPosition = new Vector3();
56 | const rotationMatrix = new Matrix4();
57 | const lookAtPosition = new Vector3( 0, 0, - 1 );
58 | const clipPlane = new Vector4();
59 |
60 | const view = new Vector3();
61 | const target = new Vector3();
62 | const q = new Vector4();
63 |
64 | const textureMatrix = new Matrix4();
65 |
66 | const mirrorCamera = new PerspectiveCamera();
67 |
68 | var accumulator = 0.0;
69 |
70 | const parameters = {
71 | minFilter: LinearFilter,
72 | magFilter: LinearFilter,
73 | format: RGBFormat
74 | };
75 |
76 | const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, parameters );
77 |
78 | if ( ! MathUtils.isPowerOfTwo( textureWidth ) || ! MathUtils.isPowerOfTwo( textureHeight ) ) {
79 |
80 | renderTarget.texture.generateMipmaps = false;
81 |
82 | }
83 |
84 | const mirrorShader = {
85 |
86 | uniforms: UniformsUtils.merge( [
87 | UniformsLib[ 'fog' ],
88 | UniformsLib[ 'lights' ],
89 | {
90 | 'normalSampler': { value: null },
91 | 'mirrorSampler': { value: null },
92 | 'alpha': { value: 1.0 },
93 | 'time': { value: 0.0 },
94 | 'size': { value: 1.0 },
95 | 'distortionScale': { value: 20.0 },
96 | 'textureMatrix': { value: new Matrix4() },
97 | 'sunColor': { value: new Color( 0x7F7F7F ) },
98 | 'sunDirection': { value: new Vector3( 0.70707, 0.70707, 0 ) },
99 | 'eye': { value: new Vector3(0,0,0) },
100 | 'waterColor': { value: new Color( 0x555555 ) },
101 | 'speed' : {value: 5.0}
102 | }
103 | ] ),
104 |
105 | vertexShader: require('./shaders/waterVertexShader.glsl').default,
106 |
107 | fragmentShader: require('./shaders/waterFragmentShader.glsl').default
108 |
109 | };
110 | // debugger;
111 |
112 | const material = new ShaderMaterial( {
113 | fragmentShader: mirrorShader.fragmentShader,
114 | vertexShader: mirrorShader.vertexShader,
115 | uniforms: UniformsUtils.clone( mirrorShader.uniforms ),
116 | lights: true,
117 | side: side,
118 | fog: fog
119 | } );
120 |
121 | material.uniforms[ 'mirrorSampler' ].value = renderTarget.texture;
122 | material.uniforms[ 'textureMatrix' ].value = textureMatrix;
123 | material.uniforms[ 'alpha' ].value = alpha;
124 | material.uniforms[ 'time' ].value = time;
125 | material.uniforms[ 'normalSampler' ].value = normalSampler;
126 | material.uniforms[ 'sunColor' ].value = sunColor;
127 | material.uniforms[ 'waterColor' ].value = waterColor;
128 | material.uniforms[ 'sunDirection' ].value = sunDirection;
129 | material.uniforms[ 'distortionScale' ].value = distortionScale;
130 | material.uniforms['speed'].value = speed;
131 |
132 | material.uniforms[ 'eye' ].value = eye;
133 |
134 | scope.material = material;
135 |
136 | scope.onBeforeRender = function ( renderer, scene, camera ) {
137 |
138 | accumulator += 1;
139 | // console.log(accumulator);
140 |
141 | mirrorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
142 | cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
143 |
144 | rotationMatrix.extractRotation( scope.matrixWorld );
145 |
146 | normal.set( 0, 0, 1 );
147 | normal.applyMatrix4( rotationMatrix );
148 |
149 | view.subVectors( mirrorWorldPosition, cameraWorldPosition );
150 | // view.negate();
151 |
152 | // Avoid rendering when mirror is facing away
153 |
154 | if ( view.dot( normal ) > 0 ) return;
155 |
156 | view.reflect( normal ).negate();
157 | view.add( mirrorWorldPosition );
158 |
159 | rotationMatrix.extractRotation( camera.matrixWorld );
160 |
161 | lookAtPosition.set( 0, 0, - 1 );
162 | lookAtPosition.applyMatrix4( rotationMatrix );
163 | lookAtPosition.add( cameraWorldPosition );
164 | // lookAtPosition.add(new Vector3(0,0,-accumulator));
165 |
166 | target.subVectors( mirrorWorldPosition, lookAtPosition );
167 | target.reflect( normal ).negate();
168 | target.add( mirrorWorldPosition );
169 |
170 | mirrorCamera.position.copy( view );
171 | mirrorCamera.up.set( 0, 1, 0 );
172 | mirrorCamera.up.applyMatrix4( rotationMatrix );
173 | mirrorCamera.up.reflect( normal );
174 | mirrorCamera.lookAt( target );
175 |
176 | mirrorCamera.far = camera.far; // Used in WebGLBackground
177 |
178 | mirrorCamera.updateMatrixWorld();
179 | mirrorCamera.projectionMatrix.copy( camera.projectionMatrix );
180 |
181 | // Update the texture matrix
182 | textureMatrix.set(
183 | 0.5, 0.0, 0.0, 0.5,
184 | 0.0, 0.5, 0.0, 0.5,
185 | 0.0, 0.0, 0.5, 0.5,
186 | 0.0, 0.0, 0.0, 1.0
187 | );
188 | textureMatrix.multiply( mirrorCamera.projectionMatrix );
189 | textureMatrix.multiply( mirrorCamera.matrixWorldInverse );
190 |
191 | // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
192 | // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
193 | mirrorPlane.setFromNormalAndCoplanarPoint( normal, mirrorWorldPosition );
194 | mirrorPlane.applyMatrix4( mirrorCamera.matrixWorldInverse );
195 |
196 | clipPlane.set( mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant );
197 |
198 | const projectionMatrix = mirrorCamera.projectionMatrix;
199 |
200 | q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
201 | q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
202 | q.z = - 1.0;
203 | q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
204 |
205 | // Calculate the scaled plane vector
206 | clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
207 |
208 | // Replacing the third row of the projection matrix
209 | projectionMatrix.elements[ 2 ] = clipPlane.x;
210 | projectionMatrix.elements[ 6 ] = clipPlane.y;
211 | projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
212 | projectionMatrix.elements[ 14 ] = clipPlane.w;
213 |
214 | eye.setFromMatrixPosition( camera.matrixWorld );
215 |
216 | // Render
217 |
218 | const currentRenderTarget = renderer.getRenderTarget();
219 |
220 | const currentXrEnabled = renderer.xr.enabled;
221 | const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
222 |
223 | scope.visible = false;
224 |
225 | renderer.xr.enabled = false; // Avoid camera modification and recursion
226 | renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
227 |
228 | renderer.setRenderTarget( renderTarget );
229 |
230 | renderer.state.buffers.depth.setMask( true ); // make sure the depth buffer is writable so it can be properly cleared, see #18897
231 |
232 | if ( renderer.autoClear === false ) renderer.clear();
233 | renderer.render( scene, mirrorCamera );
234 |
235 | scope.visible = true;
236 |
237 | renderer.xr.enabled = currentXrEnabled;
238 | renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
239 |
240 | renderer.setRenderTarget( currentRenderTarget );
241 |
242 | // Restore viewport
243 |
244 | const viewport = camera.viewport;
245 |
246 | if ( viewport !== undefined ) {
247 |
248 | renderer.state.viewport( viewport );
249 |
250 | }
251 |
252 | };
253 | // this.rotation = undefined;
254 |
255 | }
256 |
257 | }
258 |
259 | Water.prototype.isWater = true;
260 |
261 | export { Water };
262 |
--------------------------------------------------------------------------------
/rocketjourney/game.ts:
--------------------------------------------------------------------------------
1 | import { AnimationClip, AnimationMixer, Clock, Euler, Group, LoopOnce, MathUtils, Mesh, MirroredRepeatWrapping, PerspectiveCamera, PlaneGeometry, PMREMGenerator, Quaternion, QuaternionKeyframeTrack, Scene, ShaderMaterial, TextureLoader, Vector3, VectorKeyframeTrack, WebGLRenderer } from "three";
2 | import { Water } from "./objects/water";
3 | import { Sky } from "three/examples/jsm/objects/Sky";
4 | import { addBackgroundBit, addChallengeRow, challengeRows, environmentBits, mothershipModel, objectsInit, rocketModel, starterBay } from "./game/objects";
5 | import { crystalUiElement, levelIndicator, shieldUiElement, showLevelEndScreen, uiInit, updateLevelEndUI } from "./game/ui";
6 |
7 | export const scene = new Scene();
8 | export const camera = new PerspectiveCamera(
9 | 75,
10 | window.innerWidth / window.innerHeight,
11 | 0.1,
12 | 2000
13 | );
14 |
15 | export const destructionBits = new Array
93 |
94 |
131 |
132 |
133 |
134 |
94 | WELCOME CAPTAIN!
95 |You have been chosen to visit the nearest planet to our spaceship to pick up more energy crystals for our ship.
96 |Your rocket has primative engines, but we'll upgrade it every time you come back to the ship. Later expeditions will become progressively longer.
97 |Along your journey, be sure to look out for the following things:
98 |-
99 |
- Energy Crystals: This is what you're here for! Try to get as many as you can in the time you have. 100 |
- Rocks: Be careful of these! If your ship hits too many rocks it will force a return back to our ship for repairs. Your ship will still fly while your ship has more than -5 shields. 101 |
- Shield Rechargers: These will improve the strength of your shields, up to a maximum of 5! You'll lose a shield point for every rock you hit (which can happen at higher speeds!) 102 |
Enjoy the journey!
104 |105 | Made in ThreeJS and TypeScript 106 |
107 |108 | Models used: 109 |
110 | 111 |112 | "Rocket" by Constantine Tvalashvili is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 113 |
114 |115 | "Cliffs" by DJMaesen is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 116 |
117 |118 | "Shield Item" by Reikan is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 119 |
120 |121 | "Glowing Rock" by JAY2.0 is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 122 |
123 |124 | "Glowing crystals" by SusanKing is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 125 |
126 |127 | "SpaceShip "NORTEND"" by Ruslan Malovsky is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 128 |
129 |Also, thanks to my wife for all the playtesting and bug reports 🥰.
130 |