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>

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

<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之间。您需要将滑块中的值（通常为0 - 100）除以100.如下所示：

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

其他选项，如prisoner849所述，是手动设置滑块值：

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

此外，您不需要每次都创建新材质（它会降低整个渲染过程的速度）。您应该直接编辑应用的材料，如下所示：

scene.something.material.opacity = val;

R87

更改不透明度时，ThreeJS更新场景

1 个答案: