0

我一直在玩 THREE.js 库，但在制作戒指时遇到了问题（空心）。我以不同的方式创建了一个环，即使是使用 physijs.js 的复合形状，但都不起作用，环中的空心并不是真正的空心。

我想尝试将戒指扔到圆柱体上，就像扔戒指游戏一样。

这是我真正的戒指：

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

任何想法？

简单的 three.js-only 片段：

// 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>

4

0 回答 0