How to create a hollow ring with THREE.js?

Question

I has been playing with THREE.js library and I had a problem to make a ring passable (hollow). I created a ring in different ways, even compound shapes with physijs.js but none works, the hollow in the ring is not really hollow.

I'm want try throw the ring over a cylinder, like a ring toss game.

This is my actual ring:

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);

any idea?

Simple three.js-only snippet:

// 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();

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
  <title>TEST</title>

  <script src="https://threejs.org/build/three.js"></script>
  <script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>

</head>

<body>

  <canvas id="view" width="500" height="500" style="border: 1px black solid;"></canvas>

</body>

</html>

Just a note: This is more of a physijs problem, because the ring renders correctly in a simple three.js view. — TheJim01, Mar 27 '18 at 17:55
@TheJim01 I tried with pure three.js and still happens, I'm not capable to make the ring truly hollow. — requenaxii, Mar 28 '18 at 07:33
I've added a snippet to your question to show that the provided code works in a simple three.js framework. I've had my hand slapped for doing this before, so I hope I made it clear which parts of the code are OP's, and which are mine. The code is NOT intended to be an answer, it is only to show that the base three.js code is working. @prisoner849 — TheJim01, Mar 28 '18 at 13:08

How to create a hollow ring with THREE.js?

0 Answers0