Android开发-仿Soul社交应用首页3D星球视图旋转样式

关注

VIP免费原创最新推荐文章于 2026-05-02 10:41:02 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

WebGL实现soul星球效果最近在研究webGL，觉得soul app的星球挺有意思的，于是就实现了一下，中间涉及的细节和知识点挺多的，写篇博客分享一下jcode使用不同的goldenRatio可以得到非常多分布效果，采用 2.自由转动因为要解决万向锁的问题，所以不能使用、、来旋转，应当使用四元数这里通过内部放置了一个半透明的黑色小球来实现为了使小球从正面转动的背面的过程中可以平滑的变暗，这里还需要把半透明小球的边沿，具体实现就是使用GLSL的插值函数但是需要注意的是需要关闭小球的,否则会阅读详情

https://blog.youkuaiyun.com/fukaimei/article/details/107938681

前言

前段时间看到Soul社交应用首页的3D星球视图旋转样式（如下图），所以就想自己能不能实现一个类似的功能。本着不要重复造轮子的原则，所以在网上找有没有开源的轮子，果然真找到有大神开源的依赖库，大神开源的依赖库如下：https://github.com/misakuo/3dTagCloudAndroid，那么下面看看如何实现仿Soul社交应用首页3D星球视图旋转样式的功能。

编码实现

首先在AS的内层build.gradle里添加3d星球视图旋转样式的依赖

dependencies {
    ........
    // 3d星球视图旋转样式
    implementation 'com.moxun:tagcloudlib:1.2.0'
}

添加 Layout 布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#12121F"
    tools:context=".MainActivity">

    <com.moxun.tagcloudlib.view.TagCloudView
        android:id="@+id/mTagCloudView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:autoScrollMode="uniform"
        app:radiusPercent="0.8"
        app:scrollSpeed="1" />

</androidx.constraintlayout.widget.ConstraintLayout>

xml布局文件中的<com.moxun.tagcloudlib.view.TagCloudView />就是用来加载3D星球视图旋转的视图的。

&nb