变换 TorusGeometry 以放置在共面点上

Question

我有一个 three.js 场景，其中有 3 个共面点。我也有 1 个环面几何体。我想转换环面几何体，使其看起来就像坐在共面点上一样。我将如何在 three.js 中执行此操作？

这 codesandbox 设置场景。

Answer 1

希望我理解正确，然后你可以实现它，使用 .lookAt()、THREE.Plane() 及其 .normal 属性:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 2.5;
const renderer = new THREE.WebGLRenderer({
  antialias: true
});
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls.autoRotate = true;

const ambientLight = new THREE.AmbientLight(0x888888);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xfdfcf0, 1);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

renderer.setClearColor("#000000");
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
const positionFrom = (latitude, longitude, radius) => {
  const phi = (90 - latitude) * (Math.PI / 180);
  const theta = (longitude + 180) * (Math.PI / 180);
  const x = -(radius * Math.sin(phi) * Math.cos(theta));
  const z = radius * Math.sin(phi) * Math.sin(theta);
  const y = radius * Math.cos(phi);
  return [x, y, z];
};
const points = [
  ["80.9721379481747", "-93.2620712575402"],
  ["84.899876841301", "-15.8849444339213"],
  ["-80.9618531929051", "81.2440393281301"]
];
const pts = [];
points.forEach(([lat, long]) => {
  const position = positionFrom(lat, long, 1);
  const earthGeometry = new THREE.SphereGeometry(0.1, 0.1, 0.1);
  const earthMaterial = new THREE.MeshPhongMaterial({
    color: 0xffffff
  });
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
  earth.position.set(...position);
  scene.add(earth);
  pts.push(earth.position);
});

const plane = new THREE.Plane();
plane.setFromCoplanarPoints(pts[0], pts[1], pts[2]);
const helper = new THREE.PlaneHelper(plane, 1, 0x00ff00);
const torusGeometry = new THREE.TorusGeometry(0.5, 0.1, 3, 100);
const torusMaterial = new THREE.MeshBasicMaterial({
  color: 0x00e1ff
});
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
torus.lookAt(new THREE.Vector3().addVectors(torus.position, plane.normal));
scene.add(helper);
scene.add(torus);

var render = function() {
  requestAnimationFrame(render);
  controls.update();
  renderer.render(scene, camera);
};

render();

body {
  overflow: hidden;
  margin: 0;
}

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

变换 TorusGeometry 以放置在共面点上

Transform TorusGeometry to lay on Coplanar Points

javascript

3d

transformation

matrix-multiplication

three.js