import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import * as dat from 'dat.gui';
const renderer = new THREE.WebGL1Renderer();
renderer.shadowMap.enabled = true
renderer.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderer.domElement)
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000
)
const orbit = new OrbitControls(camera,renderer.domElement)
const axeHelper = new THREE.AxesHelper(5);
scene.add(axeHelper)
// scene.background = new THREE.Color(0XFFFFFF)
camera.position.set(-10,30,30)
orbit.update();
// Box
const boxGeometry =new THREE.BoxGeometry();
const boxMeterial = new THREE.MeshBasicMaterial({color:0x00FF00});
const box = new THREE.Mesh(boxGeometry,boxMeterial);
scene.add(box)
// paper
const planeGeometry = new THREE.PlaneGeometry(30,30);
const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFFFFFF,side: THREE.DoubleSide});
const plane = new THREE.Mesh(planeGeometry,planeMaterial);
scene.add(plane);
plane.rotation.x = -0.5 * Math.PI
plane.receiveShadow = true
// Grid helper
const gridHelper = new THREE.GridHelper(30);
scene.add(gridHelper);
// Sphere
const sphereGeometry = new THREE.SphereGeometry(4,50,50);
const sphereMeterial = new THREE.MeshStandardMaterial({color:0x0000FF });
const sphere = new THREE.Mesh(sphereGeometry,sphereMeterial);
sphere.castShadow = true
scene.add(sphere);
sphere.position.set(-10,10,0);
// // Ambient Light
const ambientLight = new THREE.AmbientLight(0x222222 );
scene.add(ambientLight);
// // Direction Lights
const directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 0.8 );
directionalLight.position.set(-30,50,0)
directionalLight.castShadow = true;
directionalLight.shadow.camera.bottom =-12
scene.add( directionalLight ) ;
// Direction Light Helper
const dLightHelper = new THREE.DirectionalLightHelper(directionalLight,5);
scene.add(dLightHelper)
// Direction Light Shadow Helper
const dLightShadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(dLightShadowHelper)
// Controller
const gui = new dat.GUI();
const options = {
sphereColor: '#ffea00',
wireframe:false,
speed:0.01,
}
gui.addColor(options,'sphereColor').onChange(function(e){
sphere.material.color.set(e);
})
gui.add(options,'wireframe').onChange(function(e){
sphere.material.wireframe = e;
})
gui.add(options,'speed',0,0.1)
// box.rotation.x = 5;
// box.rotation.y = 5;
let step = 0;
let speed = 0.1;
// Box animation
function animate(time) {
box.rotation.x = time/1000;
box.rotation.y = time/1000;
renderer.render(scene,camera);
step += options.speed;
sphere.position.y = 10 * Math.abs(Math.sin(step))
}
renderer.render(scene,camera);
renderer.setAnimationLoop(animate);
I have a MacBook M1 and I'm currently learning three.js through tutorials. I've adapted the code from the tutorial but my rendered screens in three.js appear darker after adding lights, and I'm struggling to find a solution.
The plane material appears too gray now compared to its original white color before adding lights. This has made the shadows unclear. I want to add more color to the plane material to make it look whiter as shown in the tutorial for better clarity in shadows.