Ground projected

Hello Klaus,
in three.js there is an example where a 3D model is anchored to the ground in the panoramic photo used as the background. Is it possible to achieve this effect?
This is the three.js example:
link  
Thank you.

Hi Klaus,
thank you for your reply, unfortunately I am not good with code. If someone could be so kind as to prepare a basic scene :)
Thanks.

Great, thank you :)

Wow Klaus, thank you vey much!!!

Is it possible to have a texture as the car color and change it with a click? For example, version 1 / white.jpg and version 2 / black.jpg?

Thank you.

With three.js, I created a simple scene with a cube (OBJ) and applied a texture (blue) to it. I added a dropdown menu that allows changing the blue texture to a red one, and I also cloned and moved the 3D model. Only the shadow of the original cube doesn’t seem to be positioned correctly, while it is absent for the cloned model. I should add some parameter to the cloned model to generate the shadow. Here is the 3D model:

cube.zip

This is its HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3D Model Viewer with Shadows and Controls</title>

    <style>

        html, body {

            height: 100%; /* Set height to 100% of the viewport */

            margin: 0; /* Remove default margin */

            overflow: hidden; /* Prevent scroll bars */

}

        canvas {

            display: block; /* Make canvas a block element */

            width: 100%; /* Full width */

            height: 100%; /* Full height */

}

        #textureDropdown {

            position: absolute; /* Positioning dropdown */

            top: 30px; /* Space from the top */

            left: 30px; /* Space from the left */

            z-index: 1; /* Ensure it's above other elements */

}

    </style>

</head>

<body>

    <select id="textureDropdown">

        <option value="blue">Texture 1</option>

        <option value="red">Texture 2</option>

    </select>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/thre…28/three.min.js"></script>

    <script src="https://cdn.rawgit.com/mrdoob/three.j…rs/OBJLoader.js"></script>

    <script src="https://cdn.rawgit.com/mrdoob/three.j…rbitControls.js"></script>

    <script>

        const scene = new THREE.Scene();

        scene.background = new THREE.Color(0xffffff); // White background

        // Camera setup

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        camera.position.set(0, 50, 50); // Position the camera to view the cube

        // Renderer setup

        const renderer = new THREE.WebGLRenderer({ antialias: true });

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.shadowMap.enabled = true; // Enable shadows

        document.body.appendChild(renderer.domElement);

        // Controls for rotating the scene

        const controls = new THREE.OrbitControls(camera, renderer.domElement);

        // Texture loading

        const textureLoader = new THREE.TextureLoader();

        const textureBlue = textureLoader.load('blue.jpg');

        const textureRed = textureLoader.load('red.jpg');

        // Adding lights

        const ambientLight = new THREE.AmbientLight(0x404040, 0.5); // Ambient light

        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 2);

        directionalLight.position.set(-80, 100, 150);

        directionalLight.castShadow = true; // Directional light

        scene.add(directionalLight);

        // Creating a plane to cast shadows

        const planeGeometry = new THREE.PlaneGeometry(200, 200);

        const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 }); // Gray plane

        const plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotation.x = -Math.PI / 2; // Rotate the plane to be horizontal

        plane.position.y = 0; // Y position of the plane at height 0

        plane.receiveShadow = true; // The plane receives shadows

        scene.add(plane);

        // Loading the 3D model

        let model;

        const objLoader = new THREE.OBJLoader();

        objLoader.load('cube.obj', function (loadedModel) {

            model = loadedModel;

            model.traverse(function (child) {

                if (child instanceof THREE.Mesh) {

                    child.material.map = textureBlue;

                    child.castShadow = true; // Model casts shadows

}

});

            const model1 = model.clone();

            const model2 = model.clone();

            model1.position.set(0, 0, 0); // First instance above the plane

            model2.position.set(20, 0, 0); // Second instance 20 cm along the X above the plane

            scene.add(model1);

            scene.add(model2);

});

        // Animation function called on every frame

        function animate() {

            requestAnimationFrame(animate);

            controls.update(); // Update controls

            renderer.render(scene, camera);

}

        animate();

        // Functionality to change textures via dropdown

        document.getElementById('textureDropdown').addEventListener('change', function (event) {

            const selectedTexture = event.target.value === 'blue' ? textureBlue : textureRed;

            model.traverse(function (child) {

                if (child instanceof THREE.Mesh) {

                    child.material.map = selectedTexture;

                    child.material.needsUpdate = true; // Texture update

}

});

});

    </script>

</body>

</html>

How can I make the cube example work on krpano?

In this link, there is an example of InstancedMesh where shadows are generated correctly:

link

Thank you

Hi Klaus,
I am trying the Tesla example offline, but when I click on 'Depthmap On', the scene goes black; it doesn't work for me. Shouldn't it activate automatically? The scene set to 'Depthmap Off' is also a bit dark, especially the 3D model.

Thank you

Hi Klaus,

I also tried it with version 1.22.1 but it doesn't work. I haven't modified the XML file, just updated the links.