Posts by gaptat

  • Tesla example

    Hi Klaus,

    Is it possible to have the tesla example for local use as well? It is the only one among the three.js examples that works only on the network and I can't reproduce it locally, please.

    It would be perfect if you could also change the color of the car by loading different textures, as well as have the ability to duplicate an object multiple times when it is the same (e.g. load only one wheel of the car and duplicate it within three.js).

    Thank you very much.

  • Ground projected

    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

  • Ground projected

    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

  • Instanced mesh

    Hi Klaus,

    is it possible to duplicate a 3D model with the same geometries and textures in such a way that I don't have to load it multiple times, so the loading time and the navigation will easier? For example, if I have 100 identical cubes that share the same texture, can I load just one and duplicate them with a script? However, I would need the ability to position them individually in 3D space, not all together and in a row like your example of the soldier walking on a texture duplicated endlessly.

    Thank you.

  • Easy HTML Lightbox Plugin

    Quote from light_line

    you have to use the CSS to customize the popup colors like this:

    CSS
    div#popup-box {
	background-color: #000000 !important;
	color: #ffffff !important;
}
div#popup-box #popup-box-title {
	color: #ffffff !important;
}

    Hi, thank you for your help, I've added your code to the index.html file but it doesn't work (I've read a forum where Klaus said to add a CSS in that file).