Layering Geometry in Three.js

Question

Layering Geometry in Three.js

Is it feasible to have a Three.js mesh consistently displayed on top of the scene, regardless of its position being obscured by other objects? I am working on incorporating a lasso selection feature with a mesh and require the selecting box to render above the rest of the scene.

javascript three.js

Answer 1

Answer №1

Absolutely.

Start by following these steps:

renderer.autoClear = false;

Next, establish a separate scene consisting solely of the desired objects to be displayed above the rest. Then, within your rendering loop:

renderer.clear();                     // clear buffers
renderer.render( mainScene, camera );  // render primary scene
renderer.clearDepth();                // clear depth buffer
renderer.render( overlayScene, camera);// render overlay scene

three.js r.152

Answer 2

Absolutely.

Start by following these steps:

renderer.autoClear = false;

Next, establish a separate scene consisting solely of the desired objects to be displayed above the rest. Then, within your rendering loop:

renderer.clear();                     // clear buffers
renderer.render( mainScene, camera );  // render primary scene
renderer.clearDepth();                // clear depth buffer
renderer.render( overlayScene, camera);// render overlay scene

three.js r.152

Answer 3

Answer №2

To display only a single mesh in the front, you can achieve this by adjusting the depthTest property of the object's material to false:

var frontMaterial = new THREE.MeshStandardMaterial({
  color: 'blue',
  depthTest: false
});

mesh.material = frontMaterial;

View an example in this code snippet

Note: Ensure that you have renderer.sortObjects set to the default value of true.

Answer 4

To display only a single mesh in the front, you can achieve this by adjusting the depthTest property of the object's material to false:

var frontMaterial = new THREE.MeshStandardMaterial({
  color: 'blue',
  depthTest: false
});

mesh.material = frontMaterial;

View an example in this code snippet

Note: Ensure that you have renderer.sortObjects set to the default value of true.

Answer 5

Answer №3

A functional illustration is provided below showcasing the VisualLayers class designed for managing multiple layers. It incorporates the technique of setting renderer.autoClear = false and managing clearing depth as highlighted by West Langley in his explanation.

This methodology is advantageous because it does not alter the renderOrder of objects (which is an alternate method), thus avoiding potential issues, and can be utilized independently from layering for various scenarios.

Feel free to experiment with different options in the user interface to observe their effects:

// @ts-check

////////////////////////
// LAYER SYSTEM
////////////////////////

/** @typedef {{name: string, backingScene: THREE.Scene, order: number}} Layer */

class VisualLayers {
    /**
     * @type {Array<Layer>}
     * @private
     */
    __layers = [];

    constructor(
        /** @private @type {THREE.WebGLRenderer} */ __renderer,
        /** @private @type {typeof THREE.Scene} */ __Scene = THREE.Scene
    ) {
        this.__renderer = __renderer;
        this.__Scene = __Scene;
    }

    defineLayer(/** @type {string} */ name, /** @type {number=} */ order = 0) {
        const layer = this.__getLayer(name);

        // The default layer always has order 0.
        const previousOrder = layer.order;
        layer.order = name === "default" ? 0 : order;

        // Sort only if order changed.
        if (previousOrder !== layer.order)
            this.__layers.sort((a, b) => a.order - b.order);

        return layer;
    }

    /**
     * Get a layer by name (if it doesn't exist, creates it with default order 0).
     * @private
     */
    __getLayer(/** @type {string} */ name) {
        let layer = this.__layers.find((l) => l.name === name);

        if (!layer) {
            layer = { name, backingScene: new this.__Scene(), order: 0 };
            layer.backingScene.autoUpdate = false;
            this.__layers.push(layer);
        }

        return layer;
    }

    removeLayer(/** @type {string} */ name) {
        const index = this.__layers.findIndex((l) => {
            if (l.name === name) {
                l.backingScene.children.length = 0;
                return true;
            }

            return false;
        });

        if (index >= 0) this.__layers.splice(index, 1);
    }

    hasLayer(/** @type {string} */ name) {
        return this.__layers.some((l) => l.name === name);
    }

    /** @readonly */
    get layerCount() {
        return this.__layers.length;
    }

    ...
}

html,body,#container {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

