I'm trying to load a simple blender exported json file into three.js. It's not loading and throwing the following error:
Uncaught TypeError: Cannot read property 'transparent' of undefined
h @ three.min.js:449
h @ three.min.js:449
render @ three.min.js:560
render @ (index):53
What's happening here? What am I doing wrong?
Here's a plunker (that includes the json file that's too big to load here).
Here's my json loader:
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'sole.json',
// Function when resource is loaded
function ( geometry, materials ) {
var material = new THREE.MeshFaceMaterial( materials );
var object = new THREE.Mesh( geometry, material );
scene.add( object );
}
);
** Edit: After reading around on SO I tried a different loader and got the following errors:
Uncaught TypeError: Cannot read property 'type' of undefined
THREE.ObjectLoader.parseObject @ three.js:13062
THREE.ObjectLoader.parse @ three.js:12702
(anonymous function) @ three.js:12673
(anonymous function) @ three.js:11757
Here's the new loader that gave those errors:
var loader = new THREE.ObjectLoader();
loader.load( 'sole.json', function ( object ) {
scene.add( object );
} );
Line 12673 reads: scope.parse( JSON.parse( text ), onLoad ); Line 11757 reads: if ( onLoad ) onLoad( this.response );
Here's the context of line 11757:
var request = new XMLHttpRequest();
request.open( 'GET', url, true );
request.addEventListener( 'load', function ( event ) {
THREE.Cache.add( url, this.response );
if ( onLoad ) onLoad( this.response );
scope.manager.itemEnd( url );
}, false );
if ( onProgress !== undefined ) {
request.addEventListener( 'progress', function ( event ) {
onProgress( event );
}, false );
}
So basically it's just not parsing the json file correctly :(
Ok I figured it out. Here's a working plunker
Firstly the json loader does not seem to like the .json file extension. Go figure... So first I changed the extension to .js (from .json).
Then I used the following JSON loading code, from Ben Chung: http://benchung.com/lesson-2-importing-model/ (Thanks Ben!).
material = new THREE.MeshBasicMaterial({
wireframe: true,
color: 'blue'
});
group = new THREE.Object3D();
var loader = new THREE.JSONLoader();
loader.load('sole.js', modelLoadedCallback);
}
function modelLoadedCallback(geometry) {
mesh = new THREE.Mesh( geometry, material );
group.add(mesh);
scene.add( group );
}
The entire JS looks like this:
var scene, camera, renderer, geometry, material, cube, group;
init();
render();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.z = 5;
//set background to have transparency - alpha: true
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("viewport").appendChild(renderer.domElement);
material = new THREE.MeshBasicMaterial({
wireframe: true,
color: 'blue'
});
group = new THREE.Object3D();
var loader = new THREE.JSONLoader();
loader.load('sole.js', modelLoadedCallback);
}
function modelLoadedCallback(geometry) {
mesh = new THREE.Mesh( geometry, material );
group.add(mesh);
scene.add( group );
}
function render() {
requestAnimationFrame(render);
mesh.rotation.y += 0.05;
renderer.render(scene, camera);
The html looks like this:
<html>
<head>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<div id="viewport"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I tried this with both my json code and a json export of the regular cube from blender, they both worked.
Here's the json of the blender exported cube that worked:
{
"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" : [1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
"morphTargets" : [],
"normals" : [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
"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" : []
}
However, it seems that blender also spits out JSON in a slightly different format; more indented levels, which does not work with this import/loader code... here's the json of the blender exported cube that DID NOT work:
{
"geometries": [{
"type": "Geometry",
"uuid": "13A102A2-FCD7-346C-97EF-339AC4D7C55E",
"data": {
"bones": [],
"normals": [0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,0.577349,0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,0.577349],
"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],
"vertices": [1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1,1,0.999999,1,0.999999,-1,1,-1,-1,1,-1,1,1],
"skinIndices": [],
"metadata": {
"bones": 0,
"version": 3,
"generator": "io_three",
"materials": 1,
"uvs": 0,
"normals": 8,
"morphTargets": 0,
"colors": 0,
"vertices": 8,
"faces": 6
},
"name": "CubeGeometry.1",
"morphTargets": [],
"influencesPerVertex": 2,
"uvs": [],
"colors": [],
"skinWeights": []
},
"materials": [{
"colorAmbient": [0.64,0.64,0.64],
"specularCoef": 50,
"opacity": 1,
"DbgName": "Material",
"visible": true,
"wireframe": false,
"blending": "NormalBlending",
"depthTest": true,
"colorEmissive": [0,0,0],
"vertexColors": false,
"transparent": false,
"shading": "phong",
"DbgColor": 15658734,
"depthWrite": true,
"colorDiffuse": [0.64,0.64,0.64],
"DbgIndex": 0,
"colorSpecular": [0.5,0.5,0.5]
}]
}],
"textures": [],
"object": {
"type": "Scene",
"children": [{
"type": "PerspectiveCamera",
"name": "Camera",
"uuid": "DE0714B3-5D16-30EF-9A0A-6C5D6DD394B9",
"matrix": [-0.685881,-0.010817,0.727634,0,0.31737,0.895343,0.312469,0,-0.654862,0.445245,-0.610666,0,-7.48113,5.34366,-6.50764,1],
"visible": true,
"far": 100,
"near": 0.1,
"aspect": 1.77778,
"fov": 35
},{
"type": "Mesh",
"name": "Cube",
"uuid": "F29D1AC4-D789-3D8E-BAB5-59DC1B758FE2",
"matrix": [-1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1],
"visible": true,
"material": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
"castShadow": true,
"receiveShadow": true,
"geometry": "13A102A2-FCD7-346C-97EF-339AC4D7C55E"
},{
"type": "PointLight",
"name": "Lamp",
"uuid": "480358C5-FC08-314B-A146-DEE8993A0407",
"matrix": [0.290865,-0.055189,0.955171,0,0.771101,0.604525,-0.199883,0,-0.566393,0.794672,0.218391,0,-4.07625,5.90386,1.00545,1],
"visible": true,
"color": 16777215,
"intensity": 1,
"distance": 30
}],
"uuid": "9614A834-28AE-4B64-8D0F-B01723515C83",
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
},
"metadata": {
"type": "Object",
"version": 4.3,
"generator": "io_three"
},
"images": [],
"materials": [{
"type": "MeshPhongMaterial",
"uuid": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
"vertexColors": false,
"depthTest": true,
"ambient": 10724259,
"blending": "NormalBlending",
"emissive": 0,
"color": 10724259,
"name": "Material",
"shininess": 50,
"specular": 8355711,
"depthWrite": true
}]
}
**Edit: I since found the following youtube videos, that give many clear examples of different export/import scenarios from blender to three.js: https://www.youtube.com/playlist?list=PLOGomoq5sDLutXOHLlESKG2j9CCnCwVqg (Being that I could not find much about this on SO, I figured I'd post the this for anyone else who's trying to figure this out).
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments