Engineer: James William Dunn

   Contact:  github.com/jwdunn1

   Update:   20210101

   Version:  v1.0.0

   ---------------------------- */

​

// This sketch demonstrates synchronization between

// p5.EasyCam and the camera in a threejs sketch.

​

// To use this method, synchronize the following:

//   canvas size 

//   canvas position (see the style sheet)

//   camera distance

//   camera perspective

//   reference object

​

​

// The threejs scene can be manipulated with the mouse

// left, middle, right, and wheel 

// left drag = rotation

// middle drag = pan

// wheel = zoom

// right drag = zoom

// left double-click = reset

​

// or with touch

// pinch/zoom, two-finger drag

​

​

​

// Suppress the right-click context menu

document.oncontextmenu = () => false;

​

​

​

//////////////////////////////////////////////////////////

// First, we'll set up the p5js framework with EasyCam...

​

var ez=false;

function setup() {

  createCanvas(400, 400, WEBGL);

  // default distance in EasyCam is 500, let's override that:

  ez = createEasyCam({ distance: 400 });

  fill(255,127);

  // BTW, the default camera perspective in p5js is 60 degrees

}

​

function draw() {

  // We don't have to draw anything on this p5js canvas, but the

  // draw loop is necessary to capture the mouse and update EasyCam.

  // To synchronize the scenes, render a reference cube in p5js 

  // and check the position, rotation, and distance in threejs

  // Uncomment the following two lines to render the p5js canvas

  clear();

  box(100); // reference object

}

​

​

​

//////////////////////////////////////////////////////////

// Now for the threejs scene...

​

var scene, cam, renderer, geometry, material, cube, pLight, aLight;

scene = new THREE.Scene();

​

// synchronize perspective with p5js

cam = new THREE.PerspectiveCamera(60, 1, 0.1, 10000);

renderer = new THREE.WebGLRenderer();

​

// synchronize canvas size with p5js

renderer.setSize(400, 400);

document.body.appendChild(renderer.domElement);

​

// synchronize reference object

geometry = new THREE.BoxGeometry(100, 100, 100);

material = new THREE.MeshLambertMaterial({ color: 0xffffff });

cube = new THREE.Mesh(geometry, material);

scene.add(cube);

​

// synchronize camera distance with p5js

cam.position.z = 400;

​

pLight = new THREE.PointLight(0xff7777);

pLight.position.set(0, 300, 200);

​

scene.add(pLight);

​

pLight = new THREE.PointLight(0x7777ff);

pLight.position.set(0, -300, -200);

​

scene.add(pLight);

​

aLight = new THREE.AmbientLight(0x222222);

scene.add(aLight);

​

(function update() {

  requestAnimationFrame(update);

​

  if(ez){

    // query EasyCam camera coordinates

    let s = ez.getState(),

        p = ez.getPosition(),

        u = ez.getUpVector();

    // apply coordinates to the ThreeJS camera

    // Note the sign changes, these are important!

    cam.up.set( -u[0], u[1], -u[2] );

    cam.position.set( p[0], -p[1], p[2] );

    cam.lookAt(new THREE.Vector3( s.center[0], -s.center[1], s.center[2] ));

  }

​

  renderer.render(scene, cam);

})();

​

​

//EOF