designcourse · sandraczernik · Jun 9, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "file-loader": "^6.2.0",
     "html-loader": "^2.1.1",
     "html-webpack-plugin": "^5.2.0",
+    "install": "^0.13.0",
     "mini-css-extract-plugin": "^1.3.9",
     "portfinder-sync": "0.0.2",
     "raw-loader": "^4.0.2",

diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,15 @@
     <title>ThreeJS Starter</title>
 </head>
 <body>
+    <div class="container">
+        <h1>Sandra Czernik</h1>
+    </div>
+
+
+
     <canvas class="webgl"></canvas>
+    <section>
+
+    </section>
 </body>
 </html>
diff --git a/src/script.js b/src/script.js
@@ -2,6 +2,17 @@ import './style.css'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import * as dat from 'dat.gui'
+import { MaterialLoader } from 'three'
+
+// Loading
+const textureLoader = new THREE.TextureLoader()
+const normalTexture = textureLoader.load('/textures/testing4.png')
+
+//testing
+//const normalTexture2 = textureLoader.load('/textures/NormalMap2.jpg')
+//const normalTexture3 = textureLoader.load('/textures/NormalMap3.jpg')
+//const normalTexture4 = textureLoader.load('/textures/NormalMap4.jpg')
+//end of testing
 
 // Debug
 const gui = new dat.GUI()
@@ -13,24 +24,88 @@ const canvas = document.querySelector('canvas.webgl')
 const scene = new THREE.Scene()
 
 // Objects
-const geometry = new THREE.TorusGeometry( .7, .2, 16, 100 );
+const geometry = new THREE.SphereBufferGeometry(.5, 64, 64)
 
 // Materials
 
-const material = new THREE.MeshBasicMaterial()
-material.color = new THREE.Color(0xff0000)
+const material = new THREE.MeshStandardMaterial()
+material.metalness = 0.7
+material.roughness = 0.2
+material.normalMap = normalTexture;
+
+// testing
+//material.roughnessMap = normalTexture2;
+//material.aoMap = normalTexture3;
+//material.displacementMap = normalTexture4;
+//material.displacementScale = 0.05;
+//material.disaplacementBias = 0.05;
+// end of testing
+
+material.color = new THREE.Color(0x292929)
 
 // Mesh
 const sphere = new THREE.Mesh(geometry,material)
 scene.add(sphere)
 
 // Lights
 
-const pointLight = new THREE.PointLight(0xffffff, 0.1)
-pointLight.position.x = 2
-pointLight.position.y = 3
-pointLight.position.z = 4
-scene.add(pointLight)
+//const pointLight = new THREE.PointLight(0xffffff, 0.1)
+//pointLight.position.x = 2
+//pointLight.position.y = 3
+//pointLight.position.z = 4
+//scene.add(pointLight)
+
+// Light 2
+const pointLight2 = new THREE.PointLight(0x7b39aa, 2)
+
+pointLight2.position.set(-1.86, 1, -1.65)
+pointLight2.intensity = 1.59
+scene.add(pointLight2)
+const light1 = gui.addFolder('Light 1')
+
+light1.add(pointLight2.position, 'x').min(-3).max(3).step(0.01)
+light1.add(pointLight2.position, 'y').min(-6).max(6).step(0.01)
+light1.add(pointLight2.position, 'z').min(-3).max(3).step(0.01)
+light1.add(pointLight2, 'intensity').min(0).max(10).step(0.01)
+
+const light1Color = {
+    color: 0xff0000
+}
+
+light1.addColor(light1Color, 'color')
+    .onChange(() => {
+        pointLight2.color.set(light1Color.color)
+    })
+
+//const pointLightHelper = new  THREE.PointLightHelper(pointLight2, 0.3)
+//scene.add(pointLightHelper)
+
+// Light 3
+const pointLight3 = new THREE.PointLight(0xe1ff, 2)
+
+pointLight3.position.set(1.46, -1.18, -1.25)
+pointLight3.intensity = 3.57
+scene.add(pointLight3)
+const light2 = gui.addFolder('Light 2')
+
+light2.add(pointLight3.position, 'x').min(-3).max(3).step(0.01)
+light2.add(pointLight3.position, 'y').min(-6).max(6).step(0.01)
+light2.add(pointLight3.position, 'z').min(-3).max(3).step(0.01)
+light2.add(pointLight3, 'intensity').min(0).max(10).step(0.01)
+
+const light2Color = {
+    color: 0xff0000
+}
+
+light2.addColor(light2Color, 'color')
+    .onChange(() => {
+        pointLight3.color.set(light2Color.color)
+    })
+
+//const pointLightHelper2 = new  THREE.PointLightHelper(pointLight3, 0.3)
+//scene.add(pointLightHelper2)
+
+
 
 /**
  * Sizes
@@ -73,25 +148,48 @@ scene.add(camera)
  * Renderer
  */
 const renderer = new THREE.WebGLRenderer({
-    canvas: canvas
+    canvas: canvas,
+    alpha: true
 })
 renderer.setSize(sizes.width, sizes.height)
 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
 
 /**
  * Animate
  */
+document.addEventListener('mousemove', onDocumentMouseMove)
+
+let mouseX = 0
+let mouseY = 0
+
+let targetX = 0
+let targetY = 0
+
+const windowHalfX = window.innerWidth / 2;
+const windowHalfY = window.innerHeight / 2;
+
+function onDocumentMouseMove(event) {
+    mouseX = (event.clientX - windowHalfX)
+    mouseY = (event.clientY - windowHalfY)
+}
+
 
 const clock = new THREE.Clock()
 
 const tick = () =>
 {
 
+    targetX = mouseX * .001
+    targetY = mouseY * .001
+
     const elapsedTime = clock.getElapsedTime()
 
     // Update objects
     sphere.rotation.y = .5 * elapsedTime
 
+    sphere.rotation.y += .5 * (targetX - sphere.rotation.y)
+    sphere.rotation.x += .05 * (targetY - sphere.rotation.x)
+    sphere.position.z += -.05 * (targetY - sphere.rotation.x)
     // Update Orbital Controls
     // controls.update()
 

diff --git a/src/style.css b/src/style.css
@@ -9,12 +9,34 @@ body
 {
     height: 100vh;
     font-family: 'Poppins';
+    background: rgb(24, 24, 24);
+}
+
+body{
+    overflow-x: hidden;
 }
 
 .webgl
 {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     outline: none;
+    mix-blend-mode: screen;
+}
+
+.container{
+    height: 100vh;
+    display: grid;
+    place-items: center;
+}
+
+h1{
+    font-size: 8rem;
+    text-transform: uppercase;
+    color: white;
 }
+
+section{
+    height: 100vh
+}
diff --git a/static/textures/NormalMap1.jpg b/static/textures/NormalMap1.jpg
diff --git a/static/textures/NormalMap2.jpg b/static/textures/NormalMap2.jpg
diff --git a/static/textures/NormalMap3.jpg b/static/textures/NormalMap3.jpg
diff --git a/static/textures/NormalMap4.png b/static/textures/NormalMap4.png
diff --git a/static/textures/default.jpg b/static/textures/default.jpg
diff --git a/static/textures/testing.png b/static/textures/testing.png
diff --git a/static/textures/testing2.png b/static/textures/testing2.png
diff --git a/static/textures/testing3.png b/static/textures/testing3.png
diff --git a/static/textures/testing4.png b/static/textures/testing4.png
diff --git a/static/textures/testing5.png b/static/textures/testing5.png