Skip to content

Scene and Meshes

Jump to bottom
Hunter Laux edited this page Aug 6, 2018 · 1 revision

This requires the use of JS bundled using webpack which will be created in the build folder after running build. A sample that can be used is index.html in the repository.

In an HTML Document, Add the basic screen,

<body>
    <div id="webgl-canvas"></div>
    <script src="./build/MRPTLib.umd.js"></script>
    <script>
      console.log("The script seems to load properly.");
      const MRPTLIB = MRPTlib.default;
      const scene = new MRPTLIB.Scene({
        divID: "webgl-canvas",
        width: 1200,
        height: 1000,
        cameraPose :{
          x : -3,
          y: -3,
          z: 5
        }
      });
// toggle axes
scene.processAxes(false); // to make axes disappear
scene.processGround(false); // to make ground disappear
   </script>
</body>

For scrolling, mouse should be used.
Add basic meshes like arrow, markers (or any other object based on THREE.Object3D)

let obj1 = new MRPTLIB.model.Arrow();
scene.addObject(obj1);
obj1.setPosition(new THREE.Vector3(2,3,4));
obj1.setDirection(new THREE.Vector3(1,1,1));
obj1.setLength(3.4);
scene.removeObject(obj1);
// or
let obj2 = new MRPTLIB.model.Arrow({x0:1,y0:2,z0:4,x1:6,y1:6,z1:6});
scene.addObject(obj2);
let obj3 = new MRPTLIB.model.SphereMarker({x:3,y:4,z:6});
scene.addObject(obj3);

Adding a PointCloud,

let xs,ys,zs;
fun = function(r) {
ys=[];
for(var i = 0;i < 100;i++){ ys[i] = Math.random()*r;};
zs=[];
for(var i = 0;i < 100;i++){ zs[i] = Math.random()*r;};
xs=[];
for(var i = 0;i < 100;i++){ xs[i] = Math.random()*r;}
} 
fun(10);
let pc = new MRPTLIB.model.PointCloud({pointSize:0.5,xs,ys,zs});
scene.addObject(pc);

Clone this wiki locally