时间戳

首页 > 解决方案 > 如何在three.js中生成具有3个面的形状

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

问题描述

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

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

非常感谢！

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

标签： three.js3d

解决方案

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

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>

推荐阅读