added a plane. Trying to figure out how to make reflective like mirror.

main.js

@@ -1,3 +1,12 @@
+/*
+Author: Daniel Jones
+IDE: VSCodium
+Browsers tested: Firefox 124
+Last change: 04/08/24
+purpose: portfolio website to show to potential freelance customers/web developer positions
+*/
+
+
 import { PointLight } from 'three';
 import './style.css';
 import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
@@ -39,7 +48,26 @@ scene.add(gridHelper, lightHelper);
 
 const controls = new OrbitControls(camera, renderer.domElement);
 
+const geometry = new THREE.PlaneGeometry(100, 100, 100, 100);
+const mirrorMaterial = new THREE.MeshBasicMaterial( { color: 0x111111, envMap: camera.renderTarget } );
 
+const material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
+const plane = new THREE.Mesh( geometry, mirrorMaterial );
+plane.rotateX(200);
+scene.add( plane );
+
+const circleGeometry = new THREE.SphereGeometry(10, 10, 10, 10);
+const sphere = new THREE.Mesh(circleGeometry, material);
+
+sphere.position.y += 15
+
+scene.add(sphere);
+
+    
+
+function getRandomInt(max) {
+    return Math.floor(Math.random() * max);
+  }
 
   
 
@@ -52,6 +80,7 @@ function animate(){
     
     
     
+
     renderer.render(scene, camera)
 }
 animate();

package-lock.json

@@ -11,7 +11,7 @@
         "three": "^0.161.0"
       },
       "devDependencies": {
-        "vite": "^5.1.0"
+        "vite": "^5.2.8"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.1.0"
+    "vite": "^5.2.8"
   },
   "dependencies": {
     "three": "^0.161.0"