This is a snippet of my code -
materialArray=[];
materialArray.push(new THREE.MeshBasicMaterial({map:frontCounterTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:frontCounterTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:frontCounterTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:blackTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:blackTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:blackTexture}));
frontCounterMaterial=new THREE.MultiMaterial(materialArray);
frontCounter.material=frontCounterMaterial;
The scene gets rendered properly using the editor (threejs/editor), however export doesn't work.
When I do the following -
frontCounter.toJSON()
I get the following -
Uncaught TypeError: Cannot read property 'textures' of undefined(…)
I traced it back to -
THREE.Texture.toJSON:
if ( meta.textures[ this.uuid ] !== undefined ) {
return meta.textures[ this.uuid ];
}
I do not understand how to fix this, that is export a Mesh with MultiMaterial applied to it. Any help?
The PR on github suggests that it currently works with MeshPhongMaterial https://github.com/mrdoob/three.js/pull/6509, I suggest trying that instead of MeshBasicMaterial.
Related
I am trying to load a workshop (glTF file) in my scene but all I get is the error message
Uncaught (in promise) TypeError: Cannot read property 'geometry' of undefined at GLTFLoader.js:2572
I tried opening the file in Three.js editor and in glTF Viewer and it worked, I also checked the file with glTF Validator and it said the file was valid but I can't figure out why it doesn't with me. I also tried to open another glTF model found on the Internet with my code and it worked just fine.
new Promise(function(resolve, reject) {
const manager = new THREE.LoadingManager();
const gltfloader = new THREE.GLTFLoader(manager);
gltfloader.setCrossOrigin('anonymous');
gltfloader.setDRACOLoader(new THREE.DRACOLoader());
gltfloader.load("data/gltf/salleTP/salleTP.gltf", function (gltf) {
const content = gltf.scene || gltf.scenes[0];
scene.add(content);
}, undefined, reject);
});
It seems you are using three.js R102 and the respective GLTFLoader version. When loading your glTF asset, a known error in GLTFLoader occurs that was fixed with R103 (see https://github.com/mrdoob/three.js/pull/15881). After upgrading your code base to the latest three.js version, your asset loads fine.
three.js R104
I am loading a very complex 3D model from a PLY file (over 60Mb). In my project I need to use the orbit-control to move around the object. Obviously due to the large file the operation is painfully slow in some couputers. In order to speed up things a bit I am trying to convert my geometry into a Buffer geometry with the following lines of code:
this.loader.load('assets/data/GuyFawkesMask.ply', function (geometry) {
var bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry );
console.log(bufferGeometry);
// Create object
let object =
new THREE.Mesh(bufferGeometry,
new THREE.MeshPhongMaterial(
{
color: 0xFFFFFF,
//vertexColors: THREE.VertexColors,
shading: THREE.FlatShading,
shininess: 0
})
);
_this.add(object);
});
But I am getting the following error:
TypeError: Cannot read property '0' of undefined
at DirectGeometry.fromGeometry (three.module.js:12219)
at BufferGeometry.fromGeometry (three.module.js:14307)
at threed-viewer.component.ts:379
at index.js:52
at XMLHttpRequest. (three.module.js:29263)
at ZoneDelegate.webpackJsonp.818.ZoneDelegate.invokeTask (zone.js:367)
at Object.onInvokeTask (ng_zone.js:264)
at ZoneDelegate.webpackJsonp.818.ZoneDelegate.invokeTask (zone.js:366)
at Zone.webpackJsonp.818.Zone.runTask (zone.js:166)
at XMLHttpRequest.ZoneTask.invoke (zone.js:420)
Any idea?
Thank you,
Dino
Just posting prisoner849 comment (as an answer) for future reference:
If I get it right, looking into the source code of PLYLoader.js, the
geometry, which the callback function returns, is already of
THREE.BufferGeometry()
I'm attempting to get a basic THREE.js example to work and modify it from there on out but it just keeps outputting a torus, no matter what I change.
I've copied the exact code from the docs page into a JSFiddle and again I get a torus.
Here is the docs page example:
CylinderGeometry
And here is the jsfiddle with the torus: https://jsfiddle.net/ded9grxn/
I've tried adding the code from the docs page to the example like so:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshPhongMaterial(
{
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
shading: THREE.FlatShading
});
mesh.add(
new THREE.Mesh(
geometry,
material
)
);
But to no avail. Any help is appreciated!
The reason you fiddle does not work is that the script you invoke (https://threejs.org/docs/scenes/js/geometry.js) looks at the hash in the URL of the window to select the object.
If you go to
https://threejs.org/docs/scenes/geometry-browser.html#CylinderGeometry
you get the cylinder.
If you go to
https://threejs.org/docs/scenes/geometry-browser.html
you get the default, which is a torus.
For the reason why your modification does not work, we need more information about how you performed the modif (what did you remove, where did you add).
(Edit) in the fiddle, after doing your modification, do not forget to remove the line
var options = chooseFromHash( mesh );
this is where your script invokes the function in geometry.js that will set the mesh according to the hash in the URL
Hello everybody i'm trying to load 3D object in the browser using Three.js framework, and i'm getting this error "Uncaught TypeError: Cannot read property 'length' of undefined" this is the error http://s14.postimg.org/ib0coauf5/length_Error.png!, this error occurs when i'm trying to load a complex 3D object (a table for example), but when it's a simple object (a cube for example) no error is shown and my object is loaded successfully.
and this is the code of my JSonloader
var loader = new THREE.JSONLoader();
loader.load( "models/object3d.json", function(geometry){
var material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
and this this the export options in blender2.73a http://s13.postimg.org/bfluv5nw7/export.png
any help will be verry appreciated thank you!
After updating from three.js r62Dev to r64 or r64Dev I am receiving the following error.
var radarMaterial = new THREE.SpriteMaterial( { map: radarTexture2, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft } );
Uncaught TypeError: Cannot read property 'topLeft' of undefined.
Has any one else experienced this?
SpriteMaterial.alignment and SpriteMaterial.useScreenCoordinates have been removed from Threejs. See the release history: https://github.com/mrdoob/three.js/releases.
Sprites are now rendered in the scene just like any other object.
If you want to create a heads-up display (HUD), the work-around is to overlay a second scene of sprites, rendered with an orthographic camera.
See http://threejs.org/examples/webgl_sprites.html for an example of how to do that.
three.js r.64