Archiv der Kategorie: Three.js

Three.js: get intersection position of Mouseover

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mouseover</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 {Text} from 'https://unpkg.com/troika-three-text@0.41.1/dist/troika-three-text.esm.js?module';

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.x = 2;
    camera.position.y = 2;
    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 cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    const edgesGeometry = new THREE.EdgesGeometry(geometry);
    const lines = new THREE.LineSegments(edgesGeometry, new THREE.LineBasicMaterial({color: 0x000000}));
    cube.add(lines);

    const mouseNDRCoordinates = new THREE.Vector2();
    function onMouseMove(event) {
        // calculate mouse position in normalized device coordinates
        // (-1 to +1) for both components
        mouseNDRCoordinates.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouseNDRCoordinates.y = -(event.clientY / window.innerHeight) * 2 + 1;
    }
    window.addEventListener('mousemove', onMouseMove, false);

    const raycaster = new THREE.Raycaster();
    let myText = new Text();
    function writePositionText() {
        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera(mouseNDRCoordinates, camera);

        // calculate objects intersecting the picking ray
        const intersects = raycaster.intersectObjects(scene.children);

        if (intersects.length > 0) {
            for (let i = 0; i < intersects.length; i++) {
                intersects[i].object.material.color.set(0xff0000);

                let interSectionPoint = "x: " + intersects[i].point.x + ", y:" + intersects[i].point.y + ", z: " + intersects[i].point.z;

                // Set properties to configure:
                myText.text = interSectionPoint;
                myText.fontSize = 0.4;
                myText.position.x = -3.7;
                myText.position.y = 2.5;
                myText.color = 0x0000FF;

                // Update the rendering:
                myText.sync();
                scene.add(myText);
            }
        }
    };

    function animate() {
        writePositionText();

        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    animate();

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

Three.JS: New Colour at Mouseover

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mouseover</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.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 cube = new THREE.Mesh(geometry, material);
    cube.position.y = -2;
    scene.add(cube);

    const mouseCoordinates = new THREE.Vector2();
    function onMouseMove( event ) {
        // calculate mouse position in normalized device coordinates
        // (-1 to +1) for both components

        mouseCoordinates.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouseCoordinates.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    }
    window.addEventListener( 'mousemove', onMouseMove, false );

    const raycaster = new THREE.Raycaster();
    function animate() {
        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera( mouseCoordinates, camera );

        // calculate objects intersecting the picking ray
        const intersects = raycaster.intersectObjects( scene.children );

        for ( let i = 0; i < intersects.length; i ++ ) {
            intersects[ i ].object.material.color.set( 0xff0000 );
        }

        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
    
</script>
</body>
</html>

Was bedeutet Attribute vertexColors des MeshBasicMaterial?

Ausgehend von den Eckpunkten (engl. vertices), die in den vertexColors angezeigt werden, durchmischen die Farben immer mehr, je weiter man sich von den Eckpunkten entfernt.

Aus Stackoverflow:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>What does Attribute vertexColors of MeshBasicMaterial mean?</title>
</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 = 2;

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

    var geometry = new THREE.Geometry();

    // Make the simplest shape possible: a triangle.
    geometry.vertices.push(
        new THREE.Vector3(-1,  1, 0),
        new THREE.Vector3(-1, -1, 0),
        new THREE.Vector3( 1, -1, 0)
    );

    // Note that I'm assigning the face to a variable
    // I'm not just shoving it into the geometry.
    var face = new THREE.Face3(0, 1, 2);

    // Assign the colors to the vertices of the face.
    face.vertexColors[0] = new THREE.Color(0xff0000); // red
    face.vertexColors[1] = new THREE.Color(0x00ff00); // green
    face.vertexColors[2] = new THREE.Color(0x0000ff); // blue

    // Now the face gets added to the geometry.
    geometry.faces.push(face);

    // Using this material is important.
    var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});

    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer.render(scene, camera);
</script>
</body>
</html>