import * as THREE from ‘./node_modules/three/build/three.module.js’;
import { GUI } from ‘./node_modules/lil-gui/dist/lil-gui.esm.js’;
import { OrbitControls } from ‘./node_modules/three/examples/js/controls/OrbitControls.js’; // Import OrbitControls
const gui = new GUI();
const scene = new THREE.Scene();
const mesh1 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1, 2, 2, 2),
new THREE.MeshBasicMaterial({ color: ‘red’ })
);
// ‘position’ property can be adjusted with Lil-GUI
gui.add(mesh1.position, ‘x’, -5, 5, 0.01).name(‘Position X’);
gui.add(mesh1.position, ‘y’, -5, 5, 0.01).name(‘Position Y’);
gui.add(mesh1.position, ‘z’, -5, 5, 0.01).name(‘Position Z’);
// Optionally, add rotation speed control through Lil-GUI
const rotationSpeed = { x: 0.01, y: 0.01 };
gui.add(rotationSpeed, ‘x’, -0.1, 0.1, 0.001).name(‘Rotation Speed X’);
gui.add(rotationSpeed, ‘y’, -0.1, 0.1, 0.001).name(‘Rotation Speed Y’);
scene.add(mesh1);
const aspectRatio = window.innerWidth / window.innerHeight;
const camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 1000);
camera.position.z = 3;
scene.add(camera);
const canvas = document.querySelector(‘.webgl’);
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
// Add OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// Optional animation loop (with camera tracking the mesh)
const clock = new THREE.Clock();
const rushi = () => {
const ctime = clock.getElapsedTime();
// Apply rotation based on the controls
mesh1.rotation.x += rotationSpeed.x;
mesh1.rotation.y += rotationSpeed.y;
// Update controls (this will handle user interactions like panning, rotating, and zooming)
controls.update();
renderer.render(scene, camera);
window.requestAnimationFrame(rushi);
};
rushi();
// Handle window resizing
window.addEventListener(‘resize’, () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});