Ohne Schublade

Three.js: Farbwechsel nach Kollision

Schreibe einen Kommentar

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>
Three.js

ThreeJs: Pfeiltasten für Navigation nutzen

Schreibe einen Kommentar

Der einzige und entscheidende Schritt um die Pfeiltasten für die Pan-Naviagtion zu nutzen ist es, den Eventlistener ans window zu hängen:

controls.listenToKeyEvents(window);

Die Default-Geschwindigkeit kann zum Beispiel so verzehnfacht werden:

controls.keyPanSpeed = controls.keyPanSpeed * 10;

Hier ein simples funktionierenden Beispiel:

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <title>OrbitControl demo</title>
  <style>
    body { margin: 0; }
  </style>
</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js'> </script>
<script type="module">
  import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
  const scene = new THREE.Scene();

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

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

  const controls = new OrbitControls( camera, renderer.domElement );
  controls.listenToKeyEvents(window);
  controls.keyPanSpeed = controls.keyPanSpeed * 10;

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

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

</script>
</body>
</html>

Weiterführendes Beispiel: https://stackoverflow.com/a/41420794/1777526

Ohne Schublade

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

Schreibe einen Kommentar

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.