我试图只渲染一个blender导出的json（导出为三个js使用）。我按照以下方式做到这一点。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Three.js JSON Loader Demo</title>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript">
var renderer; // A three.js WebGL or Canvas renderer.
var scene; // The 3D scene that will be rendered, containing the model.
var camera; // The camera that takes the picture of the scene.
var light; // A light shining from the direction of the camera.
var model; // The three.js object that represents the model.
var rotateX = 0; // rotation of model about the x-axis
var rotateY = 0; // rotation of model about the y-axis
function modelLoadedCallback(geometry, materials) {
var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
/* Determine the ranges of x, y, and z in the vertices of the geometry. */
var xmin = Infinity;
var xmax = -Infinity;
var ymin = Infinity;
var ymax = -Infinity;
var zmin = Infinity;
var zmax = -Infinity;
for (var i = 0; i < geometry.vertices.length; i++) {
var v = geometry.vertices[i];
if (v.x < xmin)
xmin = v.x;
else if (v.x > xmax)
xmax = v.x;
if (v.y < ymin)
ymin = v.y;
else if (v.y > ymax)
ymax = v.y;
if (v.z < zmin)
zmin = v.z;
else if (v.z > zmax)
zmax = v.z;
}
/* translate the center of the object to the origin */
var centerX = (xmin+xmax)/2;
var centerY = (ymin+ymax)/2;
var centerZ = (zmin+zmax)/2;
var max = Math.max(centerX - xmin, xmax - centerX);
max = Math.max(max, Math.max(centerY - ymin, ymax - centerY) );
max = Math.max(max, Math.max(centerZ - zmin, zmax - centerZ) );
var scale = 10/max;
object.position.set( -centerX, -centerY, -centerZ );
console.log("Loading finished, scaling object by " + scale);
console.log("Center at ( " + centerX + ", " + centerY + ", " + centerZ + " )");
/* Create the wrapper, model, to scale and rotate the object. */
model = new THREE.Object3D();
model.add(object);
model.scale.set(scale,scale,scale);
rotateX = rotateY = 0;
scene.add(model);
render();
}
function render() {
renderer.render(scene, camera);
}
function init() {
try {
var theCanvas = document.getElementById("cnvs");
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, theCanvas.width/theCanvas.height, 0.1, 100);
camera.position.z = 30;
light = new THREE.DirectionalLight();
light.position.set(0,0,1);
renderer = new THREE.WebGLRenderer( {
canvas: theCanvas,
antialias: true
} );
scene.add(light);
render();
var loader = new THREE.JSONLoader();
loader.load("DummyBox.js", modelLoadedCallback);
}
catch (e) {
document.getElementById("message").innerHTML = "Sorry, an error occurred: " + e;
}
}
</script>
</head>
<body onload="init()" bgcolor="#CCC">
<noscript>
<p style="color: #A00; font-weight: bold">Sorry, but this page requires JavaScript!</p>
</noscript>
<div style="float:left">
<canvas width=350 height=400 id="cnvs" style="background-color:black"></canvas>
</div>
</body>
</html>
DummyBox.js 的内容是
{
"metadata":{
"generator":"io_three",
"type":"BufferGeometry",
"normal":36,
"version":3,
"position":36
},
"data":{
"index":{
"type":"Uint16Array",
"itemSize":1,
"array":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]
},
"attributes":{
"position":{
"type":"Float32Array",
"itemSize":3,
"array":[1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,0.999999,1,1,1,1,-1,1,1,-1,1,-1,1,1,-1,-1,0.999999,1,1,-1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,0.999999,1,1,1,1,-1,0.999999,1,1,1,-1,1,0.999999,1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,1,1,-1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1]
},
"normal":{
"type":"Float32Array",
"itemSize":3,
"array":[-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1]
}
}
}
}
我是三个j的新手并且无法弄清问题是什么。有没有我可以通过的网站..导出的JSON文件是否有任何问题。
答案 0 :(得分：2)
json脚本看起来不错。 如果替换loader类（如@ TheJim01已经提到的那样）
var loader = new THREE.BufferGeometryLoader(); //new THREE.JSONLoader();
并在 modelLoadedCallback 函数（more here）中处理这样的几何体：
var geometry = new THREE.Geometry().fromBufferGeometry(geometry);
你会顺利通过。
PS。 modelLoadedCallback 函数中的材料参数未定义。 您可以这样定义：
var materials = new THREE.MeshLambertMaterial({color:0xff0000});