#TypeError: Failed to resolve module specifier "three". Relative references must start with either "/

4 messages · Page 1 of 1 (latest)

tidal lark
#

what do i do

image.png image.png
# 
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
let scene, camera, renderer, tShirtModels = [], selectedTShirt;
let canvas = document.getElementById('tshirtCanvas');
let infoPanel = document.getElementById('infoPanel');
let closeBtn = document.getElementById('closeBtn');

let tShirtData = [
    { name: "T-shirt 1", price: "$29.99", sizes: "S, M, L, XL", model: "tshirt1.glb" },
    { name: "T-shirt 2", price: "$34.99", sizes: "S, M, L, XL", model: "tshirt2.glb" },
    { name: "T-shirt 3", price: "$24.99", sizes: "S, M, L", model: "tshirt3.glb" },
    { name: "T-shirt 4", price: "$39.99", sizes: "M, L, XL", model: "tshirt4.glb" },
    { name: "T-shirt 5", price: "$29.99", sizes: "S, L, XL", model: "tshirt5.glb" }
];

function init() {
    // Scene setup
    scene = new THREE.Scene();
    
    // Camera setup
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / 600, 0.1, 1000);
    camera.position.z = 10;

    // Renderer setup
    renderer = new THREE.WebGLRenderer({ canvas: canvas });
    renderer.setSize(window.innerWidth, 600);
    document.body.appendChild(renderer.domElement);

    // Lighting
    let light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 1, 1).normalize();
    scene.add(light);

    // Load and position each T-shirt model
    const loader = new GLTFLoader();
    tShirtData.forEach((shirt, index) => {
        loader.load(`models/${shirt.model}`, function(gltf) {
            let tShirtModel = gltf.scene;
            tShirtModel.position.set(index * 4 - 8, 0, 0);  // Adjust horizontal spacing
            tShirtModel.scale.set(2, 2, 2);  // Size the T-shirt model
            scene.add(tShirtModel);
            tShirtModels.push(tShirtModel);
        });
    });

    // Render the scene
    animate();
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
# 
// Hover and Click Listeners for each T-shirt
canvas.addEventListener('mousemove', (event) => {
    let mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );
    let raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    let intersects = raycaster.intersectObjects(tShirtModels, true);
    if (intersects.length > 0) {
        let intersectedObject = intersects[0].object;
        // Slight tilt or rotation on hover
        intersectedObject.rotation.y = Math.PI / 6;
    }
});

canvas.addEventListener('click', (event) => {
    let mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );
    let raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    let intersects = raycaster.intersectObjects(tShirtModels, true);
    if (intersects.length > 0) {
        let intersectedObject = intersects[0].object;
        selectedTShirt = intersectedObject;

        // Enlarge the clicked T-shirt
        selectedTShirt.scale.set(3, 3, 3);
        
        // Display the info panel for the selected T-shirt
        let index = tShirtModels.indexOf(selectedTShirt.parent);
        document.getElementById("tshirtName").innerText = tShirtData[index].name;
        document.getElementById("tshirtPrice").innerText = "Price: " + tShirtData[index].price;
        document.getElementById("tshirtSizes").innerText = "Sizes: " + tShirtData[index].sizes;
        infoPanel.style.display = 'block';
    }
});

// Close Button Functionality
closeBtn.addEventListener('click', () => {
    if (selectedTShirt) {
        selectedTShirt.scale.set(2, 2, 2);  // Reset scale to original size
        infoPanel.style.display = 'none';   // Hide the info panel
    }
});

window.onload = init;
drowsy skiff