Question

我正在尝试如何使用来自three.js的最新插件将Blender 2.72b中的导出JSON文件集成到下面教程中的一个非常简单的场景中。 http://blog.teamtreehouse.com/the-beginners-guide-to-three-js

我使用与教程中相同的文件夹等。我只是指向一个新的json文件。我可以在three.js 3D编辑器中打开json文件，因此我认为该文件是可读的。

以下是我正在使用的index.html

 <!doctype html>
 <html lang="en">
<head>
<title>Treehouse Logo in three.js</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>

    <script src="js/loaders/ColladaLoader.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>
<script>

// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;

init();
animate();

// Sets up the scene.
function init() {

  // Create the scene and set the scene size.
  scene = new THREE.Scene();
  var WIDTH = window.innerWidth,
      HEIGHT = window.innerHeight;

  // Create a renderer and add it to the DOM.
  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize(WIDTH, HEIGHT);
  document.body.appendChild(renderer.domElement);

  // Create a camera, zoom it out from the model a bit, and add it to the scene.
  camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
  camera.position.set(0,6,0);
  scene.add(camera);

  // Create an event listener that resizes the renderer with the browser window.
  window.addEventListener('resize', function() {
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  });

  // Set the background color of the scene.
  renderer.setClearColorHex(0xE90655, 1);

  // Create a light, set its position, and add it to the scene.
  var light = new THREE.PointLight(0xffffff);
  light.position.set(-100,200,100);
  scene.add(light);


  // Load in the mesh and add it to the scene.
  var loader = new THREE.JSONLoader();
  loader.load( "models/CL_BOX01b_LINKS3_C.json", function(geometry){
    var material = new THREE.MeshLambertMaterial({color: 0x55B663});
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  });

  // Add OrbitControls so that we can pan around with the mouse.
  controls = new THREE.OrbitControls(camera, renderer.domElement);

}


// Renders the scene and updates the render as needed.
function animate() {

  // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
  requestAnimationFrame(animate);

  // Render the scene.
  renderer.render(scene, camera);
  controls.update();

}

</script>

</body>
</html>

以下是json文件的开头。

{
"metadata": {
    "sourceFile": "CL_BOX01b LINKS3_C.blend",
    "type": "Object",
    "generator": "io_three",
    "version": 4.3
},
"geometries": [{
    "uuid": "6939A996-5785-41E8-BC8D-10025EE1909E",
    "type": "Geometry",
    "data": {
        "metadata": {
            "faces": 1891,
            "generator": "io_three",
            "version": 3,
            "vertices": 2548
        },
        "name": "Mesh.001Geometry.1",
        "faces":         [0,217,219,218,0,217,220,219,0,216,220,217,0,216,221,220,0,215,221,216,0,215,222,221,0,214,222,215,0,214,223,222,0,214,224,223,0,213,224,214,0,213,225,224,0,212,225,213,0,212,226,225,0,211,226,212,0,211,227,226,0,210,227,211,0,210,228,227,0,210,229,228,0,209,229,210,0,209,230,229,0,208,230,209,0,208,231,230,0,207,231,208,0,207,232,231,0,207,233,232,0,206,233,207,0,206,234,233,0,205,234,206,0,205,235,234,0,204,235,205,0,204,236,235,0,204,237,236,0,203,237,204,0,203,238,237,0,202,238,203,0

结果是没有物体的彩色背景。但是当我重新交换教程文件时，结果很好。

任何有关我出错的想法都会受到欢迎。

无法加载从Blender 2.7导出的三个.js的JSON文件

0 个答案: