三维方块伸缩变换效果-html代码-BFW代码库

三维方块伸缩变换效果

代码语言：html

所属分类：三维

代码描述：三维方块伸缩变换效果，基于react-dom和three打造

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
}

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

</head>
<body translate="no">
<div id="js-app"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script> 
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bas.js"></script>



<script >
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;}setTimeout(() => {
  ReactDOM.render(
  React.createElement(ReactCanvas, {
    registerRenderer: renderer => new Project(renderer) }),

  document.getElementById('js-app'));
}, 0);

class Simulation {
  constructor(renderer) {_defineProperty(this, "handleWindowResize",

    () => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      this.renderer.setSize(width, height);
      this.camera.aspect = width / height;
      this.camera.updateProjectionMatrix();
    });this.scene = new THREE.Scene();this.renderer = renderer;this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 1000);this.camera.position.z = 0;this.camera.position.y = 20;const onWindowResize = this.handleWindowResize;window.addEventListener('resize', onWindowResize, false);onWindowResize();this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);setTimeout(() => {this.render();}, 0);}

  render() {
    this.controls.update();
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(() => {
      this.render();
    });
  }}


class Project extends Simulation {
  constructor(renderer) {
    super(renderer);
    this.lastRenderTime = +new Date();
    this.inverseMercator = new InverseMercator({
      fieldSize: 12,
      radius: 10 });

    this.scene.add(this.inverseMercator);
    this.addLights();
  }

  addLights() {
    const ambientLight = new THREE.AmbientLight(0xaaaaaa);
    this.scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(-1, 1, 0);
    this.scene.add(directionalLight);
  }

  render() {
    const currentTime = +new Date();
    const timeDelta = currentTime - this.lastRenderTime;
    this.lastRenderTime = currentTime;
    this.inverseMercator.material.uniforms.uTime.value += timeDelta / 1000;
    super.render();
  }}


class InverseMercator {
  constructor({
    fieldSize,
    radius })
  {
    const baseGeometry = new THREE.BoxGeometry(1, 1, 1);
    const geometry = new BAS.PrefabBufferGeometry(baseGeometry, fieldSize ** 2);
    const aIndex = geometry.createAttribute('aIndex', 1);
    for (let y = 0; y < fieldSize; y++) {
      for (let x = 0; x < fieldSize; x++) {
        const index = y * fieldSize + x;
        geometry.setPrefabData(aIndex, index, [index]);
      }
    }
    const material = new BAS.PhongAnimationMaterial({
      flatShading: true,
   .........完整代码请登录后点击上方下载按钮下载查看