[英]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.