Question

<!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;它还不起作用

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

Answer 2

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

只是sphere.material.opacity ....

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

Three.js球体变化透明度无效？

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

2 个答案: