javascript - ThreeJS 更改不透明度时更新场景

Question

这是我的对象的构造函数:

<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>

我将此对象添加到场景中，在我的界面中，我有一个 slider ，可以使用此函数更改对象的不透明度:

<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>

但在我的场景中我没有看到任何更新。如何即时更新场景中不透明度的变化？

Answer 1

Opacity取 0.0 - 1.0 之间的值。您需要将从 slider 中获取的值(通常是 0 - 100)除以 100。如下所示:

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

正如囚犯849提到的，其他选项是手动设置 slider 值:

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

这允许您直接获取值:

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">

此外，您不需要每次都创建新 Material (它会减慢整个渲染过程)。您应该直接编辑应用的 Material ，如下所示:

scene.something.material.opacity = val;

r87