鍍金池/ 問答/HTML5  HTML/ three.js怎么改變貼圖的透明度？

three.js怎么改變貼圖的透明度？

我創(chuàng)建的一個(gè)球模型， 再在模型上貼了一張圖片， 然后緩慢的讓這個(gè)球消失，改變透明度沒有效果！ 求賜教

付完整代碼：

<!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);       //創(chuàng)建一個(gè)球體
        var sphereMaterial = new THREE.MeshBasicMaterial({
            map: img
        });
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        sphere.position.set(10, 10, 10);
        scene.add(sphere);


        // 旋轉(zhuǎn)
        setInterval(function () {
            sphere.rotateY(Math.PI / 180);
            renderer.render(scene, camera);
        }, 1000 / 60)
        
        // 1秒后開始慢慢變透明。
        setTimeout(function(){
            console.log(sphereGeometry);
            setInterval(function(){
                // 改變球的透明度 (我這里修改透明度無效？)
                sphereMaterial.opacity -= 0.05;
                sphere.material.opacity -= 0.05;
            }, 100)
        }, 1000)
    </script>
</body>

</html>
回答
編輯回答
瘋子范

你把setTimeout這塊代碼改一下：

setTimeout(function(){
    console.log(sphereGeometry);
    var timer = setInterval(function(){
        // 改變球的透明度 (我這里修改透明度無效？)
        console.log(sphereMaterial.opacity);
        console.log(sphere.material.opacity);
        // 因?yàn)閟phereMaterial.opacity和sphere.material.opacity值是相等的，所以只判斷一個(gè)
        if(sphereMaterial.opacity > 0){
            sphereMaterial.opacity -= 0.05;
            sphere.material.opacity -= 0.05;
        }
        else {
            sphere.material.transparent = true;
            clearInterval(timer);
        }
    }, 100)
}, 1000)

你主要沒加sphere.material.transparent = true;這行代碼，其作用是讓材質(zhì)設(shè)置透明屬性為true

2018年6月28日 05:44