javascript - 噪声函数产生与最初随机立方体相同的比例

问题描述

我正在尝试使用随机初始缩放平滑缩放立方体。问题是，经过一些短时间后，立方体的缩放几乎相同，除了我使用随机噪声函数进行缩放。我的代码有什么问题？

预览在这里https://twilight-sweatshirt.glitch.me/ 实时片段https://stackblitz.com/edit/react-gakauv

正如你所看到的，立方体缩放变得几乎相同的速度非常快。

这是我的代码

    const random = require("canvas-sketch-util/random");
    const palettes = require("nice-color-palettes");

    random.setSeed(19);

    const palette = random.pick(palettes);

    // Ensure ThreeJS is in global scope for the 'examples/'
    global.THREE = require("three");

    // Include any additional ThreeJS examples below
    require("three/examples/js/controls/OrbitControls");

    const canvasSketch = require("canvas-sketch");

    const settings = {
      // Make the loop animated
      animate: true,
      // duration: 5,
      fps: 30,
      playbackRate: "throttle",
      // Get a WebGL canvas rather than 2D
      context: "webgl",
      attributes: {
        antialias: true
      }
    };

    const sketch = ({ context }) => {
      //#region Scene setup
      // Create a renderer
      const renderer = new THREE.WebGLRenderer({
        canvas: context.canvas
      });

      renderer.setClearColor("aquamarine", 1);

      const camera = new THREE.OrthographicCamera();
      const controls = new THREE.OrbitControls(camera, context.canvas);
      const scene = new THREE.Scene();

      scene.add(new THREE.AmbientLight(0x404040));

      const light = new THREE.PointLight(0xffffff, 5, 15);
      light.position.set(-1, 2, 4).multiplyScalar(1.5);
      scene.add(light);

      const light2 = new THREE.PointLight(0xffffff, 1.5, 15);
      light2.position.set(3, 0, 2).multiplyScalar(1.5);
      scene.add(light2);

      const geometry = new THREE.BoxGeometry(1, 1, 1);

      const getNoise = (x, time) => {
        return random.noise2D(x, time, 0.5) * 0.5 + 0.5;
      };

      for (let index = 0; index < 2; index++) {
        const mesh = new THREE.Mesh(
          geometry,
          new THREE.MeshStandardMaterial({
            color: random.pick(palette),
            flatShading: true,
            roughness: 0.75
          })
        );
        mesh.name = `mesh-${index}`;
        mesh.position.set(
          random.range(-1, 1),
          random.range(-1, 1),
          random.range(-1, 1)
        );
        mesh.scale.set(
          random.range(0.04, 0.5),
          random.range(0.04, 0.5),
          random.range(0.04, 0.5)
        );
        scene.add(mesh);
      }
      //#endregion

      // draw each frame
      return {
        // Handle resize events here
        resize({ pixelRatio, viewportWidth, viewportHeight }) {
          renderer.setPixelRatio(pixelRatio);
          renderer.setSize(viewportWidth, viewportHeight, false);

          const aspect = viewportWidth / viewportHeight;

          // Ortho zoom
          const zoom = 1.5;

          // Bounds
          camera.left = -zoom * aspect;
          camera.right = zoom * aspect;
          camera.top = zoom;
          camera.bottom = -zoom;

          // Near/Far
          camera.near = -100;
          camera.far = 100;

          // Set position & look at world center
          camera.position.set(zoom, zoom, zoom);
          camera.lookAt(new THREE.Vector3());

          // Update the camera
          camera.updateProjectionMatrix();
        },
        // Update & render your scene here
        render({ time, playhead }) {
          scene.children.forEach(obj => {
            if (obj.isMesh !== true) {
              return;
            }
            // console.log(`${obj.name}: `,getNoise(obj.scale.z, time));
            // console.log(scene);
            obj.scale.set(
              // obj.scale.x,
              // obj.scale.y,
              // obj.scale.z,
              getNoise(obj.scale.x, time),
              getNoise(obj.scale.y, time),
              getNoise(obj.scale.z, time)
            );
          });

          controls.update();
          renderer.render(scene, camera);
        },
        // Dispose of events & renderer for cleaner hot-reloading
        unload() {
          controls.dispose();
          renderer.dispose();
        }
      };
    };

    canvasSketch(sketch, settings);

标签： javascriptthree.js

javascript - 噪声函数产生与最初随机立方体相同的比例

问题描述

解决方案

推荐阅读