Fade in/out or apply opacity to a three.js object

Question

Fade in/out or apply opacity to a three.js object

I'm working on a graphical web project using three.js.

I have many circles scattered like this.

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

I'm curious if the opacity of objects can be reduced as the distance between the object and camera increases (fade out). Is it also possible to increase the opacity as the distance decreases (fade in)?

I tried looking for answers in the documentation (

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

), but couldn't find a clear explanation.

Does anyone know how to achieve this effect?

Thank you.

javascript three.js

Answer 1

Answer №1

Modifying the transparency based on camera proximity with an object is not directly supported by the default materials in three.js. However, you can customize the fragment shader of a material to achieve this effect by adding the following code snippet:

gl_FragColor.a *= pow( gl_FragCoord.z, f );

In the demo below, I have altered the MeshNormalMaterial using onBeforeCompile(). The concept is to gradually decrease the opacity as objects approach the camera. You can adjust the transition effect using the variable f, where a higher value signifies objects becoming transparent sooner.

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 50;

  scene = new THREE.Scene();

  const geometry = new THREE.BoxBufferGeometry(2, 2, 2);
  const material = new THREE.MeshNormalMaterial({
    transparent: true
  });

  material.onBeforeCompile = function(shader) {

    shader.fragmentShader = shader.fragmentShader.replace(
      'gl_FragColor = vec4( packNormalToRGB( normal ), opacity );',
      [
        'gl_FragColor = vec4( packNormalToRGB( normal ), opacity );',
        'gl_FragColor.a *= pow( gl_FragCoord.z, 50.0 );',
      ].join('\n')
    );

  };

  for (let i = 0; i < 1000; i++) {

    const object = new THREE.Mesh(geometry, material);
    object.position.x = Math.random() * 80 - 40;
    object.position.y = Math.random() * 80 - 40;
    object.position.z = Math.random() * 80 - 40;
    object.rotation.x = Math.random() * 2 * Math.PI;
    object.rotation.y = Math.random() * 2 * Math.PI;
    object.rotation.z = Math.random() * 2 * Math.PI;
    object.scale.x = Math.random() + 0.5;
    object.scale.y = Math.random() + 0.5;
    object.scale.z = Math.random() + 0.5;
    scene.add(object);

  }

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  new THREE.OrbitControls(camera, renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46322e3423230676687775776875">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d918b9c9cb9c9d7c8cac8d7ca">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>

Answer 2

Modifying the transparency based on camera proximity with an object is not directly supported by the default materials in three.js. However, you can customize the fragment shader of a material to achieve this effect by adding the following code snippet:

gl_FragColor.a *= pow( gl_FragCoord.z, f );

In the demo below, I have altered the MeshNormalMaterial using onBeforeCompile(). The concept is to gradually decrease the opacity as objects approach the camera. You can adjust the transition effect using the variable f, where a higher value signifies objects becoming transparent sooner.

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 50;

  scene = new THREE.Scene();

  const geometry = new THREE.BoxBufferGeometry(2, 2, 2);
  const material = new THREE.MeshNormalMaterial({
    transparent: true
  });

  material.onBeforeCompile = function(shader) {

    shader.fragmentShader = shader.fragmentShader.replace(
      'gl_FragColor = vec4( packNormalToRGB( normal ), opacity );',
      [
        'gl_FragColor = vec4( packNormalToRGB( normal ), opacity );',
        'gl_FragColor.a *= pow( gl_FragCoord.z, 50.0 );',
      ].join('\n')
    );

  };

  for (let i = 0; i < 1000; i++) {

    const object = new THREE.Mesh(geometry, material);
    object.position.x = Math.random() * 80 - 40;
    object.position.y = Math.random() * 80 - 40;
    object.position.z = Math.random() * 80 - 40;
    object.rotation.x = Math.random() * 2 * Math.PI;
    object.rotation.y = Math.random() * 2 * Math.PI;
    object.rotation.z = Math.random() * 2 * Math.PI;
    object.scale.x = Math.random() + 0.5;
    object.scale.y = Math.random() + 0.5;
    object.scale.z = Math.random() + 0.5;
    scene.add(object);

  }

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  new THREE.OrbitControls(camera, renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46322e3423230676687775776875">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d918b9c9cb9c9d7c8cac8d7ca">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>

Answer 3

Answer №2

I have created a demonstration where you can establish a function to determine the opacity based on the distance between the camera and mesh. The closer they are, the higher the opacity will be. Here is the formula I used:

opacity = -1/400*distance

Make sure to set transparent to true and update the opacity every frame. Check out my sample.

Answer 4

I have created a demonstration where you can establish a function to determine the opacity based on the distance between the camera and mesh. The closer they are, the higher the opacity will be. Here is the formula I used:

opacity = -1/400*distance

Make sure to set transparent to true and update the opacity every frame. Check out my sample.

Fade in/out or apply opacity to a three.js object

Answer №1

Answer №2

Similar questions

What methods can I use to minimize the frequency of the blue box appearing around text?

External JS file not executing function in AJAX response (only runs when function is directly included in AJAX response)

Ways to center your attention on the Textbox

Using Jquery to trigger a function with varying parameters by clicking on multiple buttons

Implementing JQuery to Traverse Through JSON Data in AJAX Response

What is the process for advancing an object in Three.js?

What is the best way to display every comment and response using console.log()?

Customize Button Colors in Bootstrap 4

What is the best way to organize a massive file over 10Gb filled with words?

Easy steps to automatically disable a checkbox once the expiration date has been reached

Combining load and change events in jQuery at the same time

Is it possible to establish a default URL for the expect() function?

Bar chart in Highcharts vanishing following the update from version 10.2.1 to 10.3.1

The Vue.js scripts and styles declared in the index.html file seem to be malfunctioning

looking to display the latest status value in a separate component

The event listener for the hardware back button in $ionicPlatform is being triggered repeatedly

Issue with Jquery plugin malfunctioning on dynamically loaded elements via Ajax requests

The dynamic JavaScript in Bootstrap 4 seems to be malfunctioning, despite working perfectly in Bootstrap 3

Rendering Based on Conditions in React Native

Troubleshooting Axios Error while Sending Data in MERN Stack Application