三.js球体改变透明度无效？答案

【问题标题】：Three.js sphere change transparency invalid?三.js球体改变透明度无效？
【发布时间】：2018-06-05 23:11:25
【问题描述】：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/three.min.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<script type="text/javascript">
    var w = window.innerWidth - 30;
    var h = window.innerHeight - 30;
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(40, w / h, 0.1, 1000);
    camera.position.set(50, 50, 50);
    camera.lookAt(scene.position);
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xcccccc));
    renderer.setSize(w, h);
    var axes = new THREE.AxisHelper(30);
    scene.add(axes);
    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    var img = THREE.ImageUtils.loadTexture('./img/tt4.png');
    var sphereGeometry = new THREE.SphereGeometry(10, 32, 16);
    var sphereMaterial = new THREE.MeshBasicMaterial({
        map: img
    });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(10, 10, 10);
    scene.add(sphere);
    setInterval(function () {
        sphere.rotateY(Math.PI / 180);
        renderer.render(scene, camera);
    }, 1000 / 60)
    setTimeout(function(){
        console.log(sphereGeometry);
        setInterval(function(){
            // Modify transparency It does't work
            sphereMaterial.opacity -= 0.05;
            sphere.material.opacity -= 0.05;
        }, 100)
    }, 1000)
</script>
</body>
</html>

我想改变计时器内球体的透明度，直到它消失，但它不起作用？我尝试使用数组 sphere.material[0].opacity -= 0.05; 的形式还不行

【问题讨论】：

标签： canvas three.js

【解决方案1】：

你应该改变

var sphereMaterial = new THREE.MeshBasicMaterial({
        map: img
    });

到

var sphereMaterial = new THREE.MeshBasicMaterial({
        map: img, transparent: true
    });

然后使用

    sphereMaterial.opacity -= 0.05;

没有必要使用

    sphere.material.opacity -= 0.05;

【讨论】：

【解决方案2】：

sphere.material 在这种情况下不是数组，所以没有 [0]

只是 sphere.material.opacity....

有时 .material 是一个数组，但通常使用从文件加载的自定义网格，或者有目的地使用多种材质构建。

【讨论】：