Question

我需要画一些穿过它们的圆环和球（球体）。问题是：圆环的边缘应该牢固并停住球，但是它们正在使球穿过它们。

我尝试使用BoxMesh，但它不允许球穿过铁环。我想制作圆环面：所以球在圆环内穿行，但是圆环的边缘很牢固，球没有穿过圆环

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="styles.css" />
  <style>

    #display { position: fixed; left: 0px; top: 0px;
            width: 100%; height: 100%; z-index: -1 }

    .manipulate { text-align: center }

    .view { width: 5in; height: 5in; margin: auto }

    button { width: .75in }

</style>
</head>
<body>

  <div class="viewport"></div>
  <canvas id="display"> </div>
  <script src="three.min.js"></script>
  <script src="physi.js"></script>
  <script src="http://cdn.jsdelivr.net/gh/mrdoob/three.js@r73/examples/js/controls/OrbitControls.js"></script>
  <script>
    plane = new Physijs.BoxMesh(
      new THREE.CubeGeometry(100, 100, 2, 10, 10),
      Physijs.createMaterial(
        new THREE.MeshLambertMaterial({
          color: 0xeeeeee
        }),
        .4,
        .99
      ),
      0
    );

for (var i=0;i<50;i++) {
    torus = new Physijs.Mesh(
      new THREE.TorusGeometry(18, 0.2, 16,100),
      Physijs.createMaterial(
        new THREE.MeshNormalMaterial({
          color: 0x00FFFF,
          transparent:false
        })
      ),
      0
    );
    torus.translateY(i)
    torus.collisions=0;
    torus.rotation.y=Math.PI/24
    torus.rotation.x=-Math.PI/2
    scene.add(torus);
}
    setInterval(function() {
      ball = new Physijs.SphereMesh(
        new THREE.SphereGeometry(
          Math.random() * (4 - 1) + 1,
          16,
          16
        ),
        Physijs.createMaterial(
          new THREE.MeshLambertMaterial({
            color: 0xff0000,
            reflectivity: .8
          }),
          .4,
          .99
        ),
        1
      );

      var r = {
        x: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12,
        y: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12,
        z: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12
      };

      ball.rotation.set(r.x, r.y, r.z);
      ball.position.y = 40;
      ball.castShadow = true;
      ball.receiveShadow = true;

      scene.add(ball);
    }, 600);
    window.onload=init
    function init() {


        render();
    }
    scene.simulate()

    function render() {
      for (var i = 5; i < scene.children.length - 5; i++) {
        var obj = scene.children[i];

        //if (obj.position.y <= -50) {
        //  scene.remove(obj);
        //}
      }





  </script>

</body>
</html>

飞机是坚固的：它是由BoxMesh制成的，可防止所有球掉落。我想对圆环做同样的事情。我想让球穿过它，但要反弹圆环的边缘

具有不透明边缘的坚固圆环-THREE.js

0 个答案: