wie three.js

Question

Hallo allerseits json und Rendering in importieren i Code schreiben, für eine JSON-Datei importieren und mit three.js Rendering-i von three.js editor die JSON-Datei exportiert es in der Konsole

window.onload = function(){ 
var 
    shapeObjectUrl = "test.json", 
    scene = new THREE.Scene(), 
    camera = new  THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000), 
    renderer = new THREE.WebGLRenderer(), 
    loader = new THREE.JSONLoader(); 

renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

loader.load(shapeObjectUrl, 
    function (geometry, materials) { 
     console.log(geometry, materials); 
     var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial()); 
     scene.add(mesh); 
     console.log(mesh); 
     render(); 
}); 

camera.position.z = 5; 

var render = function() { 
    requestAnimationFrame(render); 
    renderer.render(scene, camera); 
}; 

}; 

einen Fehler zeigt, tut

Json-Datei:

{ 
"metadata": { 
    "version": 4, 
    "type": "geometry", 
    "generator": "GeometryExporter" 
}, 
"vertices": [0,50,20,14.14213562373095,50,14.142135623730951,20,50,1.2246063538223773e-15,14.142135623730951,50,-14.14213562373095,2.4492127076447545e-15,50,-20,-14.14213562373095,50,-14.142135623730955,-20,50,-3.673819061467132e-15,-14.142135623730955,50,14.142135623730947,-4.898425415289509e-15,50,20,0,-50,20,14.14213562373095,-50,14.142135623730951,20,-50,1.2246063538223773e-15,14.142135623730951,-50,-14.14213562373095,2.4492127076447545e-15,-50,-20,-14.14213562373095,-50,-14.142135623730955,-20,-50,-3.673819061467132e-15,-14.142135623730955,-50,14.142135623730947,-4.898425415289509e-15,-50,20,0,50,0,0,-50,0], 
"normals": [0.3826834323650897,0,0.9238795325112866,0,0,1,0.7071067811865475,0,0.7071067811865476,0.9238795325112866,0,0.3826834323650899,1,0,6.123031769111886e-17,0.9238795325112866,0,-0.38268343236508967,0.7071067811865476,0,-0.7071067811865475,0.3826834323650899,0,-0.9238795325112866,1.2246063538223773e-16,0,-1,-0.3826834323650895,0,-0.9238795325112868,-0.7071067811865474,0,-0.7071067811865476,-0.9238795325112866,0,-0.38268343236508984,-1,0,-1.836909530733566e-16,-0.9238795325112868,0,0.3826834323650895,-0.7071067811865478,0,0.7071067811865475,-0.38268343236508995,0,0.9238795325112866,-2.4492127076447545e-16,0,1,0,1,0,0,-1,0], 
"uvs": [[0,1,0,0,0.125,1,0.125,0,0.25,1,0.25,0,0.375,1,0.375,0,0.5,1,0.5,0,0.625,1,0.625,0,0.75,1,0.75,0,0.875,1,0.875,0,1,1,1,0]], 
"faces": [56,0,9,1,0,1,2,0,1,1,2,56,9,10,1,1,3,2,0,1,2,2,56,1,10,2,2,3,4,3,2,2,4,56,10,11,2,3,5,4,3,2,4,4,56,2,11,3,4,5,6,5,4,4,6,56,11,12,3,5,7,6,5,4,6,6,56,3,12,4,6,7,8,7,6,6,8,56,12,13,4,7,9,8,7,6,8,8,56,4,13,5,8,9,10,9,8,8,10,56,13,14,5,9,11,10,9,8,10,10,56,5,14,6,10,11,12,11,10,10,12,56,14,15,6,11,13,12,11,10,12,12,56,6,15,7,12,13,14,13,12,12,14,56,15,16,7,13,15,14,13,12,14,14,56,7,16,8,14,15,16,15,14,14,16,56,16,17,8,15,17,16,15,14,16,16,56,0,1,18,0,2,3,17,17,17,17,56,1,2,18,2,4,5,17,17,17,17,56,2,3,18,4,6,7,17,17,17,17,56,3,4,18,6,8,9,17,17,17,17,56,4,5,18,8,10,11,17,17,17,17,56,5,6,18,10,12,13,17,17,17,17,56,6,7,18,12,14,15,17,17,17,17,56,7,8,18,14,16,17,17,17,17,17,56,10,9,19,3,1,0,18,18,18,18,56,11,10,19,5,3,2,18,18,18,18,56,12,11,19,7,5,4,18,18,18,18,56,13,12,19,9,7,6,18,18,18,18,56,14,13,19,11,9,8,18,18,18,18,56,15,14,19,13,11,10,18,18,18,18,56,16,15,19,15,13,12,18,18,18,18,56,17,16,19,17,15,14,18,18,18,18] 
} 

ich schätze jede Hilfe

Answer 1

Die Methode, die Sie richtig verwendet werden, außer für einige kleinere Dinge wie, in loader.load Aufruf der Funktion Sie versuchen, auch auf Material zugreifen, aber es ist nicht in der JSON enthalten.

Jetzt habe ich Ihren Code verwendet und konnte das JSON-Objekt erfolgreich laden. Es ist also nichts falsch daran, außer dass Sie die Kameraposition auf 5 setzen, wodurch das geladene Modell aus der Ansicht entfernt wird.

So können Sie das Modell wie dieses

 var loader = new THREE.JSONLoader(); 
     loader.load('models/jsonModel.json', function (geometry) { 
     var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial()); 

         mesh.position.x =500; 
         mesh.position.y =100; 
         mesh.position.z =500; 
     scene.add(mesh); 

     }); 

oder eingestellt Neupositionierung der camera Position in eine andere Position.

Sie können stattdessen auch OrbitControls verwenden.

Einschließlich der oben genannten Dinge habe ich einen Beispielcode here erstellt, können Sie sehen, Linien 138 und 62, besser zu verstehen.