Skip to content

tmplits-robotscene 0.1.0

Install from the command line:
Learn more about npm packages
$ npm install @loupeteam/tmplits-robotscene@0.1.0
Install via package.json:
"@loupeteam/tmplits-robotscene": "0.1.0"

About this version

tmplits-robotscene

This template will instantiate a scene with the given glb file and allow you to manipulate the scene in the onrender callback.

install

npm install @loupeteam/tmplits-robotscene

usage

Add the an import map to your html file

This is required because the template uses three.js and three.js addons which typically require a build step to be used in the browser. The import map allows you to use the modules directly in the browser by mapping the module name to the file path.

<head>
  ...
  <script type="importmap">
    {
      "imports": {
        "three": "./three/build/three.module.js",
        "three/addons/": "./three/examples/jsm/"
      }
    }
  </script>
  ...
</head>

Use the template and use it in your html file

{{tmplit
  "RobotScene"
  robotFile="./@loupeteam/tmplits-robotscene/Robot.glb"
  style="width:300px;height:300px"
  onrender="UpdateScene"
  lightColor="0xCC6666"
  lightIntensity="1.5"
}}

Define the onrender callback in your javascript file

//This function will be called every frame
function UpdateScene(scene, userData) {
    if (userData.init) {
        userData.joint1.rotation.x += 0.1;
    }
    else {
        //Cache the objects we want to manipulate
        userData.init = true;
        userData.joint1 = scene.getObjectByName("Cube");
    }
}

Details

Assets

  • tmplits-robotscene-0.1.0.tgz

Download activity

  • Total downloads 3
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all