Rotate extrusion

by NHQue

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

#buildMe {
  position: absolute;
}

JavaScript

THREE.Object3D.DefaultUp.set(0, 0, 1);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000000);
camera.position.set(4, 4, 4);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x999999);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
var grid = new THREE.GridHelper(20, 40);
grid.geometry.rotateX( Math.PI / 2 );
grid.position.set(0, .05, 0);
scene.add(grid);


var material = new THREE.MeshBasicMaterial({color:"blue"});

var vertices = [
		new THREE.Vector2(-1, -2),		//Pt1
    new THREE.Vector2(-1,  2),		//Pt2
    new THREE.Vector2(1,   2),		//Pt3
    new THREE.Vector2(1,  -2),		//Pt4
    new THREE.Vector2(-1, -2)	  	//Pt4
]

var shape = new THREE.Shape(vertices);

const path = new THREE.CatmullRomCurve3( [
		new THREE.Vector3(2,2,2),
		new THREE.Vector3(2,2,0)
	] );
                 
const extrudeSettings = { bevelEnabled: true, bevelSegments: 0, steps: 2, bevelSize: 0, 
													bevelThickness: 0, extrudePath: path};

const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const mesh = new THREE.Mesh( geometry, material );
/* mesh.rotation.z = Math.PI/2; */
mesh.rotateZ(Math.PI/2);
scene.add(mesh);


render();

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