如何使用三个js沿x轴绘制圆柱体？

Question

圆柱的默认轴为y轴，形成一个垂直圆柱。我需要画一个水平圆柱。

Answer 1

您可以对圆柱几何体使用.rotateZ()方法：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(scene.position);
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 geom = new THREE.CylinderGeometry(1, 1, 7, 16, 1);
geom.rotateZ(-Math.PI * 0.5); // rotate 90 degrees clockwise around z-axis

var cylinder = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
scene.add(cylinder);

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>