CODEWITHSUNDEEP
javascriptjquerythree.js
Fatine Boujnouni
Fatine Boujnouni

Reputation: 57

ThreeJS Update scene when changing opacity

Here is the constructor of my object : 

<code>class Something {
    constructor(mesh = undefined, material = undefined) {
       this.mesh = undefined;
        material = material;
        this.gui = undefined;
        if (mesh) {
            this.mesh_opacity = 1;
            this.created = true;
            this.mesh = new THREE.Mesh(mesh.geometry, new THREE.MeshPhongMaterial({
            // wireframe: true,
            transparent : true,
            opacity: this.mesh_opacity,
            color : 0xffffff
        }));
}
</code>

I add this object to the scene, and in my interface, I have a slider where I can change the opacity of my object using this function : 

<code><script type="text/javascript">
    $('#slider').on('change', function(){
        val = $("#slider").val();
        scene.something.mesh_opacity = val;
        scene.something.material = new THREE.MeshPhongMaterial({
            transparent : true,
            opacity: val,
            color : 0xffffff
        });
        scene.something.material.needsUpdate = true;
    })
</script></code>

but in my scene I don't see any updates. How can I update the change of the opacity in scene instantly ?

Upvotes: 0

Views: 987

Answers (1)

juanferrer
juanferrer

Reputation: 1250

Opacity takes a value between 0.0 - 1.0. You need to divide the value you take from your slider (usually 0 - 100) by 100. Something like the following:

val = $("#slider").val() / 100;

Other option, as mentioned by prisoner849, is to set your slider values manually:

<input type="range" id="slider" min="0" max="1" step="0.01" value="0.5" class="slider">

Which allows you to get the value directly:

val = $("#slider").val();


var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  100
);

var renderer = new THREE.WebGLRenderer();

var light = new THREE.PointLight(0xcccccc, 1);
light.castShadows = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.SphereGeometry(1, 20, 20);
var material = new THREE.MeshPhongMaterial({
  transparent: true,
  opacity: 1,
  color: 0xffffff
});
var sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);
scene.add(light);

camera.position.z = 5;

light.position.x = 5;
light.position.y = 5;
light.position.z = 5;

document.getElementById("slider").addEventListener("change", function() {
  sphere.material.opacity = document.getElementById("slider").value;
});

var render = function() {
  requestAnimationFrame(render);

  renderer.render(scene, camera);
};

render();
body {
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%
}

.slider {
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

<input type="range" id="slider" min="0" max="1" step="0.01" value="0.5" class="slider">

Also, you don't need to create a new material every time (it slows down the whole rendering process). You should directly edit the material applied, like so:

scene.something.material.opacity = val;

r87

Upvotes: 3

Related Questions