[英]Replace 3d model (json)
我在網上找到了一個示例,在此示例中,展示了一個放置在停車場上的3D模型(摩天輪),並以Google街景全景為背景。
現在,我想用另一個3d對象(小行星)替換摩天輪,我將其下載為3DS和OBJ。 文件。 我通過Blender將3DS文件轉換為JSON,但是當我替換文件時,它僅顯示一個空白屏幕。
我該怎么做? 這是我的代碼:
<!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>
所以這就是問題..您可以隱藏為three.json格式,這很好,但是轉換工具的版本必須與您正在使用的三個版本相匹配..您還希望保持最新狀態three.js版本..
但是一個很大的問題是,Three.json格式在各個版本之間仍然有所變化,因此在過去,我曾遇到過以前導出的模型過時的情況。
如果我是你..我將使用OBJLoader並直接加載您的OBJ,或者使用類似GLTF或Collada的格式以及它們各自的加載器。 這些格式不太可能老化。 特別是GTLF似乎正受到廣泛支持,並且具有許多出色的功能,使其對於實時3d十分有效。
關於您的特定問題:首先,請問您從加載模型時在控制台中是否看到任何錯誤。 其次,我將在加載程序內部的行上放置一個調試斷點,並目視檢查場景及其.children,
或者使用scene.traverse((elem)=> {console.log(elem.type,elem);})將其記錄在代碼中。
如果未顯示至少一個“網格”,則表示您的轉換可能有問題..如果顯示,則可能意味着網格太小而看不見,太大而看不見,或者材質意外透明或許多其他可能性。 到那時,您可以查看mesh.geometry並確保其中包含頂點和元素。
全部失敗:
如果您嘗試使用OBJLoader或其他加載程序,但仍然無法正常使用..請與我們聯系。 :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.