Creating a visual representation of an image within a Three.js environment using SVGRenderer, or alternatively generating spheres for rendering

Question

Creating a visual representation of an image within a Three.js environment using SVGRenderer, or alternatively generating spheres for rendering

I have a <circle> element within an SVG file, where I've used a <radialGradient> to create the appearance of it being a sphere:

<svg version="1.1" id="sphere_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="640px" height="640px" viewBox="0 0 640 640" enable-background="new 0 0 640 640" xml:space="preserve">
    <defs>
        <radialGradient id="sphere_gradient" cx="292.3262" cy="287.4077" r="249.2454" fx="147.7949" fy="274.5532" gradientTransform="matrix(1.0729 0 0 1.0729 -23.3359 -23.3359)" gradientUnits="userSpaceOnUse">
            <stop id="sphere_gradient_0" offset="0" style="stop-color:#F37D7F"/>
            <stop id="sphere_gradient_1" offset="0.4847" style="stop-color:#ED1F24"/>
            <stop id="sphere_gradient_2" offset="1" style="stop-color:#7E1416"/>
        </radialGradient>
    </defs>
    <circle fill="url(#sphere_gradient)" cx="320" cy="320" r="320"/>
</svg>

The visual representation is showcased here:

JSFiddle Link

To take this concept further into a three.js environment using a WebGLRenderer, I rely on Gabe Lerner's canvg library:

/* The svg asset containing the circle element */
var red_svg_html = new String($('#sphere_asset').html()); 
var red_svg_canvas = document.createElement("canvas");
canvg(red_svg_canvas, red_svg_html);
var red_svg_texture = new THREE.Texture(red_svg_canvas);
var red_particles = new THREE.Geometry();
var red_particle_material = new THREE.PointCloudMaterial({ 
    map: red_svg_texture, 
    transparent: true, 
    size: 0.15, 
    alphaTest: 0.10 
});
var red_particle_count = 25;
for (var p = 0; p < red_particle_count; p++) {
    var pX = 0.9 * (Math.random() - 0.5),
        pY = 0.9 * (Math.random() - 0.5),
        pZ = 0.9 * (Math.random() - 0.5),
        red_particle = new THREE.Vector3(pX, pY, pZ);
    red_particles.vertices.push(red_particle);
}
var red_particle_system = new THREE.PointCloud(red_particles, red_particle_material);
scene.add(red_particle_system);

The transition from WebGLRenderer to SVGRenderer aims to offer users control over orientation for exporting vector images (SVG or PDF) suitable for high-quality publications.

In my attempts utilizing three.js' SVG sandbox example as a foundation, I experimented with multiple methods but faced challenges. Any advice from experienced three.js users would be greatly appreciated.

Initially, I tried rendering PNG images through canvg and integrating them into <image> nodes:

// Code snippet

No results were visible within the viewbox.

Another approach incorporated THREE.Sprite objects along with canvg and THREE.Texture:

// Additional code segment

While there was slight progress, white opaque boxes replaced the spheres in the output.

A third method involved creating nested <svg> elements linked to a referenced <radialGradient>, failing to render any nodes successfully:

// More code examples

Changing the fill attribute provided some insight but fell short compared to desired outcomes.

In conclusion, is there a feasible and efficient way to generate spherical entities or similar rounded particles within space using a SVGRenderer in conjunction with three.js?

javascript svg three.js webgl

Answer 1

Answer №1

Most attributes within SVG typically exist in the null namespace.

red_node.setAttributeNS('http://www.w3.org/2000/svg', 'height', '10');
red_node.setAttributeNS('http://www.w3.org/2000/svg', 'width', '10');

A more accurate representation would be:

red_node.setAttribute('height', '10');
red_node.setAttribute('width', '10');

For what it's worth,

red_node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', red_png_data);

ideally should be written as

red_node.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', red_png_data);

although, your original format will still function in most user agents.

In the last example, the stop elements must belong to the SVG namespace, for instance:

var stop0 = document.createElementNS(null, "stop");

should be

var stop0 = document.createElementNS(xmlns, "stop");

If a gradient lacks stops, it won't be visible until you change the fill to red.

SVG follows a painter's model where objects are drawn based on their order in the file. To overlay something on top of another object, it needs to be placed later in the file.

Answer 2

Most attributes within SVG typically exist in the null namespace.

red_node.setAttributeNS('http://www.w3.org/2000/svg', 'height', '10');
red_node.setAttributeNS('http://www.w3.org/2000/svg', 'width', '10');

A more accurate representation would be:

red_node.setAttribute('height', '10');
red_node.setAttribute('width', '10');

For what it's worth,

red_node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', red_png_data);

ideally should be written as

red_node.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', red_png_data);

although, your original format will still function in most user agents.

