A slightly convoluted example, showing how to enable d3.js's zoom behavior on a 3D scene with ortographic camera in three.js (see the previous example). Since moving the camera seems difficult (and not supported by three.js's built-in controls), the code acts on the camera extents (top, bottom, left and right) and updates its projection matrix explicitly.
A different method for specfifying camera orientation is also used, which needs the definition of the camera's up vector.
xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>3D Building with zoom and pan (three.js)</title><link type="text/css" href="index.css" rel="stylesheet"/> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js/r69/examples/js/loaders/colladaloader.js"></script> </head> <body> <script src="index.js"></script> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js to a secure url
Updated missing url https://cdn.rawgit.com/mrdoob/three.js/r69/examples/js/loaders/ColladaLoader.js to https://cdn.jsdelivr.net/gh/mrdoob/three.js/r69/examples/js/loaders/colladaloader.js
https://d3js.org/d3.v3.min.js
https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js
https://cdn.rawgit.com/mrdoob/three.js/r69/examples/js/loaders/ColladaLoader.js