const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
//shodow
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
camera.position.x = 0.5;
camera.position.y = 0.5;
camera.position.z = 8;
camera.lookAt(0, 0, 0);
//light
let ambientLight = new THREE.AmbientLight(0xffffff);
let pointLight = new THREE.PointLight(0xffffff);
pointLight.castShadow = true; // default false
pointLight.shadow.mapSize.width = 512; // default
pointLight.shadow.mapSize.height = 512; // default
pointLight.shadow.camera.near = 0.5; // default
pointLight.shadow.camera.far = 500; // default
pointLight.position.set(2, 2.3, 1);
//Helper
let gridHelper = new THREE.GridHelper(200, 50);
let axesHelper = new THREE.AxesHelper(1.2);
let lightHelper = new THREE.PointLightHelper(pointLight);
let cameraHelper = new THREE.CameraHelper(pointLight.shadow.camera)
// mouse
let mouseX = 0;
let mouseY = 0;
document.addEventListener("mousemove", (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
//stuff collection
let geometry = new THREE.BoxGeometry(2, 5, 1);
let material = new THREE.MeshStandardMaterial({ color: 0x1f1106 });
let cubeMesh = new THREE.Mesh(geometry, material);
cubeMesh.position.set(0, 0, 0)
cubeMesh.castShadow = true;
cubeMesh.receiveShadow = true;
let redBallGeometry = new THREE.SphereGeometry(0.8, 16, 16);
let redBallMaterial = new THREE.MeshStandardMaterial({ color: 0xe00b00 });
let redBallMesh = new THREE.Mesh(redBallGeometry, redBallMaterial);
redBallMesh.position.set(0, 1.2, 0);
redBallMesh.castShadow = true;
redBallMesh.receiveShadow = true;
let greenBallGeometry = new THREE.SphereGeometry(0.8, 16, 16);
let greenBallMaterial = new THREE.MeshStandardMaterial({ color: 0x3e5e3f });
let greenBallMesh = new THREE.Mesh(greenBallGeometry, greenBallMaterial);
greenBallMesh.position.set(0, -1.2, 0);
greenBallMesh.castShadow = true;
greenBallMesh.receiveShadow = true;
let whiteDonutGeometry = new THREE.TorusGeometry(1.3, 0.15, 16, 200);
let whiteDonutMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
let whiteDonutMesh = new THREE.Mesh(whiteDonutGeometry, whiteDonutMaterial);
whiteDonutMesh.position.set(0, -1, 2);
whiteDonutMesh.castShadow = true;
whiteDonutMesh.receiveShadow = true;
let SwhiteDonutGeometry = new THREE.TorusGeometry(0.6, 0.1, 16, 200);
let SwhiteDonutMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
let SwhiteDonutMesh = new THREE.Mesh(SwhiteDonutGeometry, SwhiteDonutMaterial);
SwhiteDonutMesh.position.set(0, -1, 2);
SwhiteDonutMesh.castShadow = true;
SwhiteDonutMesh.receiveShadow = true;
let whiteTube01Geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 20);
let whiteTube01Material = new THREE.MeshStandardMaterial({ color: 0xffffff });
let whiteTube01Mesh = new THREE.Mesh(whiteTube01Geometry, whiteTube01Material);
whiteTube01Mesh.position.set(0, 0, 2);
whiteTube01Mesh.castShadow = true;
whiteTube01Mesh.receiveShadow = true;
let whiteTube02Geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 20);
let whiteTube02Material = new THREE.MeshStandardMaterial({ color: 0xffffff });
let whiteTube02Mesh = new THREE.Mesh(whiteTube02Geometry, whiteTube02Material);
whiteTube02Mesh.position.set(0.6, -1.6, 2);
whiteTube02Mesh.rotateZ(Math.PI / 4);
whiteTube02Mesh.castShadow = true;
whiteTube02Mesh.receiveShadow = true;
let whiteTube03Geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 20);
let whiteTube03Material = new THREE.MeshStandardMaterial({ color: 0xffffff });
let whiteTube03Mesh = new THREE.Mesh(whiteTube03Geometry, whiteTube03Material);
whiteTube03Mesh.position.set(-0.6, -1.6, 2);
whiteTube03Mesh.rotateZ(Math.PI / -4);
whiteTube03Mesh.castShadow = true;
whiteTube03Mesh.receiveShadow = true;
let boxGeometry = new THREE.BoxGeometry(Math.random() * 4.3, 0.05, 0.01);
let boxMatarial = new THREE.MeshStandardMaterial({ color: 0x202103 })
for (let i = 0; i < 400; i++) {
let boxMesh = new THREE.Mesh(boxGeometry, boxMatarial);
boxMesh.position.x = -1 + (Math.random() * 4) - 0.8;
boxMesh.position.y = -4 + (Math.random() * 0.5) + 0.01 * i;
boxMesh.position.z = -0.5;
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
scene.add(boxMesh);
}
scene.add(
cubeMesh,
redBallMesh,
greenBallMesh,
whiteDonutMesh, SwhiteDonutMesh,
whiteTube01Mesh,
whiteTube02Mesh,
whiteTube03Mesh,
ambientLight, pointLight,
gridHelper, axesHelper, lightHelper);
function loop() {
renderer.render(scene, camera);
requestAnimationFrame(loop);
camera.rotateY(0.01);
camera.rotateZ(0.01);
cubeMesh.rotation.x = mouseY * 0.005;
cubeMesh.rotation.y = mouseX * 0.001;
};
loop();