Manipulating an SVG graphic's attributes by linking them to an external geometry in Three.js

Question

Manipulating an SVG graphic's attributes by linking them to an external geometry in Three.js

Delving into the world of Three.js, I've embarked on a project to design a 3D kit creator for my college assignment.

Through my study, I've grasped the basics of setting up scenes, scene objects, geometries, materials, and textures.

I've reached a stage where I've established a scene, imported an external geometry - a .json model from Blender, and successfully applied a simple SVG graphic as a texture.

https://i.sstatic.net/cGfHB.png

Yet, I've hit a roadblock. The challenge now is to personalize the colors of the SVG (jersey design) on the model.

My initial plan was to dynamically manipulate the HTML attributes of the mapped SVG using JavaScript.

However, I encountered some issues with this approach:

Three.js requires models and textures to be set up within it before being displayed in the browser through a canvas element, making it difficult to access and alter SVG attributes through the browser inspector.
The texture loader function of Three.js seems to only accept file paths as inputs instead of directly using raw SVG code.

After seeking advice, I was encouraged to explore if there are any built-in features in Three.js that allow manipulation of SVG textures or ways to manually access SVG attributes.

Despite extensively searching through resources and documentation, I haven't found a solution yet.

Which brings me to my query:

How can one access and modify the properties of an SVG graphic applied as a texture to an external geometry in Three.js?

Perhaps there's something essential that I've missed or alternate approaches that could be explored? In any case, thank you for dedicating your time to read, offer insights, and provide assistance.

Stay blessed and appreciative.

javascript svg three.js texture-mapping

Answer 1

Answer №1

To address this issue, a potential solution involves dynamically creating a texture programmatically by converting an array of pixels into a texture. This texture can then be utilized in a custom shader.

For further insights, you may refer to the following article: Exploring Dynamic Texture Implementation in Custom Shaders.

While this process is demonstrated using Autodesk Forge Viewer instead of plain Three.js, the fundamental methodology remains consistent as it is reliant on Three.js code.


//Implementation of customized shader with updatable dynamic texture
createShader (options) {

  // Vertex Shader code
  const vertexShader = options.vertexShader || `
    attribute float pointSize;
    attribute vec4 color;
    varying vec4 vColor;
    void main() {
      vec4 vPosition = modelViewMatrix * vec4(position, 1.0);
      gl_Position = projectionMatrix * vPosition;
      gl_PointSize = pointSize;
      vColor = color;
    }
  `

  // Fragment Shader code
  const fragmentShader = options.fragmentShader || `
    uniform sampler2D texture;
    varying vec4 vColor;
    void main() {
      vec4 tex = texture2D(texture, gl_PointCoord);
      if (tex.a < 0.2) discard;
      if (vColor.a == 0.0) {
        gl_FragColor = vec4(tex.r, tex.g, tex.b, tex.a);
      } else {
        gl_FragColor = vColor;
      }
    }
  `

  const tex = options.texture || defaultTex

  // Shader material parameters
  const shaderParams = options.shaderParams || {
      side: THREE.DoubleSide,
      depthWrite: false,
      depthTest: false,
      fragmentShader,
      vertexShader,
      opacity: 0.5,
      attributes: {
        pointSize: {
          type: 'f',
          value: []
        },
        color: {
          type: 'v4',
          value: []
        }
      },
      uniforms: {
        texture: {
          value: THREE.ImageUtils.loadTexture(tex),
          type: 't'
        }
      }
    }

  // creates shader material
  const material =
    new THREE.ShaderMaterial(
      shaderParams)

  const generateTexture = (size, radius) => {

    const pixels = []

    for (let u = 0; u < size; ++u) {

      for (let v = 0; v < size ; ++v) {

        const dist = Math.sqrt(
          (u/size - 0.5) * (u/size - 0.5) +
          (v/size - 0.5) * (v/size - 0.5))

        if (dist < 0.1) {

          pixels.push(0xff, 0x00, 0x00, 0xff)

        } else if (dist < (radius - 0.05)) {

          pixels.push(0xff, 0x00, 0x00, 0x00)

        } else if (dist < radius) {

          pixels.push(0xff, 0x00, 0x00, 0xff)

        } else {

          pixels.push(0x00, 0x00, 0x00, 0x00)
        }
      }
    }

    const dataTexture = new THREE.DataTexture (
      Uint8Array.from (pixels),
      size, size,
      THREE.RGBAFormat,
      THREE.UnsignedByteType,
      THREE.UVMapping
    )

    dataTexture.minFilter = THREE.LinearMipMapLinearFilter
    dataTexture.magFilter = THREE.LinearFilter 
    dataTexture.needsUpdate = true

    return dataTexture
  }

  const stopwatch = new Stopwatch()

  let radius = 0.0

  return {
    setTexture: (tex) => {

      const {texture} = shaderParams.uniforms

      texture.value = THREE.ImageUtils.loadTexture(tex)

      texture.needsUpdate = true

    },
    update: () => {

      const dt = stopwatch.getElapsedMs() * 0.001

      radius += dt * 0.25

      radius = radius > 0.5 ? 0.0 : radius

      const {texture} = shaderParams.uniforms

      texture.value = generateTexture(96, radius)

      texture.needsUpdate = true

    },
    material
  }
}

