当前位置： 文江博客话题详情

我无法让这个演示在我的计算机上使用沙盒中的 Three.js 和 cannon.js 运行

发布于 2025-01-16 13:08:00 字数 8231 浏览 1 评论 0原文

这是演示，但它总是说我缺少模块，而我拥有所有依赖项： https://tympanus.net/codrops/2020/02/11/how-to-create-a-physicals-based-3d-cloth-with-cannon-js-and- Three-js/

有人知道如何通过沙盒示例在您的计算机上进行编码吗？

在我所有的 js 文件中调用“三”；我得到“未捕获的语法错误：无法在模块外部使用导入语句”。

<!DOCTYPE html>
<html>
  <head>
    <title>Physics Slideshow - 03</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <section class="container">
        <article class="tile">
          <figure class="tile__figure">
            <img
              src="https://images.unsplash.com/photo-1541737923-4dc81f2d1d41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"
              class="tile__image"
              alt="My image"
              width="400"
            />
          </figure>
        </article>
      </section>

      <canvas id="stage"></canvas>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

<——figure.js——>

import * as THREE from "three";
import C from "cannon";

const size = 8;
const mass = 1;

export default class Figure {
  constructor(scene, world) {
    this.$image = document.querySelector(".tile__image");
    this.$image.style.opacity = 0;

    this.scene = scene;
    this.world = world;

    this.loader = new THREE.TextureLoader();

    this.image = this.loader.load(this.$image.src);

    this.sizes = new THREE.Vector2(0, 0);
    this.offset = new THREE.Vector2(0, 0);
    this.bufferV = new THREE.Vector3();
    this.bufferV2 = new C.Vec3();

    this.getSizes();

    this.createMesh();
    this.createStitches();
  }

  getSizes() {
    const { width, height, top, left } = this.$image.getBoundingClientRect();

    this.sizes.set(width, height);
    this.offset.set(
      left - window.innerWidth / 2 + width / 2,
      -top + window.innerHeight / 2 - height / 2
    );
  }

  createMesh() {
    this.geometry = new THREE.PlaneBufferGeometry(1, 1, size, size);
    this.material = new THREE.MeshBasicMaterial({
      map: this.image
    });

    this.mesh = new THREE.Mesh(this.geometry, this.material);

    this.mesh.position.set(this.offset.x, this.offset.y, 0);
    this.mesh.scale.set(this.sizes.x, this.sizes.y, 1);

    this.scene.add(this.mesh);
  }

  createStitches() {
    const particleShape = new C.Particle();
    const { position } = this.geometry.attributes;
    const { x: width, y: height } = this.sizes;

    this.stitches = [];

    for (let i = 0; i < position.count; i++) {
      const row = Math.floor(i / (size + 1));

      const pos = new C.Vec3(
        position.getX(i) * width,
        position.getY(i) * height,
        position.getZ(i)
      );

      const stitch = new C.Body({
        mass: row === 0 ? 0 : mass / position.count,
        linearDamping: 0.8,
        position: pos,
        shape: particleShape
      });

      this.stitches.push(stitch);
      this.world.addBody(stitch);
    }

    for (let i = 0; i < position.count; i++) {
      const col = i % (size + 1);
      const row = Math.floor(i / (size + 1));

      if (col < size) this.connect(i, i + 1);
      if (row < size) this.connect(i, i + size + 1);
    }
  }

  connect(i, j) {
    const c = new C.DistanceConstraint(this.stitches[i], this.stitches[j]);

    this.world.addConstraint(c);
  }

  applyWind(wind) {
    const { position } = this.geometry.attributes;

    for (let i = 0; i < position.count; i++) {
      const stitch = this.stitches[i];

      const windNoise = wind.flowfield[i];
      const tempPosPhysic = this.bufferV2.set(
        windNoise.x,
        windNoise.y,
        windNoise.z
      );

      stitch.applyForce(tempPosPhysic, C.Vec3.ZERO);
    }
  }

  update() {
    const { position } = this.geometry.attributes;
    const { x: width, y: height } = this.sizes;

    for (let i = 0; i < position.count; i++) {
      const p = this.bufferV.copy(this.stitches[i].position);

      position.setXYZ(i, p.x / width, p.y / height, p.z);
    }

    position.needsUpdate = true;
  }
}

