Ken/three test

components/gallery.js

@@ -3,8 +3,8 @@ import Gallery from "react-photo-gallery";
 import Lightbox from "react-images";
 
 export default class PhotoGallery extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = { currentImage: 0 };
   }
 

package.json

@@ -10,7 +10,8 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-images": "^0.5.19",
-    "react-photo-gallery": "^7.0.2"
+    "react-photo-gallery": "^7.0.2",
+    "three": "^0.106.2"
   },
   "devDependencies": {},
   "scripts": {

pages/cinemagraphs/test.js

@@ -0,0 +1,49 @@
+import * as THREE from "three";
+import Globals from "../../components/globals";
+
+export default class Test extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    // document.body.appendChild( renderer.domElement );
+    // use ref as a mount point of the Three.js scene instead of the document.body
+    this.mount.appendChild(renderer.domElement);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+    camera.position.z = 5;
+    const animate = function() {
+      requestAnimationFrame(animate);
+      cube.rotation.x += 0.01;
+      cube.rotation.y += 0.01;
+      renderer.render(scene, camera);
+    };
+    animate();
+  }
+
+  initializeCamera() {
+    this.camera.position.x = 0;
+    this.camera.position.y = 0;
+    this.camera.position.z = 5;
+  }
+
+  render() {
+    return (
+      <div ref={ref => (this.mount = ref)}>
+        <Globals />
+      </div>
+    );
+  }
+}