Заменить 3d модель (JSON)

Я нашел пример в Интернете, и в этом примере показана 3D-модель (колесо обозрения), размещенная на парковке с панорамой Google Street View в качестве фона.

Теперь я хочу заменить колесо обозрения другим трехмерным объектом - астероидом, который я загружаю как 3DS и OBJ. файл. Я преобразовал файл 3DS в JSON через Blender, но когда я заменяю файл, он просто показывает пустой экран.

Как мне это сделать? Вот мой код:

<!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>
Источник

1 ответ

Решение

Итак, вот в чем дело... вы можете конвертировать в формат three.json, и это нормально, но версия ваших инструментов конвертации должна соответствовать версии трех, которую вы используете... вы также хотите быть ближе к самой последней версия Three.js..

но большая проблема заключается в том, что формат three.json все еще находится в движении между версиями, поэтому в прошлом у меня были ситуации, когда ранее экспортированные модели теряли актуальность.

Если бы я был вами... я бы использовал OBJLoader и загружал ваш OBJ напрямую, или использовал бы формат, такой как GLTF или Collada, и их соответствующие загрузчики. Эти форматы менее подвержены старению. Особенно GTLF выглядит так, как будто он широко поддерживается и имеет много приятных функций, которые делают его очень эффективным для реального времени 3d.

Ваша конкретная проблема: сначала я хотел бы спросить, видите ли вы какие-либо ошибки в консоли с момента загрузки вашей модели. Во-вторых, я бы поставил отладочную точку останова на линии внутри загрузчика и визуально осмотрел сцену и ее.children,

ИЛИ зарегистрируйте его в коде с помощью scene.traverse((elem)=>{console.log(elem.type,elem);});

Если это не показывает хотя бы одну "сетку", это означает, что у вашего преобразования могут быть проблемы... если это действительно показывает, это может означать, что сетка слишком мала, чтобы ее видеть, слишком огромна, чтобы ее увидеть, или, возможно, материал случайно прозрачен или много других возможностей. В этот момент вы можете посмотреть на mesh.geometry и убедиться, что в нем есть вершины и элементы...

В противном случае:

Если вы пытаетесь использовать OBJLoader или какой-либо другой загрузчик, но по-прежнему не можете заставить его работать... свяжитесь с нами.:)

Источник
Другие вопросы по тегам