Alright, so I’m using Vite, all set up, but I’m still getting a white screen. Here’s the code I’m trying to run, but it’s not working, and I have no errors that I’m seeing:
/*import * as THREE from “three”;
import { EffectComposer } from “three/addons/postprocessing/EffectComposer.js”;
import { RenderPass } from “three/addons/postprocessing/RenderPass.js”;
import { UnrealBloomPass } from “three/addons/postprocessing/UnrealBloomPass.js”;
import { OutputPass } from “three/addons/postprocessing/OutputPass.js”;
*/
import * as THREE from “three”;
import {
EffectComposer,
RenderPass,
BloomEffect,
EffectPass,
} from “postprocessing”;
import { HalfFloatType } from “three”;
//Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(
window.innerWidth / -50,
window.innerWidth / 50,
window.innerHeight / 50,
window.innerHeight / -50,
0.1,
100
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
//Ambient Light
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);
//Ground
const groundGeometry = new THREE.PlaneGeometry(50, 50);
const groundMaterial = new THREE.MeshStandardMaterial({
color: 0x333333,
metalness: 0.2,
roughness: 0.8
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);
//Cubes
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
for (let i = 0; i < 10; i++) {
const cubeMaterial = new THREE.MeshStandardMaterial({
/emissive: new THREE.Color(0, 0, 1),
emissiveIntensity: 30,/
color: 0x7777ff,
metalness: 0.3,
roughness: 0.6
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set((Math.random() - 0.5) * 20, 0.5, (Math.random() - 0.5) * 20);
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
}
//Point Light
const mainLight = new THREE.PointLight(0xffffff, 5.0, 25, 1.5);
mainLight.castShadow = true;
mainLight.shadow.mapSize.width = 2048;
mainLight.shadow.mapSize.height = 2048;
scene.add(mainLight);
//Helper Sphere for Main Light
const lightSphereGeometry = new THREE.SphereGeometry(0.3, 26, 26);
const lightSphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const lightSphere = new THREE.Mesh(lightSphereGeometry, lightSphereMaterial);
scene.add(lightSphere);
//Post-processing
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
0.5, //Strength
0.4, //Radius
0.85 //Threshold
);
composer.addPass(bloomPass);
//Output Pass for proper tone mapping and output encoding
const outputPass = new OutputPass();
composer.addPass(outputPass);
//Mouse Control for Light
const mouse = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
window.addEventListener(“mousemove”, (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(ground);
if (intersects.length > 0) {
const point = intersects[0].point;
mainLight.position.set(point.x, 1, point.z);
lightSphere.position.copy(mainLight.position);
}
});
//Animation Loop
const animate = () => {
requestAnimationFrame(animate);
composer.render();
};
animate();
