A-frame 实现海浪效果

344 2024年04月03日前端

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

下面是使用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 条评论

热门文章

go语言怎么连接mysql,并实现增删改查

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

Echarts是一个非常强大的图表库，下面我们来使用它来画甘特图，
beego实现模块化开发

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

Beego是一个基于Go语言的Web框架，实现JWT认证可以通过beego的中间件机制来实现，下面是一个简单的 […]
PHP解决雪花算法ID在前端精度丢失的问题

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

在这个示例中，我们使用了Go标准库中的crypto/md5包来计算一个字符串的MD5值。首先，我们将字符串转换 […]
使用Axios+PHP+JWT实现登录认证

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

1.概念虚拟滚动是一种优化长列表性能的技术，它通过按需渲染的方式，只渲染可见部分的列表项，而不是渲染整个列表 […]
依赖注入（DI）和控制反转（IoC）

依赖注入（Dependency Injection，简称DI）是一种设计模式，它允许我们在代码中去除硬编码的依赖关系，并使这些关系变得更加灵活和可配置。依赖注入通过将依赖关系（例如对象、变量或服务等）作为参数传递给需要它们的对象，从而实现解耦和可测试性。控制反转（Inversion of Control，简称IoC）是一种设计原则，它将控制权从代码本身转移到外部容器中，该容器负责创建和管理对象及其依赖关系。控制反转通过将对象的创建和管理交给外部容器来完成，从而减少了类之间的耦合，并使代码更加可维护和可扩展。
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