creating a boundary around a three-dimensional shape using Three.js

Question

creating a boundary around a three-dimensional shape using Three.js

I have a number of objects in my scene affecting the outcome of the .mesh in Three.js, but I am unsure how to separate them properly.

To clearly delineate the shapes, I aim to create a boundary. Check out the link for reference:

extrude_geometry[i] = new THREE.ExtrudeGeometry(shape_form[i], extrusion_data);
front_material[i] = new THREE.MeshBasicMaterial({ color: "#FF0000" });

municipalities[i] = new THREE.Mesh(extrude_geometry[i], front_material[i]);

javascript three.js

Answer 1

Answer №1

To successfully implement the outlined pass feature, both Composer and Outline Pass are essential components. Below is a simplified version of the official example that can be found at

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Implementing three.js webgl - post processing with Outline Pass</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="three.js"></script>

<script src="CopyShader.js"></script>
<script src="FXAAShader.js"></script>
<script src="EffectComposer.js"></script>
<script src="RenderPass.js"></script>
<script src="ShaderPass.js"></script>
<script src="OutlinePass.js"></script>


<div id="info">
    <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Detailed information on Outline Pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
</div>

<script>

    var container, camera, scene, renderer, composer, effectFXAA, outlinePass;

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();

    initSetup();
    initiateAnimation();

    function initSetup() {
        container = document.createElement('div');
        document.body.appendChild(container);

        var width = window.innerWidth || 1;
        var height = window.innerHeight || 1;

        renderer = new THREE.WebGLRenderer({antialias: false});
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
        camera.position.z = 8;
        camera.position.x = 0;

        scene = new THREE.Scene();


        var light = new THREE.DirectionalLight(0xddffdd, 0.4);
        light.position.z = 1;
        light.position.y = 1;
        light.position.x = 1;
        scene.add(light);

        var floorMaterial = new THREE.MeshLambertMaterial();
        floorMaterial.side = THREE.DoubleSide;
        var floorGeometry = new THREE.PlaneBufferGeometry(12, 12);
        var floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
        floorMesh.rotation.x -= Math.PI * 0.5;
        floorMesh.position.y -= 1.5;
        scene.add(floorMesh);




        // Setting up post processing
        composer = new THREE.EffectComposer(renderer);

        var renderPass = new THREE.RenderPass(scene, camera);
        composer.addPass(renderPass);

        outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
        composer.addPass(outlinePass);

        effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
        effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
        effectFXAA.renderToScreen = true;
        composer.addPass(effectFXAA);

        window.addEventListener('mousemove', handleMouseMove);
        window.addEventListener('touchmove', handleMouseMove);

        function handleMouseMove(event) {
            mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);

            var intersections = raycaster.intersectObjects([scene], true);

            if (intersections.length > 0) {
                var selectedObject = intersections[0].object;
                outlinePass.selectedObjects = [selectedObject];
            }
        }
    }

    function initiateAnimation() {
        requestAnimationFrame(initiateAnimation);
        composer.render();
    }

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

Answer 2

To successfully implement the outlined pass feature, both Composer and Outline Pass are essential components. Below is a simplified version of the official example that can be found at

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Implementing three.js webgl - post processing with Outline Pass</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="three.js"></script>

<script src="CopyShader.js"></script>
<script src="FXAAShader.js"></script>
<script src="EffectComposer.js"></script>
<script src="RenderPass.js"></script>
<script src="ShaderPass.js"></script>
<script src="OutlinePass.js"></script>


<div id="info">
    <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Detailed information on Outline Pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
</div>

<script>

    var container, camera, scene, renderer, composer, effectFXAA, outlinePass;

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();

    initSetup();
    initiateAnimation();

    function initSetup() {
        container = document.createElement('div');
        document.body.appendChild(container);

        var width = window.innerWidth || 1;
        var height = window.innerHeight || 1;

        renderer = new THREE.WebGLRenderer({antialias: false});
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
        camera.position.z = 8;
        camera.position.x = 0;

        scene = new THREE.Scene();


        var light = new THREE.DirectionalLight(0xddffdd, 0.4);
        light.position.z = 1;
        light.position.y = 1;
        light.position.x = 1;
        scene.add(light);

        var floorMaterial = new THREE.MeshLambertMaterial();
        floorMaterial.side = THREE.DoubleSide;
        var floorGeometry = new THREE.PlaneBufferGeometry(12, 12);
        var floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
        floorMesh.rotation.x -= Math.PI * 0.5;
        floorMesh.position.y -= 1.5;
        scene.add(floorMesh);




        // Setting up post processing
        composer = new THREE.EffectComposer(renderer);

        var renderPass = new THREE.RenderPass(scene, camera);
        composer.addPass(renderPass);

        outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
        composer.addPass(outlinePass);

        effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
        effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
        effectFXAA.renderToScreen = true;
        composer.addPass(effectFXAA);

        window.addEventListener('mousemove', handleMouseMove);
        window.addEventListener('touchmove', handleMouseMove);

        function handleMouseMove(event) {
            mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);

            var intersections = raycaster.intersectObjects([scene], true);

            if (intersections.length > 0) {
                var selectedObject = intersections[0].object;
                outlinePass.selectedObjects = [selectedObject];
            }
        }
    }

    function initiateAnimation() {
        requestAnimationFrame(initiateAnimation);
        composer.render();
    }

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

