替换3D模型（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. 我在网上找到了一个示例，在此示例中，展示了一个放置在停车场上的3D模型（摩天轮），并以Google街景全景为背景。

Now I want to replace the Ferris wheel with another 3d object — an asteroid — that I download as a 3DS and OBJ. 现在，我想用另一个3d对象（小行星）替换摩天轮，我将其下载为3DS和OBJ。 file. 文件。 I converted the 3DS file to JSON through Blender but when I replace the file it just shows a blank screen. 我通过Blender将3DS文件转换为JSON，但是当我替换文件时，它仅显示一个空白屏幕。

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.. 所以这就是问题..您可以隐藏为three.json格式，这很好，但是转换工具的版本必须与您正在使用的三个版本相匹配..您还希望保持最新状态three.js版本..

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. 但是一个很大的问题是，Three.json格式在各个版本之间仍然有所变化，因此在过去，我曾遇到过以前导出的模型过时的情况。

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. 如果我是你..我将使用OBJLoader并直接加载您的OBJ，或者使用类似GLTF或Collada的格式以及它们各自的加载器。 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. 特别是GTLF似乎正受到广泛支持，并且具有许多出色的功能，使其对于实时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, 其次，我将在加载程序内部的行上放置一个调试断点，并目视检查场景及其.children，

OR log it in the code with a scene.traverse((elem)=>{console.log(elem.type,elem);}); 或者使用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... 到那时，您可以查看mesh.geometry并确保其中包含顶点和元素。

Failing all that: 全部失败：

If you try with OBJLoader or some other loader, and still can't get it to work.. check back with us. 如果您尝试使用OBJLoader或其他加载程序，但仍然无法正常使用..请与我们联系。 :) :)

替换3D模型（JSON）

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-04-14 10:19:43

替换3D模型（JSON）

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-04-14 10:19:43

解决方案1
0 已采纳 2018-04-14 10:19:43