react+three实现波纹动态效果代码-html代码-BFW代码库

react+three实现波纹动态效果代码

代码语言：html

所属分类：动画

代码描述：react+three实现波纹动态效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 0;
  padding: 0;
  background-color: #3c3c3f;
}

.c-react-canvas {
  display: block;
  margin: 0 auto;
}
</style>




</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bas.js"></script>
<script>
    function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const Threelium = {};

(scope => {
  class Scene extends THREE.Scene {
    constructor({
      camera,
      controls,
      ...restProps })
    {
      super();
      const {
        props: {
          children } } =

      this.initialize(restProps);
      this.entities = React.Children.map(children, child => {
        const entity = new child.type({
          camera,
          controls,
          ...child.props });

        this.add(entity);
        return entity;
      });
    }

    animate(timeDelta) {
      this.entities.forEach(entity => {
        entity.time += timeDelta;
        if (entity.update) {
          entity.update(timeDelta);
        }
      });
    }

    dispose() {
      this.entities.forEach(e => e.dispose && e.dispose());
      super.dispose();
    }}

  scope.Scene = Scene;

  class ThreeRenderer extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "setDimensions",































































      () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        this.renderer.setSize(width, height);
        this.camera.aspect = width / height;
        if (this.camera.updateProjectionMatrix) {
          this.camera.updateProjectionMatrix();
        }
        if (this.controls && this.controls.handleResize) {
          this.controls.handleResize();
      .........完整代码请登录后点击上方下载按钮下载查看