Answer 3

Answer №2

If you're looking for a solution, I recommend trying out EdgesGeometry. It worked perfectly in my situation. Just add this code snippet after inserting the mesh:

const geometry = new THREE.PlaneBufferGeometry(200, 200) // use any geometry you prefer
const line = new THREE.LineSegments(new THREE.EdgesGeometry(geometry), new THREE.LineBasicMaterial({color: 0x00000}))
scene.add(line)

Check out more about EdgesGeometry here!

Answer 4

If you're looking for a solution, I recommend trying out EdgesGeometry. It worked perfectly in my situation. Just add this code snippet after inserting the mesh:

const geometry = new THREE.PlaneBufferGeometry(200, 200) // use any geometry you prefer
const line = new THREE.LineSegments(new THREE.EdgesGeometry(geometry), new THREE.LineBasicMaterial({color: 0x00000}))
scene.add(line)

Check out more about EdgesGeometry here!

Answer 5

Answer №3

Check out the convenient WireframeHelper and edgesHelper features available in THREE.js - they provide exactly what you're looking for.

Answer 6

Check out the convenient WireframeHelper and edgesHelper features available in THREE.js - they provide exactly what you're looking for.

Answer 7

Answer №4

If you're looking to display the bounding box of an object in Three.js, you can use the THREE.BoundingBoxHelper(). This function will visually show the bounding box around the specified object. Here's an example:

# Define a hexadecimal value for color
var hex  = 0xff0000;
var bbox = new THREE.BoundingBoxHelper( your_mesh, hex );
bbox.update();
scene.add( bbox );

In order to render only the outline of a mesh, you can render the mesh twice with a flat color while utilizing frontface culling and a custom shader that offsets each vertex along its normal. Here's a snippet of what this might look like:

var vertexShader = 
"void main(){"+
    "float offset = 2.0;"+
    "vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );"+
    "gl_Position = projectionMatrix * pos;"+
"}\n";

var fragmentShader =
"void main(){"+
    "gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );"+
"}\n";

Answer 8

If you're looking to display the bounding box of an object in Three.js, you can use the THREE.BoundingBoxHelper(). This function will visually show the bounding box around the specified object. Here's an example:

# Define a hexadecimal value for color
var hex  = 0xff0000;
var bbox = new THREE.BoundingBoxHelper( your_mesh, hex );
bbox.update();
scene.add( bbox );

In order to render only the outline of a mesh, you can render the mesh twice with a flat color while utilizing frontface culling and a custom shader that offsets each vertex along its normal. Here's a snippet of what this might look like:

var vertexShader = 
"void main(){"+
    "float offset = 2.0;"+
    "vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );"+
    "gl_Position = projectionMatrix * pos;"+
"}\n";

var fragmentShader =
"void main(){"+
    "gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );"+
"}\n";

creating a boundary around a three-dimensional shape using Three.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to transfer a querystring received in Node.js to a page being shown through res.render?

Tips for removing a row from a table in Angular4, where there is a delete button located in every row

When using AJAX POST requests, HTML links may become unresponsive

The Google Maps listener event behaves as if it were clicked even though it is triggered by a mouseover

Data vanished from the input field values

Tips for swapping out textures imported from Collada with ShaderMaterial textures in Three.js

Encountered an issue with npm install showing error message 'Failed: connection closed unexpectedly.'

Automatically switch to dark mode at specified times: A simple guide

Executing NestJS code after applying a pipe but before reaching the method handler

Mandatory press for a function known as a click

Using Django ajax doesn't function properly when it's in a separate file

"Efficiently transferring a large file using AJAX and sending it via POST to a

Simulate a keyboard key being pressed and held for 5 seconds upon loading the page

Using THREEJS to implement IfcAxis2Placement3D and IfcObjectPlacement

What approach does JavaScript take when encountering a value that is undefined?

Navigating through a JSON dictionary in Svelte: A step-by-step guide

Running AngularJS on a personal server

The elements in my code are not displaying as expected

Is there a way for me to locate a forum using a JWT Token?

Take two inputs, divide them, and then multiply the result by 100