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

This commit is contained in:
Daniel Jones 2024-04-08 21:40:12 -05:00
parent d9594a4d25
commit fc5be23014
3 changed files with 33 additions and 4 deletions

29
main.js
View File

@ -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();

2
package-lock.json generated
View File

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

View File

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