Three.js,我似乎无法看到对象

时间:2014-02-11 01:17:39

标签: three.js

我希望在Blender 2.69的导出输出中使用浏览器上的three.js显示对象。我可以重新导入内容并确认它正在工作,我已将导出结果附加为json.js。

页面在firebug中成功加载而没有JS错误,但不显示对象。我正在尝试根据示例进行调试 - 我没有找到一个明显的问题,因为所有部分似乎都已到位。

我知道这要经历很多事情,但我会喜欢一些建议。

init.js

// LAUNCHER

$(document).ready(function(){

init();

});

// GLOBALS

var loader, scene, renderer, camera, material, mesh;
var sceneWidth = $(window).width();
var sceneHeight = $(window).height();

function init(){

// LOADER
loader = new THREE.JSONLoader(true);
loader.load("/javascript/json.js", function(geometry){

    // RENDERER
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(sceneWidth, sceneHeight);
    renderer.setClearColor(0x000000, 1);
    $('#container').append(renderer.domElement);

    // SCENE
    scene = new THREE.Scene();

    // CAMERA
    camera = new THREE.PerspectiveCamera(35, sceneWidth / sceneHeight, 1, 20000);
    camera.position.set(1.241,3.452,-0.444);
    camera.lookAt(scene.position);

    // MATERIAL
    material = new THREE.MeshLambertMaterial({color: 0xffffff});

    // MESH
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // LIGHT
    // point light
    var pointLight = new THREE.PointLight(0xffffff, 200, 210);
    pointLight.position.set(-100,200,100);
    scene.add(pointLight);
    // ambient
    var ambientLight = new THREE.AmbientLight( 0x404040 );
    scene.add(ambientLight);

    animate();

    console.log();

});

}

// ANIMATE

function animate(){

// Get Frame, Repeat
requestAnimationFrame(animate);

// Render
renderer.render(scene, camera);

}

json.js

{

"metadata" :
{
    "formatVersion" : 3.1,
    "generatedBy"   : "Blender 2.65 Exporter",
    "vertices"      : 8,
    "faces"         : 6,
    "normals"       : 8,
    "colors"        : 0,
    "uvs"           : [],
    "materials"     : 1,
    "morphTargets"  : 0,
    "bones"         : 0
},

"scale" : 1.000000,

"materials" : [ {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
    "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
    "colorSpecular" : [0.5, 0.5, 0.5],
    "depthTest" : true,
    "depthWrite" : true,
    "shading" : "Lambert",
    "specularCoef" : 50,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
}],

"vertices" : [5.76722,-0.488412,-3.17431,5.04979,-0.387833,-1.31012,3.43733,0.585297,-1.98318,4.15476,0.484717,-3.84736,6.70811,1.25598,-2.90632,5.99068,1.35656,-1.04214,4.37822,2.32969,-1.7152,5.09566,2.22911,-3.57938],

"morphTargets" : [],

"normals" : [0.400952,-0.813501,-0.421186,-0.013215,-0.755425,0.655049,-0.944182,-0.193579,0.266457,-0.529954,-0.251656,-0.809778,0.944182,0.193579,-0.266457,0.013215,0.755425,-0.655049,-0.400952,0.813501,0.421186,0.529954,0.251656,0.809778],

"colors" : [],

"uvs" : [],

"faces" : [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],

"bones" : [],

"skinIndices" : [],

"skinWeights" : [],

"animations" : []


}

1 个答案:

答案 0 :(得分:3)

问题完全在于摄像机角度,以下证明了这一点。

camera.position.set(0,100,0); camera.lookAt(scene.position);

基本上抬起相机并瞄准现场。

我为每个人浪费时间而道歉。