https://i.sstatic.net/bLRyO.gif

Answer 2

To address this issue, a potential solution involves dynamically creating a texture programmatically by converting an array of pixels into a texture. This texture can then be utilized in a custom shader.

For further insights, you may refer to the following article: Exploring Dynamic Texture Implementation in Custom Shaders.

While this process is demonstrated using Autodesk Forge Viewer instead of plain Three.js, the fundamental methodology remains consistent as it is reliant on Three.js code.


//Implementation of customized shader with updatable dynamic texture
createShader (options) {

  // Vertex Shader code
  const vertexShader = options.vertexShader || `
    attribute float pointSize;
    attribute vec4 color;
    varying vec4 vColor;
    void main() {
      vec4 vPosition = modelViewMatrix * vec4(position, 1.0);
      gl_Position = projectionMatrix * vPosition;
      gl_PointSize = pointSize;
      vColor = color;
    }
  `

  // Fragment Shader code
  const fragmentShader = options.fragmentShader || `
    uniform sampler2D texture;
    varying vec4 vColor;
    void main() {
      vec4 tex = texture2D(texture, gl_PointCoord);
      if (tex.a < 0.2) discard;
      if (vColor.a == 0.0) {
        gl_FragColor = vec4(tex.r, tex.g, tex.b, tex.a);
      } else {
        gl_FragColor = vColor;
      }
    }
  `

  const tex = options.texture || defaultTex

  // Shader material parameters
  const shaderParams = options.shaderParams || {
      side: THREE.DoubleSide,
      depthWrite: false,
      depthTest: false,
      fragmentShader,
      vertexShader,
      opacity: 0.5,
      attributes: {
        pointSize: {
          type: 'f',
          value: []
        },
        color: {
          type: 'v4',
          value: []
        }
      },
      uniforms: {
        texture: {
          value: THREE.ImageUtils.loadTexture(tex),
          type: 't'
        }
      }
    }

  // creates shader material
  const material =
    new THREE.ShaderMaterial(
      shaderParams)

  const generateTexture = (size, radius) => {

    const pixels = []

    for (let u = 0; u < size; ++u) {

      for (let v = 0; v < size ; ++v) {

        const dist = Math.sqrt(
          (u/size - 0.5) * (u/size - 0.5) +
          (v/size - 0.5) * (v/size - 0.5))

        if (dist < 0.1) {

          pixels.push(0xff, 0x00, 0x00, 0xff)

        } else if (dist < (radius - 0.05)) {

          pixels.push(0xff, 0x00, 0x00, 0x00)

        } else if (dist < radius) {

          pixels.push(0xff, 0x00, 0x00, 0xff)

        } else {

          pixels.push(0x00, 0x00, 0x00, 0x00)
        }
      }
    }

    const dataTexture = new THREE.DataTexture (
      Uint8Array.from (pixels),
      size, size,
      THREE.RGBAFormat,
      THREE.UnsignedByteType,
      THREE.UVMapping
    )

    dataTexture.minFilter = THREE.LinearMipMapLinearFilter
    dataTexture.magFilter = THREE.LinearFilter 
    dataTexture.needsUpdate = true

    return dataTexture
  }

  const stopwatch = new Stopwatch()

  let radius = 0.0

  return {
    setTexture: (tex) => {

      const {texture} = shaderParams.uniforms

      texture.value = THREE.ImageUtils.loadTexture(tex)

      texture.needsUpdate = true

    },
    update: () => {

      const dt = stopwatch.getElapsedMs() * 0.001

      radius += dt * 0.25

      radius = radius > 0.5 ? 0.0 : radius

      const {texture} = shaderParams.uniforms

      texture.value = generateTexture(96, radius)

      texture.needsUpdate = true

    },
    material
  }
}

https://i.sstatic.net/bLRyO.gif

Manipulating an SVG graphic's attributes by linking them to an external geometry in Three.js

Answer №1

Similar questions

Begin composing in Excel

Exploring the power of D3's nested appends and intricate data flow

The ng-repeat function in AngularJs does not display the data despite receiving a successful 200 response

Leveraging _.after() within an asynchronous callback, causing contamination of an array variable

Struggling with a Python CGI script that refuses to open a file sent to it via AJAX

The seamless integration of React.js with HTML

The functionality of $state.go within $stateChangeStart in the app.run is not functioning properly in AngularJS

Is there a way to display the "back button" on a subview?

Creating session variables in Joomla using checkboxes and AJAX

Using the onclick event in JavaScript to create transition effects for swapping images

Guide to interacting with the Li element using JavaScript in Selenium

Tips for handling a promise that has not been fulfilled

What is the best method to update the accessor value of my react table depending on certain data conditions?

Geometry of a Wireframe Cube

The Xero Node OAuth Authorize Callback URL is malfunctioning after granting access

Calculating a 30-minute interval between two given times using JavaScript/jQuery

How to retrieve a single value from a collection document in Meteor

Are Viewmodel contents empty after ajax request?

Import a JavaScript file with beneficial test functions for selenium testing

The elegant-admin template's mobile navigation toggle is missing