我正在尝试加载JSON模型并在画布上显示它。但屏幕上没有任何内容。我试图在loader.load
回调中放置警报,但警报从未显示:永远不会调用回调。我想知道JSON文件是否有问题,我从这里下载了它:https://livingvindonissa.googlecode.com/svn-history/r42/trunk/livingvindonissa/src/model/test/Teapot.json
这是代码:
<head>
<title> Teapot </title>
<style>
canvas {width:100%; height:100%; background-color: black}
body {background-color: white};
</style>
</head>
<body>
<h1 align="center"> Teapot </h1>
<script src="/Users/ramy/Documents/HTML/mrdoob-three.js-58e4622/build/three.min.js"></script>
<script type="text/javascript">
// Scene initialization
var scene= new THREE.Scene();
var camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
var renderer= new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z= 50;
// Teapot creation
var teapot;
var loader= new THREE.JSONLoader();
loader.load("/Users/ramy/Documents/HTML/teapot.json",
function(geometry) {
var material= new THREE.MeshBasicMaterial({color:0x00ff00});
teapot= new THREE.Mesh(geometry,material);
scene.add(teapot);
render();
});
// Rendering
var render= function() {
requestAnimationFrame(render);
renderer.render(scene,camera);
}
</script>
</body>
</html>
答案 0 :(得分:1)
您使用的模型格式似乎与通过Three.js plugin或Python script converter从Blender导出的格式不同。对我来说,告诉我的是Three.js有JSON格式包含元数据块:
"metadata" :
{
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.65 Exporter",
"vertices" : 25253,
"faces" : 49658,
"normals" : 25252,
"colors" : 0,
"uvs" : [25399],
"materials" : 8,
"morphTargets" : 0,
"bones" : 0
},
您的文件也有
"vertexPositions"
"vertexNormals"
"vertexTextureCoords"
"indices"
而不是
"vertices"
"normals"
"uvs"
"faces"
我怀疑该文件是以通用的 Model to JSON 格式生成的,而不是Three.js JSON格式。你能否确认你使用的出口商?
编辑:为了澄清,这个问题的答案是使用的JSON格式与Three.js JSONLoader不兼容。您需要找到原始文件,并使用上述方法进行转换,或手动转换您必须符合Three.js JSON格式的JSON文件。