A-frame 实现海浪效果

287 2024年04月03日 前端

A-Frame基于HTML，容易上手。但是A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言。其核心思想是基于Three.js来提供一个声明式、可扩展以及组件化的编程结构。

官网：https://aframe.io/

下面是使用a-frame实现的一个海浪示例

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
    <script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
    <script src="https://unpkg.com/aframe-gradient-sky@1.0.4/dist/gradientsky.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>
      <a-entity id="sphere" geometry="primitive: sphere"
                material="color: #EFEFEF; shader: flat"
                position="0 0.15 -5"
                light="type: point; intensity: 5"
                animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>
      <a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
                material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
                rotation="-90 0 0"></a-entity>
      <a-entity id="sky" geometry="primitive: sphere; radius: 5000"
                material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
                scale="-1 1 1"></a-entity>
      <a-entity id="light" light="type: ambient; color: #888"></a-entity>
    </a-scene>
  </body>
</html>
评论

共0 条评论
相关文章
OBJUI公众号
热门文章
  • go语言怎么连接mysql,并实现增删改查

    要使用Go语言连接MySQL，需要使用第三方库。常用的库包括： 这里以go-sql-driver/mysql为 […]

  • 使用Echarts画甘特图

    Echarts是一个非常强大的图表库， 下面我们来使用它来画甘特图，

  • beego实现模块化开发

    Beego 框架可以通过模块化开发来提高项目的可维护性和可扩展性，可以将一个大型的应用划分为多个模块，每个模块独立维护，有自己的控制器、视图和模型等。

  • Beego实现JWT

    Beego是一个基于Go语言的Web框架，实现JWT认证可以通过beego的中间件机制来实现，下面是一个简单的 […]

  • go实现MD5

    在这个示例中，我们使用了Go标准库中的crypto/md5包来计算一个字符串的MD5值。首先，我们将字符串转换 […]

  • 使用Axios+PHP+JWT实现登录认证

    JWT(JSON Web Token),顾名思义就是可以在Web上传输的token，这种token是用JSON格式进行format的。它是一个开源标准(RFC7519)，定义了一个紧凑的自包含的方式在不同实体之间安全的用JSON格式传输信息。

  • PHP解决雪花算法ID在前端精度丢失的问题

    雪花算法（Snowflake）是一种用于生成全局唯一ID的算法，其基本思路是结合时间戳、机器ID、租约ID和序列号生成一个64位的数据，从而保证ID的唯一性。 雪花算法的生成过程如下：

  • Linux服务器Rsync结合inotify同步文件

    一、实现效果 服务器A：192.168.161.150 （分布服务器）（rsync客户端+inotify） 服务器B：192.168.161.151 （WEB服务器1）（rsync服务端） 服务器C：192.168.161.152 （WEB服务器2）（rsync服务端） 说明：服务器A有文件更新，自动同步到服务器B和C

  • wordpress自定义配置

    在制作插件时，自定义的配置项是经常会遇到的。在左侧“配置”的常规菜单下添加配置以下代码可实现：

  • JavaScript中async和await的应用

    async和await是ES7中引入的关键字，用于简化Promise操作，提高Promise代码的可读性和理解性。它们结合使用可以使得异步调用不返回Promise对象，而直接把then回调函数的第一个形参result给返回出来，使代码更节俭，开发效率更高。