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