如何用THREE.js创建一个空心环？

Question

我一直在玩THREE.js库，我遇到了一个问题，就是让环可以通过（空心）。我用不同的方式创建了一个环，甚至是带有physijs.js的复合形状，但没有一个工作，环中的空心并不是真的空心。

我想尝试将戒指扔在圆筒上，就像一个环形折腾游戏。

这是我的实际戒指：

 Connection Test Failed: Unable to download content from http://stg.website.com
Exception The remote server returned an error: (404) Not Found. (WebException):
   at System.Net.WebClient.DownloadDataInternal(Uri address, WebRequest& request)
   at System.Net.WebClient.DownloadString(Uri address)
   at System.Net.WebClient.DownloadString(String address)
   at HedgehogDevelopment.SitecoreProject.VSIP.ProjectTests.UrlTest.Execute()
Connection Test Finish: 2018-03-27 11:42:24

任何想法？

简单的three.js-only片段：

＆＃13;

＆＃13;

var outerRadius = 10;
var innerRadius = 9;
var height = 1;

var arcShape = new THREE.Shape();
arcShape.moveTo(outerRadius * 2, outerRadius);
arcShape.absarc(outerRadius, outerRadius, outerRadius, 0, Math.PI * 2, false);

var holePath = new THREE.Path();
holePath.moveTo(outerRadius + innerRadius, outerRadius);
                holePath.absarc(outerRadius, outerRadius, innerRadius, 0, Math.PI * 2, true);
arcShape.holes.push(holePath);

var geometry = new THREE.ExtrudeGeometry(arcShape, {
amount: height,
bevelEnabled: false,
steps: 1,
curveSegments: 60
});
geometry.center();
geometry.rotateX(Math.PI * -.5);


torus = new Physijs.ConvexMesh(geometry, materialPhysic);

＆＃13;

// code in this function authored by requenaxii
function getRingGeometry() {
  var outerRadius = 10;
  var innerRadius = 9;
  var height = 1;

  var arcShape = new THREE.Shape();
  arcShape.moveTo(outerRadius * 2, outerRadius);
  arcShape.absarc(outerRadius, outerRadius, outerRadius, 0, Math.PI * 2, false);

  var holePath = new THREE.Path();
  holePath.moveTo(outerRadius + innerRadius, outerRadius);
  holePath.absarc(outerRadius, outerRadius, innerRadius, 0, Math.PI * 2, true);
  arcShape.holes.push(holePath);

  var geometry = new THREE.ExtrudeGeometry(arcShape, {
    amount: height,
    bevelEnabled: false,
    steps: 1,
    curveSegments: 60
  });
  geometry.center();
  geometry.rotateX(Math.PI * -.5);
  
  return geometry; // TheJim01: just return the geometry
}

// code below this point authored by TheJim01

/**********************/
/*   Initialization   */
/**********************/

var renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById("view"),
  antialias: true
});

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(28, 1, 1, 1000);
camera.position.z = 50;

camera.add(new THREE.PointLight(0xffffff, 1, Infinity));

scene.add(camera);

var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.addEventListener("change", render);

/**********************/
/* Populate the Scene */
/**********************/

var mesh = new THREE.Mesh(
    getRingGeometry(),
    new THREE.MeshPhongMaterial({
      color: "red"
    })
  );
  scene.add(mesh);

/**********************/
/*   Render Function  */
/**********************/

function render() {
  renderer.render(scene, camera);
}
render();

/**********************/
/*   Animation Loop   */
/**********************/

function animate() {
  requestAnimationFrame(animate);
  controls.update();
}
animate();

＆＃13;

＆＃13;

＆＃13;