1. LoadGltf Tutorial

In Vue environment.

• Create a container

  <template>
    <div id="bg" ref="base_container"></div>
  </template>
  <style>
    #bg {
      width: 100vw;
      height: 100vh;
    }
  </style>
  

• load GLTF model

  import * as Copper from "gltfloader-plugin-test";
  import { getCurrentInstance, onMounted } from "vue";
  let refs = null;
  let appRenderer;
  onMounted(() => {
    let { $refs } = getCurrentInstance().proxy;
    refs = $refs;
  
    const bg = refs.base_container;
  
    appRenderer = new Copper.copperRenderer(bg, { guiOpen: true });
    loadModel("your gltf model url", "identify a name for this model's scene");
    appRenderer.animate();
  });
  

  function loadModel(url, name) {
    let scene1 = appRenderer.getSceneByName(name);
    if (scene1 == undefined) {
      const scene = appRenderer.createScene(name);
      if (scene) {
        appRenderer.setCurrentScene(scene);
        scene.loadGltf(url);
        /*scene.loadViewUrl("/your viewpoint.json");*/
        /*scene.updateBackground("#5454ad", "#18e5a7");*/
      }
      /*Copper.setHDRFilePath("venice_sunset_1k.hdr");*/
      /*appRenderer.updateEnvironment();*/
    } else {
      appRenderer.setCurrentScene(scene1);
    }
  }
  

• Expansion

  • load your model viewpoint Data structure

     {
        nearPlane: number = 0.1; // camera near
        farPlane: number = 2000.0; // camera far
        eyePosition: Array<number> = [0.0, 0.0, 0.0]; //camera position
        targetPosition: Array<number> = [0.0, 0.0, 0.0]; // camera target (look at)
        upVector: Array<number> = [0.0, 1.0, 0.0]; // camera up
    }
    

    scene.loadViewUrl("/your viewpoint.json");
    

  • update the default background color

    scene.updateBackground("#5454ad", "#18e5a7");
    

  • If you want setup your background environment

    • prepare a .hdr file

    • load .hdr file

    Copper.setHDRFilePath("venice_sunset_1k.hdr");
    appRenderer.updateEnvironment();