如何在three.js中生成具有3个面的形状

Question

我正在尝试生成这样的形状，具有透明面的 3d 矩形或仅以 3d 方式生成的 3 个面板。

我是 three.js 的新手，我想知道这是否可行，您能否指导我。

非常感谢！

您可以在此处找到我想要生成的图像： https://i.stack.imgur.com/h0ja7.png

Answer 1

作为一种选择，您可以这样做：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 2, 3);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

var contorls = new THREE.OrbitControls(camera, renderer.domElement);

var boxGeom = new THREE.BoxGeometry(2, 1, 1);
var mat1 = new THREE.MeshBasicMaterial({
  color: "red",
  side: THREE.DoubleSide
});
var mat2 = new THREE.MeshBasicMaterial({
  color: "aqua",
  side: THREE.DoubleSide,
  transparent: true,
  opacity: 0.5
});
var boxMat = [mat1, mat1, null, null, mat2, null];
var box = new THREE.Mesh(boxGeom, boxMat);

scene.add(box);

render();

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

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>