Archiv der Kategorie: Ohne Schublade

Three.js: Farbwechsel nach Kollision

by Cathy:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>three.js: change colour at collision</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<script>
    const scene = new THREE.Scene();

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

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    const cube1 = new THREE.Mesh(geometry, material);
    const cube2 = new THREE.Mesh(geometry, material);
    cube2.position.x = 3;
    scene.add(cube1);
    scene.add(cube2);

    function changeColorAtCollision() {
        const boundingBox1 = new THREE.Box3().setFromObject(cube1); // setFromObject(myMeshObject) is crucial: https://bit.ly/3nXUKOc
        const boundingBox2 = new THREE.Box3().setFromObject(cube2);
        if (boundingBox1.intersectsBox(boundingBox2)) {
            material.color.setRGB(1, 0, 1);
        }
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);

        cube2.position.x -= 0.05;

        changeColorAtCollision();
    }

    animate();
</script>
</body>
</html>

Troubleshooting: Slider in dat.GUI bewegen führt zu zappeln der Szene

Der Fehler tritt dann auf, wenn ein Scrollbalken des Browserfensters zu sehen ist.

Lösung: Mittels Chrome-Entwicklertools solange jedes einzelne HTML-Element entfernen, bis man den Verursacher des Scrollbalkens identifiziert hat. Bei diesem Element dann so lange an den Parametern schrauben, bis der Scrollbalken nicht mehr auftaucht. Bei mir war’s die width eines <div>s, die ich auf 100% gestellt hatte. Nachdem ich sie auf 130px verkleinert habe, verschwand der Scrollbalken und damit auch das Zappeln.