three.js动态扩散圆

最新推荐文章于 2024-07-30 20:32:11 发布

A873054267

最新推荐文章于 2024-07-30 20:32:11 发布

阅读量3.7k

点赞数 2

分类专栏： webgl

本文链接：https://blog.csdn.net/A873054267/article/details/106902247

版权

webgl 专栏收录该内容

35 篇文章 8 订阅

订阅专栏

主要就是用圆柱体的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()