时间戳

首页 > 解决方案 > 三.js球体改变透明度无效？

canvas - 三.js球体改变透明度无效？

问题描述

<!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; 的形式 它还不行

标签： canvasthree.js

解决方案

你应该改变

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;

推荐阅读