three.js - align plane

wip

by jscastro76

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<div id="info" style="margin-left: 100px;">Place plane so that it goes along given line, and control direction by third point.</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<button id="pressMe" style="position: absolute;">
  Rotate Plane
</button>

CSS

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

JavaScript

let renderer;
let camera;
let controls;

let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xfefefe));
document.body.appendChild(renderer.domElement);

camera.position.set(5, 2, 7.5);


controls = new THREE.OrbitControls(camera, renderer.domElement);


let gridHelper = new THREE.GridHelper(4, 4);
scene.add(gridHelper);

//line is defined by p0-p1
var p0 = new THREE.Vector3(-5, 5, 3);
var p1 = new THREE.Vector3(4, -1, -1);

var material2 = new THREE.LineBasicMaterial({
  color: 0x0000ff
});

//draw the line for visual reference
var geometry = new THREE.Geometry();
geometry.vertices.push(p0, p1);
var line = new THREE.Line(geometry, material2);
scene.add(line);

// Plane
var planeGeom = new THREE.PlaneGeometry(3, 3, 3);
var plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
  color: "pink",
  transparent: true,
  opacity: 0.5,
  side: THREE.DoubleSide
}));

//plane.position.x = (p1.x + p0.x) / 2;
//plane.position.y = (p1.y + p0.y) / 2;
//plane.position.z = (p1.z + p0.z) / 2 ;
//console.log(plane.position);

let p3 = new THREE.Vector3();
p3 = p0.clone().add(p1.clone()).divideScalar(2);
//plane.position.z = (p1.z + p0.z) / 2 ;
//console.log(p3);
//plane.position.set(p1);

plane.lookAt(p1);
scene.add(plane);



let animate = function() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};

animate();