Skip to content

Commit 9fffd9d

Browse files
xtanionxtanion
committed
working camera and speed
1 parent d0cc61e commit 9fffd9d

7 files changed

+199
-26
lines changed

‎js/controller.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,7 @@ class FirstPersonControls {
206206
break;
207207

208208
case "KeyR":
209+
case 87:
209210
this.moveUp = false;
210211
break;
211212
case "KeyF":
@@ -297,13 +298,8 @@ class FirstPersonControls {
297298
targetPosition.setFromSphericalCoords(1, phi, theta).add(position);
298299

299300
this.camera.lookAt(targetPosition);
300-
// this.updateUniforms();
301-
// console.log(this.pointerX);
302-
// console.log(this.pointerY);
303-
// console.log(this.mouseDragOn) console.log(this.camera.position);
304301

305302
this.uniforms.iTime.value = elapsedTime;
306-
// this.uniforms.iTime.needsUpdate = true;
307303
this.uniforms.iTimeDelta.value = delta;
308304
this.uniforms.camPos.value = this.camera.position;
309305
this.domm = new THREE.Vector3();
@@ -312,8 +308,6 @@ class FirstPersonControls {
312308
this.uniforms.camFOV.value = this.camera.fov;
313309
this.uniforms.camUp.value = new THREE.Vector3(0.0, 1.0, 0.0);
314310

315-
// shaderMaterial.uniforms.iTime.value = elapsedTime;
316-
317311
// console.log(this.uniforms.iTime);
318312
};
319313

‎js/main.js

+80-18
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,90 @@ import * as THREE from "three";
44
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
55
import { FirstPersonControls } from "./controller";
66
import { fragmentShader } from "./shader.js";
7+
import { Sky } from "three/addons/objects/Sky.js";
78

8-
let model,clock, controls, shader_mat, renderer;
9+
import Stats from "stats.js";
10+
11+
const _VS = `
12+
varying vec3 vWorldPosition;
13+
void main() {
14+
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
15+
vWorldPosition = worldPosition.xyz;
16+
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
17+
}`;
18+
19+
const _FS = `
20+
uniform vec3 topColor;
21+
uniform vec3 bottomColor;
22+
uniform float offset;
23+
uniform float exponent;
24+
varying vec3 vWorldPosition;
25+
void main() {
26+
float h = normalize( vWorldPosition + offset ).y;
27+
gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );
28+
}`;
29+
30+
31+
let model, clock, controls, shader_mat, renderer;
32+
let sun, sky;
933

1034
// Scene, Camera and Renderer
1135
clock = new THREE.Clock();
1236

1337
const scene = new THREE.Scene();
1438
scene.background = new THREE.Color(0xa0a0a0);
1539

40+
// fps counter
41+
var stats = Stats();
42+
document.body.appendChild(stats.domElement);
43+
1644
const camera = new THREE.PerspectiveCamera(
1745
75,
1846
window.innerWidth / window.innerHeight,
19-
0.1,
20-
1000
47+
0.01,
48+
100000
2149
);
22-
main();
50+
51+
function loadSky() {
52+
53+
const hemiLight = new THREE.HemisphereLight(0xffffff, 0xfffffff, 0.6);
54+
hemiLight.color.setHSL(0.6, 1, 0.6);
55+
hemiLight.groundColor.setHSL(0.095, 1, 0.75);
56+
hemiLight.position.set(0, 50, 0);
57+
scene.add(hemiLight);
58+
59+
const uniforms = {
60+
topColor: { value: new THREE.Color(0x0077ff) },
61+
bottomColor: { value: new THREE.Color(0xffffff) },
62+
offset: { value: 33 },
63+
exponent: { value: 0.6 },
64+
};
65+
// scene.fog.color.copy(uniforms["bottomColor"].value);
66+
67+
const skyGeo = new THREE.SphereGeometry(1000, 32, 15);
68+
const skyMat = new THREE.ShaderMaterial({
69+
uniforms: uniforms,
70+
vertexShader: _VS,
71+
fragmentShader: _FS,
72+
side: THREE.BackSide,
73+
});
74+
75+
const sky = new THREE.Mesh(skyGeo, skyMat);
76+
scene.add(sky);
77+
}
78+
2379
function main() {
24-
// scene.fog = new THREE.Fog( 0xa0a0a0, 1, 50 );
80+
scene.fog = new THREE.Fog( 0xa0a0a0, 1, 5000);
2581

2682
renderer = new THREE.WebGLRenderer({
2783
canvas: document.querySelector(".webgl"),
2884
});
2985

3086
controls = new FirstPersonControls(camera, renderer.domElement);
31-
controls.movementSpeed = 10;
32-
controls.lookSpeed = 0.1;
87+
controls.movementSpeed = 20;
88+
controls.lookSpeed = 0.8;
3389
controls.activeLook = false;
90+
controls.heightMin = -10;
3491
// controls.autoForward = true;
3592
controls.mouseDragOn = true;
3693

@@ -39,14 +96,16 @@ function main() {
3996

4097
renderer.setPixelRatio(window.devicePixelRatio);
4198
renderer.setSize(window.innerWidth, window.innerHeight);
99+
render.toneMappingExposure = 0.5;
42100
// camera.position.setZ(30);
43101

44102
renderer.render(scene, camera);
45103

46104
// Adding objects here
47105
const geom = new THREE.BoxGeometry(5, 5, 5);
48-
const material = new THREE.MeshStandardMaterial({ color: "#00ff83" });
106+
const material = new THREE.MeshStandardMaterial({ color: "#ffffff" });
49107
const box = new THREE.Mesh(geom, material);
108+
box.castShadow = true;
50109
scene.add(box);
51110

52111
// todo
@@ -55,26 +114,29 @@ function main() {
55114
fragmentShader: fragmentShader(),
56115
});
57116
const mesh = new THREE.Mesh(
58-
new THREE.PlaneGeometry(200, 200),
117+
new THREE.PlaneGeometry(10000, 10000, 256, 256),
59118
shader_mat,
60119
);
61120
mesh.rotation.x = -Math.PI / 2;
121+
mesh.position.set(0, -10, 0);
62122
mesh.receiveShadow = true;
63123
scene.add(mesh);
64124

65125
// cont planeMat = new THREE.
66126

67127
// light
68-
const light = new THREE.DirectionalLight(0xffffff, 1, 100);
69-
light.position.set(0, 10, 30);
70-
light.castShadow = true;
71-
scene.add(light);
128+
// const light = new THREE.DirectionalLight(0xffffff, 1, 100);
129+
// light.position.set(0, 10, 30);
130+
// light.castShadow = true;
131+
// scene.add(light);
72132

73-
const lightHelper = new THREE.DirectionalLightHelper(light, 1);
74-
scene.add(lightHelper);
133+
// const lightHelper = new THREE.DirectionalLightHelper(light, 1);
134+
// scene.add(lightHelper);
75135

76136
camera.position.z = 25;
77137

138+
loadSky();
139+
78140
// updating on window size
79141
// window.addEventListener("resize", onWindowResize);
80142
}
@@ -90,15 +152,15 @@ function onWindowResize() {
90152
function animate() {
91153
// torus.position.x += 0.1
92154
requestAnimationFrame(animate);
155+
stats.update();
93156
render();
94157
}
95158

96159
function render() {
97-
// mesh.
98160
controls.update(clock.getDelta(), clock.elapsedTime);
99-
console.log("itime",shader_mat.uniforms.iTimeDelta)
100-
// controls.update(0.5, 0.5);
101161
renderer.render(scene, camera);
102162
}
103163

164+
// Calls of funtion in order
165+
main();
104166
animate();

‎js/noise.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import "https://cdn.jsdelivr.net/npm/[email protected]/simplex-noise.js";
2+
import perlin from "https://cdn.jsdelivr.net/gh/mikechambers/es6-perlin-module@master/perlin.js";
3+
4+
import { math } from "./math.js";
5+
6+
export const noise = (function () {
7+
class _PerlinWrapper {
8+
constructor() {}
9+
10+
noise2D(x, y) {
11+
return perlin(x, y) * 2.0 - 1.0;
12+
}
13+
}
14+
15+
class _RandomWrapper {
16+
constructor() {
17+
this._values = {};
18+
}
19+
20+
_Rand(x, y) {
21+
const k = x + "." + y;
22+
if (!(k in this._values)) {
23+
this._values[k] = Math.random() * 2 - 1;
24+
}
25+
return this._values[k];
26+
}
27+
28+
noise2D(x, y) {
29+
// Bilinear filter
30+
const x1 = Math.floor(x);
31+
const y1 = Math.floor(y);
32+
const x2 = x1 + 1;
33+
const y2 = y1 + 1;
34+
35+
const xp = x - x1;
36+
const yp = y - y1;
37+
38+
const p11 = this._Rand(x1, y1);
39+
const p21 = this._Rand(x2, y1);
40+
const p12 = this._Rand(x1, y2);
41+
const p22 = this._Rand(x2, y2);
42+
43+
const px1 = math.lerp(xp, p11, p21);
44+
const px2 = math.lerp(xp, p12, p22);
45+
46+
return math.lerp(yp, px1, px2);
47+
}
48+
}
49+
50+
class _NoiseGenerator {
51+
constructor(params) {
52+
this._params = params;
53+
this._Init();
54+
}
55+
56+
_Init() {
57+
this._noise = {
58+
simplex: new SimplexNoise(this._params.seed),
59+
perlin: new _PerlinWrapper(),
60+
rand: new _RandomWrapper(),
61+
};
62+
}
63+
64+
Get(x, y) {
65+
const xs = x / this._params.scale;
66+
const ys = y / this._params.scale;
67+
const noiseFunc = this._noise[this._params.noiseType];
68+
const G = 2.0 ** -this._params.persistence;
69+
let amplitude = 1.0;
70+
let frequency = 1.0;
71+
let normalization = 0;
72+
let total = 0;
73+
for (let o = 0; o < this._params.octaves; o++) {
74+
const noiseValue =
75+
noiseFunc.noise2D(xs * frequency, ys * frequency) * 0.5 +
76+
0.5;
77+
total += noiseValue * amplitude;
78+
normalization += amplitude;
79+
amplitude *= G;
80+
frequency *= this._params.lacunarity;
81+
}
82+
total /= normalization;
83+
return (
84+
Math.pow(total, this._params.exponentiation) *
85+
this._params.height
86+
);
87+
}
88+
}
89+
90+
return {
91+
Noise: _NoiseGenerator,
92+
};
93+
})();

‎js/shader.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function fragmentShader() {
2525
uniform float sphere_fold_fixed_radius;
2626
2727
void main(){
28-
gl_FragColor = vec4(sin(camPos)*0.5 + 0.5, 1.0);
28+
gl_FragColor = vec4(0.2, 0.5, 0.2, 1.0);
2929
}
3030
3131
`;

‎js/ui.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Stats from "stats.js";
2+
3+
function createStats() {
4+
var stats = new Stats();
5+
stats.setMode(0);
6+
7+
stats.domElement.style.position = "absolute";
8+
stats.domElement.style.left = "0";
9+
stats.domElement.style.top = "0";
10+
11+
return stats;
12+
}

‎package-lock.json

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"vite": "^4.2.0"
1313
},
1414
"dependencies": {
15+
"stats.js": "^0.17.0",
1516
"three": "^0.151.3"
1617
}
1718
}

0 commit comments

Comments
 (0)