Create a circle-shaped floor in THREE.JS that mimics the appearance of a shadow

Question

Create a circle-shaped floor in THREE.JS that mimics the appearance of a shadow

I am working on creating a circle mesh with a gradient material that resembles a shadow effect. Specifically, I want the circle to have a black center and fade to almost white at the edges.

Currently, I have been able to create a circle and position it correctly using the following code snippet:

var floorGeometry = new THREE.CircleGeometry((Math.max(loadedObjectRotatedLength.x, loadedObjectRotatedLength.y)/2) + 15, 32);
var floorMaterial = new THREE.MeshBasicMaterial({color: 0xf0f0f0});

var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position = new THREE.Vector3((loadedObjectBoundingBox.min.x + loadedObjectBoundingBox.max.x)/2, (loadedObjectBoundingBox.min.y + loadedObjectBoundingBox.max.y)/2, loadedObjectBoundingBox.min.z);

However, I am struggling to create a material that mimics a Radial Gradient effect. Can anyone provide guidance or assistance with this? :/

javascript three.js shadow

Answer 1

Answer №1

There are multiple approaches to achieve this.

1) Utilizing a gradient image and applying it to the material, as suggested by @GuyGood in the comments

The code implementation would look similar to this:

    var circleGeometry = new THREE.CircleGeometry(200, 200, 32);
    var texture = THREE.ImageUtils.loadTexture('image/shadow.png');// replace with appropriate URL
    texture.anisotropy = renderer.getMaxAnisotropy();
    var material = new THREE.MeshBasicMaterial({
        map: texture,
        color:0xFFFFFF
    });
    mesh = new THREE.Mesh(circleGeometry, material);
    scene.add(mesh);

2) Another method worth mentioning involves creating a canvas element where you can draw any shape (in this case, a circle with a gradient) and then convert it into a texture to apply onto the material.

The code for this approach will be like so:

 var circleGeometry = new THREE.CircleGeometry(100, 100, 100);
    // create a texture on canvas and apply it on material
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    var x = 150,
        y = 75,
        innerRadius = 0,
        outerRadius = 200,
        radius = 200;

    var gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
    gradient.addColorStop(0, 'black');
    gradient.addColorStop(1, 'white');

    ctx.arc(x, y, radius, 0, 2 * Math.PI);

    ctx.fillStyle = gradient;
    ctx.fill();

    var shadowTexture = new THREE.Texture(canvas);
    shadowTexture.needsUpdate = true;

    var material = new THREE.MeshBasicMaterial({
        map: shadowTexture,
        side: THREE.DoubleSide
    });

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

JSfiddle showcasing implementation of method 2

Answer 2

There are multiple approaches to achieve this.

1) Utilizing a gradient image and applying it to the material, as suggested by @GuyGood in the comments

The code implementation would look similar to this:

    var circleGeometry = new THREE.CircleGeometry(200, 200, 32);
    var texture = THREE.ImageUtils.loadTexture('image/shadow.png');// replace with appropriate URL
    texture.anisotropy = renderer.getMaxAnisotropy();
    var material = new THREE.MeshBasicMaterial({
        map: texture,
        color:0xFFFFFF
    });
    mesh = new THREE.Mesh(circleGeometry, material);
    scene.add(mesh);

2) Another method worth mentioning involves creating a canvas element where you can draw any shape (in this case, a circle with a gradient) and then convert it into a texture to apply onto the material.

The code for this approach will be like so:

 var circleGeometry = new THREE.CircleGeometry(100, 100, 100);
    // create a texture on canvas and apply it on material
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    var x = 150,
        y = 75,
        innerRadius = 0,
        outerRadius = 200,
        radius = 200;

    var gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
    gradient.addColorStop(0, 'black');
    gradient.addColorStop(1, 'white');

    ctx.arc(x, y, radius, 0, 2 * Math.PI);

    ctx.fillStyle = gradient;
    ctx.fill();

    var shadowTexture = new THREE.Texture(canvas);
    shadowTexture.needsUpdate = true;

    var material = new THREE.MeshBasicMaterial({
        map: shadowTexture,
        side: THREE.DoubleSide
    });

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

Create a circle-shaped floor in THREE.JS that mimics the appearance of a shadow

Answer №1

JSfiddle showcasing implementation of method 2

Similar questions

React Next.js failing to trigger useEffect hook on live application

Verifying the existing user in a personalized Ajax form that is used to update a Woocommerce order

What is the inner workings of stream.Transform in Node.js?

Create a chronological timeline based on data from a JSON object

Eliminate list items with a keyboard stroke

What could be the reason for my button not updating its text using a method?

Implementing concurrent operations in React Native using Firebase, combining async/await with Promise.all

Is it possible to view the list of errors displayed by vscode when opening a JS file exclusively through the terminal?

Including an <a> tag within a JavaScript variable to utilize in an HTML statement

Covering the entire screen, the Div element takes up the entirety of

Guide to creating several AJAX requests using a for loop

Unfortunately, the datepicker feature does not seem to work properly on elements that have been dynamically added through the

Enhancing Element Generation and Data Association through jQuery

What's the best way to trigger an event within a tag in a Vue.js component?

This JavaScript operates in solitude, unable to collaborate with other JavaScripts

Navigation bar transforms color once a specific scroll position is reached

The ng-bootstrap datepicker does not allow setting a default date prior to selection

Why does the code require the use of window when the Javascript error object is not functioning properly?

The Angular ui-calendar introduces an innovative approach to event addition, providing users with

Performance of obtaining image data