In the last example, the stop elements must belong to the SVG namespace, for instance:

var stop0 = document.createElementNS(null, "stop");

should be

var stop0 = document.createElementNS(xmlns, "stop");

If a gradient lacks stops, it won't be visible until you change the fill to red.

SVG follows a painter's model where objects are drawn based on their order in the file. To overlay something on top of another object, it needs to be placed later in the file.

Answer 3

Answer №2

To solve the issue you are experiencing with rendering Particles in your SVGRenerer.js file, follow these steps:

function renderParticle( v1, element, material, scene ) {


        _svgNode = getCircleNode( _circleCount++ );
        _svgNode.setAttribute( 'cx', v1.x );
        _svgNode.setAttribute( 'cy', v1.y );
        _svgNode.setAttribute( 'r', element.scale.x * _svgWidthHalf );

        if ( material instanceof THREE.ParticleCircleMaterial ) {

            if ( _enableLighting ) {

                _color.r = _ambientLight.r + _directionalLights.r + _pointLights.r;
                _color.g = _ambientLight.g + _directionalLights.g + _pointLights.g;
                _color.b = _ambientLight.b + _directionalLights.b + _pointLights.b;

                _color.r = material.color.r * _color.r;
                _color.g = material.color.g * _color.g;
                _color.b = material.color.b * _color.b;

                _color.updateStyleString();

            } else {

                _color = material.color;

            }

            _svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );

        }

        _svg.appendChild( _svgNode );


    }

Answer 4

To solve the issue you are experiencing with rendering Particles in your SVGRenerer.js file, follow these steps:

function renderParticle( v1, element, material, scene ) {


        _svgNode = getCircleNode( _circleCount++ );
        _svgNode.setAttribute( 'cx', v1.x );
        _svgNode.setAttribute( 'cy', v1.y );
        _svgNode.setAttribute( 'r', element.scale.x * _svgWidthHalf );

        if ( material instanceof THREE.ParticleCircleMaterial ) {

            if ( _enableLighting ) {

                _color.r = _ambientLight.r + _directionalLights.r + _pointLights.r;
                _color.g = _ambientLight.g + _directionalLights.g + _pointLights.g;
                _color.b = _ambientLight.b + _directionalLights.b + _pointLights.b;

                _color.r = material.color.r * _color.r;
                _color.g = material.color.g * _color.g;
                _color.b = material.color.b * _color.b;

                _color.updateStyleString();

            } else {

                _color = material.color;

            }

            _svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );

        }

        _svg.appendChild( _svgNode );


    }

Answer 5

Answer №3

When attempting to manipulate SVG elements, one approach is to implement the Snap.svg library. By extracting the svg element(s) from canvg and organizing it into a snap structure (resembling a paper for snap), you can utilize the paper.toString() method to generate the code for the SVG File.

var paper = Snap("#... ");        // Incorporating the canvg svg element into Snap structure 
console.log( paper.toString());   // Retrieve the SVG code

An alternative option is to employ fabric.js to convert canvas to SVG:

var svg = canvas.toSVG();

Another possibility is to utilize the canvas2svg library.

Answer 6

When attempting to manipulate SVG elements, one approach is to implement the Snap.svg library. By extracting the svg element(s) from canvg and organizing it into a snap structure (resembling a paper for snap), you can utilize the paper.toString() method to generate the code for the SVG File.

var paper = Snap("#... ");        // Incorporating the canvg svg element into Snap structure 
console.log( paper.toString());   // Retrieve the SVG code

An alternative option is to employ fabric.js to convert canvas to SVG:

var svg = canvas.toSVG();

Another possibility is to utilize the canvas2svg library.

Creating a visual representation of an image within a Three.js environment using SVGRenderer, or alternatively generating spheres for rendering

Answer №1

Answer №2

Answer №3

Similar questions

sending a parameter in the reverse url using JavaScript

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Configuring Angular routes based on service method invocation

The model is only loaded when I access the developer toolbar

How can I create a jumping animation effect for my <li> element in JQuery?

Attempting to condense an array of objects into a consolidated and combined array of objects

What is the best way to personalize the collector for each individual?

How can you quickly track the AJAX requests being sent?

The total of a collection of values stored within a property nested within the main object

Determine the number of centimeters on the page as you scroll with jQuery

Erase the dynamically loaded page using ajax and conceal the div

"An error message stating 'Express: The body is not defined when

Is it possible to swap out one div for another div from an external HTML page?

Event delay with JavaScript and jQuery

Generating a JSON file by combining data from two separate lists in order to render a visually appealing stacked bar chart

Is there a way to match the color of a fixed element with the background elements' color?

Introduction to React with Typescript: Greeting the World

Issues with APIs surfaced following the transition from DataGridPro to DataGridPremium

JS code is not executing

Replace text using Selenium in Python