Replace 3d model (json)

Question

I found an example online and in this example that shows a 3D model (a Ferris wheel) placed on a parking lot with a Google Street View Panorama as the background.

Now I want to replace the Ferris wheel with another 3d object — an asteroid — that I download as a 3DS and OBJ. file. I converted the 3DS file to JSON through Blender but when I replace the file it just shows a blank screen.

How can I do it? Here is my code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Street View Overlay - EINA</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0px;
                overflow: hidden;
            }
            p {
                font-family:sans-serif;
                font-size:11px;
                font-weight:bold;
                color:#111111;
            }
        </style>
    </head>
    <body>              
        <div id="streetviewpano" style="position: absolute; top:0; bottom:0; left:0; right:0; z-index: 0">  
        </div>
        <div id="container" style="position: absolute; top:0; bottom:100px; left: 0; right: 0; z-index: 100;">
        </div>
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

        <script src="lib/jquery-2.0.3.js"></script>
        <script src="lib/jquery.mousewheel.js"></script>
        <script src="lib/three.min.js"></script>
        <script src="lib/Detector.js"></script>
        <script src="src/streetviewoverlay.js"></script>

        <script>
        var METERS2DEGREES = 0.0000125; 
        var objectPosition = [48.804828,2.1203071];
        function hackMapProjection(lat, lon, originLat, originLon) {
            var lonCorrection = 1.5;
            var rMajor = 6378137.0;

            function lonToX(lon) {
                return rMajor * (lon * Math.PI / 180);
            }

            function latToY(lat) {
                if (lat === 0) {
                    return 0;
                } else {
                    return rMajor * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI / 180) / 2));
                }
            }

            var x = lonToX(lon - originLon) / lonCorrection;
            var y = latToY(lat - originLat);
            return {'x': x, 'y': y};
        }

        function latLon2ThreeMeters(lat, lon) {
            var xy = hackMapProjection(lat, lon, objectPosition[0], objectPosition[1]);
            return {'x': xy.x, 'y': 0, 'z': -xy.y};
        }

        var jsonLoader = new THREE.JSONLoader();
        jsonLoader.load( "model3d/wheel.js", loadWheel );

        function loadWheel(geometry, materials) {
            var mesh;
            mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

            meshPos =  latLon2ThreeMeters(objectPosition[0], objectPosition[1]);                         

            mesh.geometry.computeBoundingBox();
            var xsize = mesh.geometry.boundingBox.max.x - mesh.geometry.boundingBox.min.x;
            var ysize = mesh.geometry.boundingBox.max.y - mesh.geometry.boundingBox.min.y;
            var zsize = mesh.geometry.boundingBox.max.z - mesh.geometry.boundingBox.min.z;
            var desiredXSize = 10; 
            var desiredYSize = 10; 
            var desiredZSize = 10; 

            mesh.scale.x = desiredXSize / xsize;
            mesh.scale.y = desiredYSize / ysize;
            mesh.scale.z = desiredZSize / zsize;

            mesh.position.x = meshPos.x;
            mesh.position.y = meshPos.y - 2; // the parking lot is sligthly under the street level
            mesh.position.z = meshPos.z;

            mesh.rotation.y = Math.PI/2;

            mesh.castShadow = true;

            var streetViewOverlay = StreetViewOverlay();
            streetViewOverlay.load({streetView: true, objects3D: true, webGL:true}, mesh,48.8049084,2.120357);           
        }

        </script>
    </body>
</html>

Answer 1

So here's the thing.. you can covert to three.json format, and that's fine, but the version of your conversion tools have to match the version of three you're using.. you also want to be on close to the most recent three.js version..

but a large issue is that the three.json format is still somewhat in flux between versions, so I have had situations in the past where previously exported models go stale.

If I we're you .. I would use the OBJLoader and load your OBJ directly, or use a format like GLTF or Collada, and their respective loaders. Those formats are less likely to age. Especially GTLF looks like its heading toward being widely supported and has a lot of nice features that make it very efficient for realtime 3d.

re your specific problem: First I would ask if you see any errors in the console from when you load your model. Second, I would put a debug breakpoint on the line inside the loader, and visually inspect the scene and its .children,

OR log it in the code with a scene.traverse((elem)=>{console.log(elem.type,elem);});

If that doesn't show at least one "Mesh" it means your conversion may have had problems.. if it does show, it could mean the mesh is too tiny to see, too Huge to see, or maybe the material is accidently transparent or many other possibilities. At that point, you can look at the mesh.geometry and make sure it has vertices and elements within it...

Failing all that:

If you try with OBJLoader or some other loader, and still can't get it to work.. check back with us. :)

Replace 3d model (json)

Question

1 answers

solution1
0 ACCPTED 2018-04-14 10:19:43

Replace 3d model (json)

Question

1 answers

solution1 0 ACCPTED 2018-04-14 10:19:43

solution1
0 ACCPTED 2018-04-14 10:19:43