three.js怎么改变贴图的透明度?

发布于 2022-09-07 11:44:17 字数 1956 浏览 20 评论 0

我创建的一个球模型, 再在模型上贴了一张图片, 然后缓慢的让这个球消失,改变透明度没有效果! 求赐教

付完整代码:

<!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)
        
        // 1秒后开始慢慢变透明。
        setTimeout(function(){
            console.log(sphereGeometry);
            setInterval(function(){
                // 改变球的透明度 (我这里修改透明度无效?)
                sphereMaterial.opacity -= 0.05;
                sphere.material.opacity -= 0.05;
            }, 100)
        }, 1000)
    </script>
</body>

</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梦中的蝴蝶 2022-09-14 11:44:17

你把setTimeout这块代码改一下:

setTimeout(function(){
    console.log(sphereGeometry);
    var timer = setInterval(function(){
        // 改变球的透明度 (我这里修改透明度无效?)
        console.log(sphereMaterial.opacity);
        console.log(sphere.material.opacity);
        // 因为sphereMaterial.opacity和sphere.material.opacity值是相等的,所以只判断一个
        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;这行代码,其作用是让材质设置透明属性为true

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文