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

Posted 2023-03-23

【中文标题】如何在three.js中生成具有3个面的形状

【英文标题】：How to generate a shape with 3 faces in three.js

【发布时间】：2018-12-10 03:49:36

【问题描述】：

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

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

非常感谢！

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

【参考方案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>

【讨论】：

嘿，这是我现在需要的：）非常感谢！

对不起，我已经接受了。你知道是否可以在不同的角度添加额外的面板？谢谢！

@Alex1231 对不起，恐怕我没明白你对面板和角度的意思。您能否创建一个包含更多信息的新问题？

嘿，我已经把它贴在这里如果你有时间检查一下：***.com/questions/51552323/…