canvas {
    background: transparent;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76020113171d06171813364758435843">[email protected]</a>/dist/tweakpane.min.js"></script>
...
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53233c202723213c303620203a3d3413657d62647d67">[email protected]</a>/build/postprocessing.js"></script>

Answer 6

A functional illustration is provided below showcasing the VisualLayers class designed for managing multiple layers. It incorporates the technique of setting renderer.autoClear = false and managing clearing depth as highlighted by West Langley in his explanation.

This methodology is advantageous because it does not alter the renderOrder of objects (which is an alternate method), thus avoiding potential issues, and can be utilized independently from layering for various scenarios.

Feel free to experiment with different options in the user interface to observe their effects:

// @ts-check

////////////////////////
// LAYER SYSTEM
////////////////////////

/** @typedef {{name: string, backingScene: THREE.Scene, order: number}} Layer */

class VisualLayers {
    /**
     * @type {Array<Layer>}
     * @private
     */
    __layers = [];

    constructor(
        /** @private @type {THREE.WebGLRenderer} */ __renderer,
        /** @private @type {typeof THREE.Scene} */ __Scene = THREE.Scene
    ) {
        this.__renderer = __renderer;
        this.__Scene = __Scene;
    }

    defineLayer(/** @type {string} */ name, /** @type {number=} */ order = 0) {
        const layer = this.__getLayer(name);

        // The default layer always has order 0.
        const previousOrder = layer.order;
        layer.order = name === "default" ? 0 : order;

        // Sort only if order changed.
        if (previousOrder !== layer.order)
            this.__layers.sort((a, b) => a.order - b.order);

        return layer;
    }

    /**
     * Get a layer by name (if it doesn't exist, creates it with default order 0).
     * @private
     */
    __getLayer(/** @type {string} */ name) {
        let layer = this.__layers.find((l) => l.name === name);

        if (!layer) {
            layer = { name, backingScene: new this.__Scene(), order: 0 };
            layer.backingScene.autoUpdate = false;
            this.__layers.push(layer);
        }

        return layer;
    }

    removeLayer(/** @type {string} */ name) {
        const index = this.__layers.findIndex((l) => {
            if (l.name === name) {
                l.backingScene.children.length = 0;
                return true;
            }

            return false;
        });

        if (index >= 0) this.__layers.splice(index, 1);
    }

    hasLayer(/** @type {string} */ name) {
        return this.__layers.some((l) => l.name === name);
    }

    /** @readonly */
    get layerCount() {
        return this.__layers.length;
    }

    ...
}

html,body,#container {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

canvas {
    background: transparent;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76020113171d06171813364758435843">[email protected]</a>/dist/tweakpane.min.js"></script>
...
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53233c202723213c303620203a3d3413657d62647d67">[email protected]</a>/build/postprocessing.js"></script>

Answer 7

Answer №4

In addition to adjusting the object.renderOrder property, it is crucial to set material.depthTest to false on the relevant objects.

var spriteMaterial = new THREE.SpriteMaterial( { map: texture1, depthTest: false} );

    this.context1 = context1;
    this.texture1 = texture1;

    var sprite1 = new THREE.Sprite( spriteMaterial );
    sprite1.scale.set(30,15,1);
    sprite1.center.x=0;
    sprite1.center.y=0;
    sprite1.position.set( 0, 0, 0 );
    this.scene.add( sprite1 );

Answer 8

In addition to adjusting the object.renderOrder property, it is crucial to set material.depthTest to false on the relevant objects.

var spriteMaterial = new THREE.SpriteMaterial( { map: texture1, depthTest: false} );

    this.context1 = context1;
    this.texture1 = texture1;

    var sprite1 = new THREE.Sprite( spriteMaterial );
    sprite1.scale.set(30,15,1);
    sprite1.center.x=0;
    sprite1.center.y=0;
    sprite1.position.set( 0, 0, 0 );
    this.scene.add( sprite1 );

Layering Geometry in Three.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Changing the old state in React js: A step-by-step guide

Using jQuery to serialize parameters for AJAX requests

Is it considered acceptable to invoke Vuex actions asynchronously directly from router.js?

Change when the div is shown or hidden

Style the code presented within a div tag

Dynamic Setting of Protractor Driver Path

Receiving accolades within a nested function while implementing a Higher Order Component

I have always wondered about the meaning of " + i + " in Javascript. Can you explain it to

List enhancement through various filters

Simplifying complex JSON structures by un-nesting arrays

Javascript - eliminate elements that are either children or parents from an array

Unable to back out of side navigation

Invalidating Vue3 setErrors causes issues with defining fields

Meteor: Simplifying the process of deleting two documents from separate collections in MongoDB with just one click

Conceal the nearest parent element above using JavaScript (or jQuery)

Error: Unexpected TypeError occurred stating that 'map' cannot be read from undefined, although the map method is not being used in the code

Optimizing normals for unindexed BufferGeometry in Three.js

Cracked Code at Position 880 (LeetCode)

Sveltejs template not displaying on M1 MacBook Air after running - stuck on blank screen

Change a date and time structure into just the time using JavaScript