86 lines
2.4 KiB
JavaScript
86 lines
2.4 KiB
JavaScript
import * as THREE from "three";
|
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color("white");
|
|
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
camera.position.set(0, 3, 10);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
|
|
const light = new THREE.DirectionalLight(0xffffff, 1);
|
|
light.position.set(5, 10, 5);
|
|
scene.add(light);
|
|
|
|
const objects = [];
|
|
const geometries = [
|
|
new THREE.BoxGeometry(2, 2, 2),
|
|
new THREE.SphereGeometry(1.2, 32, 32),
|
|
new THREE.TorusGeometry(1.2, 0.4, 16, 100)
|
|
];
|
|
const positions = [-5, 0, 5];
|
|
const colors = ["#ff4f4f", "#4f8cff", "#4fff8c"];
|
|
|
|
geometries.forEach((geo, i) => {
|
|
const mat = new THREE.MeshStandardMaterial({
|
|
color: colors[i],
|
|
roughness: 0.4,
|
|
metalness: 0.3,
|
|
emissive: new THREE.Color(0x000000)
|
|
});
|
|
const mesh = new THREE.Mesh(geo, mat);
|
|
mesh.position.set(positions[i], 0, 0);
|
|
scene.add(mesh);
|
|
objects.push(mesh);
|
|
});
|
|
|
|
let selectedObject = null;
|
|
const raycaster = new THREE.Raycaster();
|
|
const mouse = new THREE.Vector2();
|
|
|
|
const controls = new OrbitControls(camera, renderer.domElement);
|
|
controls.enableDamping = true;
|
|
|
|
window.addEventListener("click", (event) => {
|
|
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
|
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
|
|
|
raycaster.setFromCamera(mouse, camera);
|
|
const intersects = raycaster.intersectObjects(objects);
|
|
|
|
if (selectedObject) {
|
|
selectedObject.scale.set(1, 1, 1);
|
|
selectedObject.material.emissive.setHex(0x000000);
|
|
}
|
|
|
|
if (intersects.length > 0) {
|
|
const clicked = intersects[0].object;
|
|
if (selectedObject === clicked) {
|
|
selectedObject = null;
|
|
} else {
|
|
selectedObject = clicked;
|
|
selectedObject.scale.set(1.25, 1.25, 1.25);
|
|
selectedObject.material.emissive.setHex(0x333333);
|
|
}
|
|
} else {
|
|
selectedObject = null;
|
|
}
|
|
});
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
controls.update();
|
|
renderer.render(scene, camera);
|
|
}
|
|
animate();
|
|
|
|
window.addEventListener("resize", () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|