Three.js 的组件库react-three-fiber和react-three-drei

发布时间：2024年01月23日

在这里插入图片描述
类似于这种字体，可以用Text或者Text3d，但是要处理一个问题，就是要保证字体一直正面视角。
这中间的处理比较的麻烦，于是可以使用react-three-drei中的Html来做这件事

<Html position={position} center  distanceFactor={12} >
              <div
                style={{
                  position: "relative",
                  display: "flex",
                  flexDirection: "column",
                  ...extraStyle,
                  textAlign:placement
                }}
              >
                <div
                  class="circle"
                  style={{ position: "absolute", [placement]: 0 }}
                ></div>
                <b
                  style={{
                    color: "white",
                    fontSize: "16px",
                    fontWeight: "bold",
                  }}
                >
                  {warnTitle}
                </b>
                <span
                  style={{
                    color: "white",
                    fontSize: "12px",
                    display: "block",
                    wordBreak: "keep-all",
                  }}
                >
                  {warnText}
                </span>
              </div>
            </Html>
文章来源:https://blog.csdn.net/weixin_43925630/article/details/135773628
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章