<—— scene.js——>

import * as THREE from "three";
import Figure from "./Figure";
import Wind from "./Wind";
import C from "cannon";

const perspective = 800;

export default class Scene {
  constructor() {
    this.container = document.getElementById("stage");

    this.scene = new THREE.Scene();
    this.world = new C.World();
    this.world.gravity.set(0, -1000, 0);

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.container,
      alpha: true
    });

    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setPixelRatio(window.devicePixelRatio);

    this.initLights();
    this.initCamera();

    this.figure = new Figure(this.scene, this.world);
    this.wind = new Wind(this.figure.mesh);

    this.update();
  }

  initLights() {
    const ambientlight = new THREE.AmbientLight(0xffffff, 2);
    this.scene.add(ambientlight);
  }

  initCamera() {
    const fov =
      (180 * (2 * Math.atan(window.innerHeight / 2 / perspective))) / Math.PI;

    this.camera = new THREE.PerspectiveCamera(
      fov,
      window.innerWidth / window.innerHeight,
      1,
      5000
    );
    this.camera.position.set(0, 0, perspective);
  }

  update() {
    if (
      this.renderer === undefined ||
      this.scene === undefined ||
      this.camera === undefined
    )
      return;
    requestAnimationFrame(this.update.bind(this));

    this.wind.update();
    this.figure.update();
    this.figure.applyWind(this.wind);
    this.world.step(1 / 60);
    this.renderer.render(this.scene, this.camera);
  }
}

<——wind.js——>

import SimplexNoise from "simplex-noise";
import { Clock, Vector3 } from "three";
import gsap from "gsap";

const noise = new SimplexNoise();
const baseForce = 2000;
const off = 0.05;

export default class Wind {
  constructor(figure) {
    const { count } = figure.geometry.attributes.position;
    this.figure = figure;

    this.force = baseForce / count;

    this.clock = new Clock();
    this.direction = new Vector3(0.5, 0, -1);
    this.flowfield = new Array(count);

    this.update();

    this.bindEvents();
  }

  bindEvents() {
    window.addEventListener("mousemove", this.onMouseMove.bind(this));
  }

  onMouseMove({ clientX: x, clientY: y }) {
    const { innerWidth: W, innerHeight: H } = window;

    gsap.to(this.direction, {
      duration: 0.8,
      x: x / W - 0.5,
      y: -(y / H) + 0.5
    });
  }

  update() {
    const time = this.clock.getElapsedTime();

    const { position } = this.figure.geometry.attributes;
    const size = this.figure.geometry.parameters.widthSegments;

    for (let i = 0; i < position.count; i++) {
      const col = i % (size + 1);
      const row = Math.floor(i / (size + 1));

      const force =
        (noise.noise3D(row * off, col * off, time) * 0.5 + 0.5) * this.force;

      this.flowfield[i] = this.direction.clone().multiplyScalar(force);
    }
  }
}

<——index.js——>

import "./styles.css";
import Scene from "./Scene";

const initApp = () => {
  window.scene = new Scene();
};

if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  initApp();
} else {
  document.addEventListener("DOMContentLoaded", initApp);
}

<—— styles.css ——>

body {
  margin: 0;
  background-color: #e4e0dd;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  z-index: 10;
}

.tile {
  width: 50vmin;
  flex: 0 0 auto;
}

.tile__figure {
  margin: 0;
  padding: 0;
}

.tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 9;
}
原文

Here is the demo but it always says that I am missing the modules whereas I have all the dependancies : https://tympanus.net/codrops/2020/02/11/how-to-create-a-physics-based-3d-cloth-with-cannon-js-and-three-js/

Would anyone know how to code it on your computer from the sandbox example?

In all my js files calling 'three'; i get "Uncaught SyntaxError: Cannot use import statement outside a module".

<!DOCTYPE html>
<html>
  <head>
    <title>Physics Slideshow - 03</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <section class="container">
        <article class="tile">
          <figure class="tile__figure">
            <img
              src="https://images.unsplash.com/photo-1541737923-4dc81f2d1d41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"
              class="tile__image"
              alt="My image"
              width="400"
            />
          </figure>
        </article>
      </section>

      <canvas id="stage"></canvas>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

