Question

是否可以创建具有两个输入点的线框立方体？这两个点将是立方体对角线的对角线。

Answer 1

是的，有可能，使用一些数学：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 5, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var pointsGeom = new THREE.Geometry();
pointsGeom.vertices.push(
  new THREE.Vector3(THREE.Math.randFloat(-5, 5), THREE.Math.randFloat(-2.5, 2.5), THREE.Math.randFloat(-5, 5)),
  new THREE.Vector3(THREE.Math.randFloat(-5, 5), THREE.Math.randFloat(-2.5, 2.5), THREE.Math.randFloat(-5, 5))
)

var points = new THREE.Points(pointsGeom, new THREE.PointsMaterial({
  color: "red",
  size: 0.5
}));
scene.add(points);

var cubeDiagonal = new THREE.Vector3().copy(pointsGeom.vertices[1]).sub(pointsGeom.vertices[0]).length(); // cube's diagonal
var center = new THREE.Vector3().copy(pointsGeom.vertices[0]).add(pointsGeom.vertices[1]).multiplyScalar(0.5); // cube's center

var cubeSide = (cubeDiagonal * Math.sqrt(3)) / 3; // cube's edge's length via cube's diagonal

var cubeGeom = new THREE.BoxGeometry(cubeSide, cubeSide, cubeSide);
cubeGeom.rotateY(Math.PI * 0.25); // rotate around Y
cubeGeom.rotateX(Math.atan(Math.sqrt(2) * 0.5)); // rotate around X, using angle between cube's diagonal and its projection on a cube's face
var cube = new THREE.Mesh(cubeGeom, new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
cube.position.copy(center); // set position of the cube
cube.lookAt(pointsGeom.vertices[0]); // let Three.js do the job for us
scene.add(cube)

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Three.js：创建一个带有两个输入点的立方体

1 个答案: