替换3d模型(json)
我在网上找到了一个例子，在这个例子中，一个3D模型(摩天轮)放置在一个停车场上，背景是谷歌街景全景。
现在我想用另一个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>回答 1
Stack Overflow用户
发布于 2018-04-14 10:19:43
事情是这样的..。您可以转换为three.json格式，这很好，但是您的转换工具的版本必须与您使用的三种格式的版本相匹配。你也想接近最新的three.js版本..。
但是一个很大的问题是，three.json格式在不同版本之间仍然有些变化，所以我曾经遇到过以前导出的模型已经过时的情况。
如果我是你..。我将使用OBJLoader并直接加载您的OBJ，或者使用GLTF或Collada之类的格式，以及它们各自的加载器。这些格式不太可能老化。特别是GTLF看起来像它的标题，得到了广泛的支持，并有许多好的功能，使它非常有效的实时3d。
r.e.您的具体问题:首先，我会问您在加载模型时是否在控制台中看到任何错误。第二，我会在加载程序内部的行上放置一个调试断点，并直观地检查场景及其.children，
或将其记录在代码中( scene.traverse((elem)=>{console.log(elem.type，elem);})；
如果这没有显示至少一个“网格”，这意味着您的转换可能有问题。如果它确实显示了，它可能意味着网格太小，看不见，太大，看不见，或者材料是偶然透明或许多其他可能性。此时，您可以查看mesh.geometry并确保它中有顶点和元素.
所有这些都失败了：
如果您尝试使用OBJLoader或其他加载程序，但仍然无法使其工作。跟我们核对一下。:)
https://stackoverflow.com/questions/49830203
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号