<—— figure.js——>

import * as THREE from "three";
import C from "cannon";

const size = 8;
const mass = 1;

export default class Figure {
  constructor(scene, world) {
    this.$image = document.querySelector(".tile__image");
    this.$image.style.opacity = 0;

    this.scene = scene;
    this.world = world;

    this.loader = new THREE.TextureLoader();

    this.image = this.loader.load(this.$image.src);

    this.sizes = new THREE.Vector2(0, 0);
    this.offset = new THREE.Vector2(0, 0);
    this.bufferV = new THREE.Vector3();
    this.bufferV2 = new C.Vec3();

    this.getSizes();

    this.createMesh();
    this.createStitches();
  }

  getSizes() {
    const { width, height, top, left } = this.$image.getBoundingClientRect();

    this.sizes.set(width, height);
    this.offset.set(
      left - window.innerWidth / 2 + width / 2,
      -top + window.innerHeight / 2 - height / 2
    );
  }

  createMesh() {
    this.geometry = new THREE.PlaneBufferGeometry(1, 1, size, size);
    this.material = new THREE.MeshBasicMaterial({
      map: this.image
    });

    this.mesh = new THREE.Mesh(this.geometry, this.material);

    this.mesh.position.set(this.offset.x, this.offset.y, 0);
    this.mesh.scale.set(this.sizes.x, this.sizes.y, 1);

    this.scene.add(this.mesh);
  }

  createStitches() {
    const particleShape = new C.Particle();
    const { position } = this.geometry.attributes;
    const { x: width, y: height } = this.sizes;

    this.stitches = [];

    for (let i = 0; i < position.count; i++) {
      const row = Math.floor(i / (size + 1));

      const pos = new C.Vec3(
        position.getX(i) * width,
        position.getY(i) * height,
        position.getZ(i)
      );

      const stitch = new C.Body({
        mass: row === 0 ? 0 : mass / position.count,
        linearDamping: 0.8,
        position: pos,
        shape: particleShape
      });

      this.stitches.push(stitch);
      this.world.addBody(stitch);
    }

    for (let i = 0; i < position.count; i++) {
      const col = i % (size + 1);
      const row = Math.floor(i / (size + 1));

      if (col < size) this.connect(i, i + 1);
      if (row < size) this.connect(i, i + size + 1);
    }
  }

  connect(i, j) {
    const c = new C.DistanceConstraint(this.stitches[i], this.stitches[j]);

    this.world.addConstraint(c);
  }

  applyWind(wind) {
    const { position } = this.geometry.attributes;

    for (let i = 0; i < position.count; i++) {
      const stitch = this.stitches[i];

      const windNoise = wind.flowfield[i];
      const tempPosPhysic = this.bufferV2.set(
        windNoise.x,
        windNoise.y,
        windNoise.z
      );

      stitch.applyForce(tempPosPhysic, C.Vec3.ZERO);
    }
  }

  update() {
    const { position } = this.geometry.attributes;
    const { x: width, y: height } = this.sizes;

    for (let i = 0; i < position.count; i++) {
      const p = this.bufferV.copy(this.stitches[i].position);

      position.setXYZ(i, p.x / width, p.y / height, p.z);
    }

    position.needsUpdate = true;
  }
}

<—— scene.js——>

import * as THREE from "three";
import Figure from "./Figure";
import Wind from "./Wind";
import C from "cannon";

const perspective = 800;

export default class Scene {
  constructor() {
    this.container = document.getElementById("stage");

    this.scene = new THREE.Scene();
    this.world = new C.World();
    this.world.gravity.set(0, -1000, 0);

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.container,
      alpha: true
    });

    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setPixelRatio(window.devicePixelRatio);

    this.initLights();
    this.initCamera();

    this.figure = new Figure(this.scene, this.world);
    this.wind = new Wind(this.figure.mesh);

    this.update();
  }

  initLights() {
    const ambientlight = new THREE.AmbientLight(0xffffff, 2);
    this.scene.add(ambientlight);
  }

  initCamera() {
    const fov =
      (180 * (2 * Math.atan(window.innerHeight / 2 / perspective))) / Math.PI;

    this.camera = new THREE.PerspectiveCamera(
      fov,
      window.innerWidth / window.innerHeight,
      1,
      5000
    );
    this.camera.position.set(0, 0, perspective);
  }

  update() {
    if (
      this.renderer === undefined ||
      this.scene === undefined ||
      this.camera === undefined
    )
      return;
    requestAnimationFrame(this.update.bind(this));

    this.wind.update();
    this.figure.update();
    this.figure.applyWind(this.wind);
    this.world.step(1 / 60);
    this.renderer.render(this.scene, this.camera);
  }
}

