Added dat.gui controls to showcase displacement intensity and noise m…

…ap translation

package.json

@@ -5,6 +5,7 @@
   "author": "Kevin Le Guillou <contact@kevinleguillou.com>",
   "license": "MIT",
   "dependencies": {
+    "dat.gui": "^0.7.7",
     "raw-loader": "^4.0.2",
     "three": "^0.123.0",
     "webpack": "^5.8.0",

src/DisplacementCity/DisplacementCity.js

@@ -22,23 +22,21 @@ const cityMaterial = new THREE.ShaderMaterial({
 });
 
 export default class DisplacementCity{
-	constructor(){
+	constructor(controls){
+		this.controls = controls;
 		const textureSize = 64;
 		const precision = 4; // min 2
 		const verticesCount = textureSize*precision;
 		const geometry = new THREE.PlaneGeometry(1, 1, verticesCount, verticesCount);
 		geometry.rotateX(-Math.PI/2);
-		const material = cityMaterial;
-		this.heightMapTranslation = new THREE.Vector2;
-		material.uniforms.u_translation.value = this.heightMapTranslation;
+		this.material = cityMaterial;
 
-		const model = new THREE.Mesh(geometry, material);
+		const model = new THREE.Mesh(geometry, this.material);
 		this.meshGroup = new THREE.Group;
 		this.meshGroup.add(model);
 	}
-	tick(time){
-		let fractTime = time - Math.floor(time);
-		fractTime = time/10;
-		this.heightMapTranslation.set(fractTime, 0);
+	tick(){
+		this.material.uniforms.u_translation.value.x = this.controls.translation;
+		this.material.uniforms.u_displacementIntensity.value = this.controls.height;
 	}
 }

src/Logic.js

@@ -1,20 +1,28 @@
+import * as dat from 'dat.gui';
 import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import Skybox from "Skybox/Skybox";
 import DisplacementCity from "DisplacementCity/DisplacementCity";
 
 export default class Logic{
 	constructor(){
+		this.gui = new dat.GUI;
+		this.controls = {
+			translation: 0.5,
+			height: 1,
+		};
+		this.gui.add(this.controls, "translation", 0, 1, 0.01);
+		this.gui.add(this.controls, "height", 0, 1, 0.01);
+
 		this.scene = new THREE.Scene;
 		this.camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight);
-		this.camera.position.set(0, 0.25, 1);
-		// this.camera.position.set(0.4, 1, 1.25);
+		this.camera.position.set(0.4, 1, 1.25);
 		this.camera.lookAt(0, 0.5, 0);
 		this.renderer = new THREE.WebGLRenderer({ antialias: true });
 		document.body.appendChild(this.renderer.domElement);
-		this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-		this.controls.target.set(0, 0.35, 0);
-		this.controls.update();
+		this.cameraControls = new OrbitControls(this.camera, this.renderer.domElement);
+		this.cameraControls.target.set(0, 0.35, 0);
+		this.cameraControls.update();
 		this.sceneObjects = [];
 
 		window.addEventListener("resize", ()=>{ this.setSize(window.innerWidth, window.innerHeight); });
@@ -24,7 +32,7 @@ export default class Logic{
 
 		const sky = new Skybox;
 		this.registerObject(sky);
-		const city = new DisplacementCity;
+		const city = new DisplacementCity(this.controls);
 		this.registerObject(city);
 
 		this.tick();

yarn.lock

@@ -325,6 +325,11 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+dat.gui@^0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/dat.gui/-/dat.gui-0.7.7.tgz#7f96dbd21621a76385203659aebfa264ee6ae89b"
+  integrity sha512-sRl/28gF/XRC5ywC9I4zriATTsQcpSsRG7seXCPnTkK8/EQMIbCu5NPMpICLGxX9ZEUvcXR3ArLYCtgreFoMDw==
+
 deep-extend@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"