const { data: dataset2 } = await client.query({
  // ...
});

Ima Computer fucked around with this message at 04:28 on Apr 28, 2021

dataset3:
Object { features: {…}, regions: {…}, ownerships: {…}, campgrounds: {…} }
​
campgrounds: Object { __typename: "RootQueryToCampgroundConnection", pageInfo: {…}, edges: (136) […] }
​
features: Object { __typename: "RootQueryToFeatureConnection", nodes: (38) […] }
​
ownerships: Object { __typename: "RootQueryToOwnershipConnection", nodes: (3) […] }
​
regions: Object { __typename: "RootQueryToRegionConnection", nodes: (7) […] }
Object

TypeError: data.concat is not a function

const dataset3 = [{...data.campgrounds.edges, ...dataset2}] 

0: Object { __typename: "RootQueryToCampgroundConnectionEdge", cursor: "YXJyYXljb25uZWN0aW9uOjcyNA==", node: {…} }
​​
...
​​
99: Object { __typename: "RootQueryToCampgroundConnectionEdge", cursor: "YXJyYXljb25uZWN0aW9uOjQ5NQ==", node: {…} }
​​
campgrounds: Object { __typename: "RootQueryToCampgroundConnection", pageInfo: {…}, edges: (36) […] }

Empress Brosephine fucked around with this message at 15:21 on Apr 28, 2021

Khorne fucked around with this message at 02:10 on May 15, 2021

  mounted: function() {
    const container = this.$refs.container;

    // SET AND ADD CAMERA
    this.camera = new THREE.PerspectiveCamera(
      75,
      300 / 300,
      0.1,
      1000
    );
    this.camera.position.set(0, 2, 4);

    // ADD SCENE
    this.scene = new THREE.Scene();

    // ADD LIGHT TO SCENE
    this.ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    this.directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    this.directionalLight.position.set(5, 10, 5);
    this.directionalLight.target.position.set(5, 0, 0);
    this.scene.add(this.ambientLight);
    this.scene.add(this.directionalLight);

    // RENDER IN PAGE
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setClearColor('#dbdbdb');
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.gammaFactor = 2.2;
    this.renderer.outputEncoding = THREE.sRGBEncoding;
    container.appendChild(this.renderer.domElement);

    // SET GRID HELPER
    const size = 10;
    const divisions = 25;
    this.gridHelper = new THREE.GridHelper(size, divisions);
    this.scene.add(this.gridHelper);

    // SET ORBIT CONTROLS
    this.orbitControls = new OrbitControls(
      this.camera,
      this.renderer.domElement
    );
    this.orbitControls.addEventListener('change', () =>
      this.renderer.render(this.scene, this.camera)
    );

    this.animate();
  },

    setupBox () {
      // Initial setup of the box geometry; this only gets called once
      this.box = {};
      Array.from(this.boxFaces).forEach((face) => {
        console.log(face);
        const geometry = new THREE.PlaneGeometry(face.planeGeometry.width, face.planeGeometry.height);
        const material = new THREE.MeshBasicMaterial({ color: 'green' });
        material.color.convertSRGBToLinear();
        const facePlane = new THREE.Mesh(geometry, material);
        facePlane.rotation.x = face.planeGeometry.rotation.x;
        facePlane.rotation.y = face.planeGeometry.rotation.y;
        facePlane.rotation.z = face.planeGeometry.rotation.z;
        facePlane.position.x = face.planeGeometry.position.x;
        facePlane.position.y = face.planeGeometry.position.y;
        facePlane.position.z = face.planeGeometry.position.z;
        console.log(facePlane);
        this.box[face.id] = facePlane;
        this.scene.add(facePlane);
      });
    },

    refreshFaces () {
      // Refresh the box faces by dumping the canvas to an image; triggered only when the canvas has changed
      console.log('Refreshing faces');
      const backgroundImage = this.canvas.backgroundImage;
      this.canvas.setBackgroundImage(null);
      const dataURL = this.canvas.toDataURL();
      this.canvas.setBackgroundImage(backgroundImage);

      Object.keys(this.box).forEach((key) => {
        const facePlane = this.box[key];
        const texture = new THREE.TextureLoader().load(dataURL);
        facePlane.material = new THREE.MeshPhongMaterial({ map: texture });
      });
      console.log(this.box);
    },

    animate: function() {
      requestAnimationFrame(this.animate);
      // this.box is null initially
      // this.boxFaces is a data blob being passed in to this component via a prop
      if (this.box === null && this.boxFaces) {
        console.log('Setting up box');
        this.setupBox();
      }
      // this.canvas generates a uuid.v4 by which I trigger a refresh of the box faces by dumping the canvas to an image
      // This way I don't run this code during every loop, only when the canvas has changed
      // Note that the fans spin up even if I comment this stuff out and use a flat BasicMaterial
      if (this.box != null && this.canvas && this.canvas.stateHash !== this.canvasStateHash) {
        console.log('Canvas has changed');
        this.canvasStateHash = this.canvas.stateHash;
        this.refreshFaces();
      }
      this.renderer.render(this.scene, this.camera);
    }

Data Graham fucked around with this message at 22:32 on May 30, 2021

roomforthetuna fucked around with this message at 23:37 on May 30, 2021

Data Graham fucked around with this message at 03:57 on May 31, 2021

var canvasElement = document.createElement("CANVAS");
canvasElement.width = 512;
canvasElement.height = 512;
var canvasContext = canvasElement.getContext("2d");
canvasContext.drawImage(backgroundImage, 0, 0, 512, 512);
// Draw other layers.
var texture = THREE.CanvasTexture(canvasElement);

roomforthetuna fucked around with this message at 12:26 on May 31, 2021