three.js動態擴散圓

主要就是用圓柱體的API，貼圖過後，動態改變其scale就行了，下面是所用的圖片，也是漸變的

   function transparentObject(geometry, material) {
            var obj = new THREE.Object3D();
            var mesh = new THREE.Mesh(geometry, material);
            mesh.material.side = THREE.BackSide; // back faces
            mesh.renderOrder = 0;
            obj.add(mesh);

            var mesh = new THREE.Mesh(geometry, material.clone());
            mesh.material.side = THREE.FrontSide; // front faces
            mesh.renderOrder = 1;
            obj.add(mesh);
            return obj
        }
        let url='../../images/ysThree/gradual_blue_01.png'
        const textureLoader = new THREE.TextureLoader();
        var map=textureLoader.load(url);
        map.repeat.x = 2;
        var geo = new THREE.CylinderGeometry(10, 10, 30, 50, 1, true);
        geo.translate(0, 15, 0);

        var material = new THREE.MeshStandardMaterial({
            transparent: true,
            map,
            opacity: 1,
        });
        let renderObject = transparentObject(geo, material);
        window.obj=renderObject
        scene.add(renderObject)

        function initControls() {
            const  controls = new THREE.OrbitControls(camera, renderer.domElement);
            // 如果使用animate方法時，將此函數刪除
            //controls.addEventListener( 'change', render );
            // 使動畫循環使用時阻尼或自轉 意思是否有慣性
            controls.enableDamping = true;
            //動態阻尼係數 就是鼠標拖拽旋轉靈敏度
            //controls.dampingFactor = 0.25;
            //是否可以縮放
            controls.enableZoom = true;
            //是否自動旋轉
            controls.autoRotate = true;
            controls.autoRotateSpeed = 0.5;
            //設置相機距離原點的最遠距離
            controls.minDistance = 1;
            //設置相機距離原點的最遠距離
            //controls.maxDistance = 200;
            //是否開啓右鍵拖拽
            controls.enablePan = true
            return controls
        }
        const  controls = initControls()

        function animate() {
            console.log('增加')
            renderObject.scale.x=renderObject.scale.x+0.01
            renderObject.scale.z=renderObject.scale.z+.01
            if(renderObject.scale.x>3){
                renderObject.scale.x=1
                renderObject.scale.z=1
            }
            controls.update()
            renderer.render(scene,camera)
            requestAnimationFrame(animate)
        }
        animate()