<—— wind.js——>

import SimplexNoise from "simplex-noise";
import { Clock, Vector3 } from "three";
import gsap from "gsap";

const noise = new SimplexNoise();
const baseForce = 2000;
const off = 0.05;

export default class Wind {
  constructor(figure) {
    const { count } = figure.geometry.attributes.position;
    this.figure = figure;

    this.force = baseForce / count;

    this.clock = new Clock();
    this.direction = new Vector3(0.5, 0, -1);
    this.flowfield = new Array(count);

    this.update();

    this.bindEvents();
  }

  bindEvents() {
    window.addEventListener("mousemove", this.onMouseMove.bind(this));
  }

  onMouseMove({ clientX: x, clientY: y }) {
    const { innerWidth: W, innerHeight: H } = window;

    gsap.to(this.direction, {
      duration: 0.8,
      x: x / W - 0.5,
      y: -(y / H) + 0.5
    });
  }

  update() {
    const time = this.clock.getElapsedTime();

    const { position } = this.figure.geometry.attributes;
    const size = this.figure.geometry.parameters.widthSegments;

    for (let i = 0; i < position.count; i++) {
      const col = i % (size + 1);
      const row = Math.floor(i / (size + 1));

      const force =
        (noise.noise3D(row * off, col * off, time) * 0.5 + 0.5) * this.force;

      this.flowfield[i] = this.direction.clone().multiplyScalar(force);
    }
  }
}

<—— index.js——>

import "./styles.css";
import Scene from "./Scene";

const initApp = () => {
  window.scene = new Scene();
};

if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  initApp();
} else {
  document.addEventListener("DOMContentLoaded", initApp);
}

<—— styles.css ——>

body {
  margin: 0;
  background-color: #e4e0dd;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  z-index: 10;
}

.tile {
  width: 50vmin;
  flex: 0 0 auto;
}

.tile__figure {
  margin: 0;
  padding: 0;
}

.tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 9;
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

揽清风入怀 2025-01-23 13:08:00

我认为这更多的是一个关于技术的问题，而不是任何一个错误，因为在当前的错误导致程序崩溃后，可能会有一棵错误树没有被渲染。我不确定你到底采取了哪些步骤来让这个项目运行，但我要做的就是一步一步地把它拼凑出来。首先，确保 scene.js 在您的计算机上正常运行，然后逐步构建项目的各个部分。也许您可以从 scene.js 文件中的这一行开始将其拼凑在一起，然后使用调试技术从那里查找每一部分：

 this.renderer = new THREE.WebGLRenderer({
      canvas: this.container,
      alpha: true
    });

我猜您将大量代码复制并粘贴到项目文件中，然后您'这样做通常会遇到大问题。祝你好运！

I think this is more a question about technique than any one error, because there could be a tree of errors that aren't being rendered after your current error crashes the program. I'm not sure what steps you've taken exactly to do get this project running, but what I would do is piece it out step by step. fist, make sure scene.js is running properly on your computer, then build the parts of the project piece by piece. Maybe you could start with piecing it together from this line in the scene.js file and look up every piece from there while using debugging techniques:

 this.renderer = new THREE.WebGLRenderer({
      canvas: this.container,
      alpha: true
    });

I'm guessing that you copy and pasted lot of that code into your project file, and you're usually going to run into big problems by doing that. good luck!

回复 原文
~没有更多了~

关于作者

明天过后

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

琉璃梦幻

文章 0 评论 0

qq_4zWU6L

文章 0 评论 0

话少情深

文章 0 评论 0

西西弗的石头怪

文章 0 评论 0

彻夜缠绵

文章 0 评论 0

千寻…

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文