100 lines
2.4 KiB
JavaScript
100 lines
2.4 KiB
JavaScript
import * as THREE from "three";
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0xf3f5f8);
|
|
|
|
const camera = new THREE.PerspectiveCamera(
|
|
55,
|
|
window.innerWidth / window.innerHeight,
|
|
0.1,
|
|
100
|
|
);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.85);
|
|
scene.add(ambientLight);
|
|
|
|
const keyLight = new THREE.DirectionalLight(0xffffff, 1);
|
|
keyLight.position.set(3, 4, 5);
|
|
scene.add(keyLight);
|
|
|
|
const cube = new THREE.Mesh(
|
|
new THREE.BoxGeometry(1.6, 1.6, 1.6),
|
|
new THREE.MeshStandardMaterial({ color: 0x2a9d8f, roughness: 0.45, metalness: 0.1 })
|
|
);
|
|
scene.add(cube);
|
|
|
|
const target = new THREE.Vector3(0, 0, 0);
|
|
|
|
const cameraPresets = {
|
|
front: new THREE.Vector3(0, 1.2, 6.5),
|
|
side: new THREE.Vector3(6.5, 1.4, 0),
|
|
topAngled: new THREE.Vector3(3.8, 5.4, 4.2),
|
|
};
|
|
|
|
let activePreset = "front";
|
|
let desiredPosition = cameraPresets.front.clone();
|
|
camera.position.copy(desiredPosition);
|
|
camera.lookAt(target);
|
|
|
|
const presetButtons = Array.from(document.querySelectorAll(".preset-btn"));
|
|
|
|
function setActiveButton(presetName) {
|
|
presetButtons.forEach((button) => {
|
|
const isActive = button.dataset.preset === presetName;
|
|
button.classList.toggle("active", isActive);
|
|
});
|
|
}
|
|
|
|
function switchCameraPreset(presetName) {
|
|
const nextPreset = cameraPresets[presetName];
|
|
if (!nextPreset) {
|
|
return;
|
|
}
|
|
|
|
activePreset = presetName;
|
|
desiredPosition = nextPreset.clone();
|
|
setActiveButton(activePreset);
|
|
}
|
|
|
|
presetButtons.forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const presetName = button.dataset.preset;
|
|
switchCameraPreset(presetName);
|
|
});
|
|
});
|
|
|
|
window.addEventListener("keydown", (event) => {
|
|
if (event.key === "1") {
|
|
switchCameraPreset("front");
|
|
}
|
|
if (event.key === "2") {
|
|
switchCameraPreset("side");
|
|
}
|
|
if (event.key === "3") {
|
|
switchCameraPreset("topAngled");
|
|
}
|
|
});
|
|
|
|
setActiveButton(activePreset);
|
|
|
|
function animate() {
|
|
|
|
camera.position.lerp(desiredPosition, 0.08);
|
|
camera.lookAt(target);
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
renderer.setAnimationLoop(animate);
|
|
|
|
window.addEventListener("resize", () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|