Plane rotation

Plane rotated on x and z

by hansen1416

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<html>
<body>
<script>

</script>
<button onclick="applyquaternionFromPositions()">Action</button>
</body>
</html>

CSS

body {
  padding: 0;
  margin: 0;
}

canvas {
  display: block;
}

button {
  position: absolute;
  bottom: 0;
  right: 0;
}

JavaScript

var camera, scene, renderer, a1, b1, c1, a2, b2, c2, p1;
init();

scene1();
scene2();

function init() {
  // Renderer.
  renderer = new THREE.WebGLRenderer();
  //renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Add renderer to page
  document.body.appendChild(renderer.domElement);

  // Create camera.
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.y = 5;
  camera.position.z = 20;

  // Create scene.
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  // Create ambient light and add to scene.
  var light = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(light);

  // Create directional light and add to scene.
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1);
  scene.add(directionalLight);
  
	const axesHelper = new THREE.AxesHelper(5);
	scene.add(axesHelper);

  // Add listener for window resize.
  window.addEventListener('resize', onWindowResize, false);
}

function scene1() {

  const m1 = new THREE.MeshBasicMaterial({color: 0xffffff, opacity: 0.1, transparent: true});
  const g1 = new THREE.PlaneGeometry(8, 16);
  p1 = new THREE.Mesh(g1, m1);
  
  const m2 = new THREE.MeshBasicMaterial({color: 0xffd700});
  const g2 = new THREE.PlaneGeometry(1, 16);
  const p2 = new THREE.Mesh(g2, m2);
  
  p2.position.x = -3;
  
  const m3 = new THREE.MeshBasicMaterial({color: 0x800080});
  const g3 = new THREE.PlaneGeometry(7, 1);
  const p3 = new THREE.Mesh(g3, m3);
  
  p3.position.y = -8;
  
  const m4 = new THREE.MeshBasicMaterial({color: 0xff0000});
  const g4 = new THREE.PlaneGeometry(1, 1);
  const d4 = new THREE.Mesh(g4, m4);
  
  d4.position.x = 3;
  d4.position.y = -8;
  
  const m5 = new THREE.MeshBasicMaterial({color: 0x00ff00});
  const g5 = new THREE.PlaneGeometry(1, 1);
  const d5 = new THREE.Mesh(g5, m5);
  
  d5.position.x = -3;
 ...