57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
import * as THREE from "three"
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x101418);
|
|
|
|
const camera = new THREE.PerspectiveCamera(60, 2, 0.1, 100);
|
|
camera.position.set(0, 0, 6);
|
|
|
|
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
|
|
|
|
const light = new THREE.DirectionalLight(0xffffff, 1.1);
|
|
light.position.set(4, 6, 5);
|
|
scene.add(light);
|
|
|
|
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
|
const material = new THREE.MeshStandardMaterial({ color: 0x5bc0eb });
|
|
|
|
const cube = new THREE.Mesh(geometry, material);
|
|
cube.position.x = -1.2;
|
|
scene.add(cube);
|
|
|
|
const cubeClone = cube.clone();
|
|
cubeClone.position.x = 1.2;
|
|
scene.add(cubeClone);
|
|
|
|
function resizeRendererToDisplaySize() {
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
const needResize = renderer.domElement.width !== width || renderer.domElement.height !== height;
|
|
|
|
if (needResize) {
|
|
renderer.setSize(width, height, false);
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix();
|
|
}
|
|
}
|
|
|
|
function animate(time) {
|
|
const seconds = time * 0.001;
|
|
|
|
resizeRendererToDisplaySize();
|
|
|
|
cube.rotation.x = seconds;
|
|
cube.rotation.y = seconds;
|
|
|
|
cubeClone.rotation.x = seconds;
|
|
cubeClone.rotation.y = -seconds;
|
|
|
|
renderer.render(scene, camera);
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
requestAnimationFrame(animate);
|