Dreamview: Update objloader (#1612)

modules/dreamview/frontend/package.json

@@ -18,8 +18,7 @@
         "react": "^15.5.4",
         "react-dom": "^15.5.4",
         "three": "~0.84.0",
-        "three-line-2d": "^1.1.6",
-        "three-obj-loader": "^1.1.2"
+        "three-line-2d": "^1.1.6"
     },
     "devDependencies": {
         "babel-core": "^6.24.1",

modules/dreamview/frontend/src/renderer/map.js

@@ -163,11 +163,12 @@ function getLaneHeading(lane) {
 }
 
 function getSignalPositionAndHeading(signal, overlapMap, laneHeading, coordinates) {
-  let locations = _.pickBy(
+    let locations = _.pickBy(
       _.mapValues(signal.subsignal, obj => obj.location), v => !_.isEmpty(v));
-  if (_.isEmpty(locations)) {
-    locations = _.attempt(() => signal.boundary.point);
+    if (_.isEmpty(locations)) {
+        locations = _.attempt(() => signal.boundary.point);
     }
+
     if (_.isError(locations) || locations === undefined) {
         return null;
     }
@@ -210,7 +211,7 @@ function addTrafficLight(signal, overlapMap, laneHeading, coordinates, scene) {
     const posAndHeadings = [];
     const posAndHeading = getSignalPositionAndHeading(signal, overlapMap, laneHeading, coordinates);
     if (posAndHeading) {
-        const scale = 0.006;
+        const scale = 0.01;
         loadObject(trafficLightMaterial, trafficLightObject,
             { x: scale, y: scale, z: scale},
             mesh => {
@@ -219,6 +220,7 @@ function addTrafficLight(signal, overlapMap, laneHeading, coordinates, scene) {
                 mesh.position.set(posAndHeading[0].x, posAndHeading[0].y, 0);
                 mesh.matrixAutoUpdate = false;
                 mesh.updateMatrix();
+
                 scene.add(mesh);
                 drewObjects.push(mesh);
             });

modules/dreamview/frontend/src/utils/models.js

 import * as THREE from "three";
+import OBJLoader from "three/examples/js/loaders/OBJLoader.js";
 import MTLLoader from "three/examples/js/loaders/MTLLoader.js";
-import OBJLoader from "three-obj-loader";
-
-OBJLoader(THREE);
 
 // The two loaders for material and object files, respectively.
 const mtlLoader = new THREE.MTLLoader();
@@ -14,7 +12,6 @@ const loadedMaterialAndObject = {};
 export function loadObject(materialFile, objectFile, scale, callback) {
     function placeMtlAndObj(loaded) {
         const object = loaded.clone();
-        object.scale.set(scale.x, scale.y, scale.z);
         if (callback) {
             callback(object);
         }
@@ -27,6 +24,7 @@ export function loadObject(materialFile, objectFile, scale, callback) {
             objLoader.setMaterials(materials);
             objLoader.load(objectFile, loaded => {
                 loaded.name = objectFile;
+                loaded.scale.set(scale.x, scale.y, scale.z);
                 loadedMaterialAndObject[objectFile] = loaded;
                 placeMtlAndObj(loaded);
             });

modules/dreamview/frontend/webpack.config.js

@@ -80,6 +80,9 @@ module.exports = {
             }, {
                 test: require.resolve("three/examples/js/loaders/MTLLoader.js"),
                 use: "imports-loader?THREE=three"
+            }, {
+                test: require.resolve("three/examples/js/loaders/OBJLoader.js"),
+                use: "imports-loader?THREE=three"
             }, {
                 // Load the images. They goes through image-webpack-loader
                 // first, and then file-loader.