I need to export Three Geometry to JSON so I can used with xml3D.
I am trying to find the THREE.GeometryExporter() but I can't. Has it been completely deprecated?
It is mentioned here
Once I have the Three JSON I should be able to use this converter to obtain the xml3D JSON.
Has anyone tried this before?
You should try the toJSON() method :
var json = geometry.toJSON();
This method is available for geometries, materials, lights, mesh ...
Realease 68 seems to be the last one with GeometyExporter in the examples folder.
https://github.com/mrdoob/three.js/tree/r68/examples/js/exporters
Not sure how you expect it to output to xml3D format (I've never tried it), though it should not be too hard to alter if need be.
This three.js json to xml3d converter may come in handy.
https://github.com/xml3d/threejs-to-xml3d
geometry.toJSON() wasn't outputting the information in the format I needed to do something similar. My solution was the following:
cannonPoints = geometry.vertices.map(function(v) {
return new CANNON.Vec3( v.x, v.y, v.z )
})
cannonFaces = geometry.faces.map(function(f) {
return [f.a, f.b, f.c]
})
I shared this solution on a similar problem here:
Create CANNON.RigidBody from THREE.Mesh or THREE.Geometry
Related
I have a question about updating geometry in three.js using dat.gui.
I expected I could update the geometry by updating the value tied into the geometry by object as below.
gui.add(parameter, 'width')
.min(1)
.max(10)
.step(0.1)
.name('cubeWidth')
.onChange((value) => {
mesh.geometry.dispose();
geometry.parameters.width = parameter.width
console.log(mesh)
})
However, it updates the geometry only when I redefine the geometry like below.
mesh.geometry = new THREE.BoxGeometry(parameter.width, 1, 1);
It's bit weird to me because even when I log the geometry data both shows the updated width value like below.
Why does only the first approach work while the other one not work?
geometry.parameters.width = parameter.width
This has no effect. Parameters are only processed when a geometry is created. The parameters property is in fact read-only.
The solution for your issue is indeed to recreate the geometry with the new set of parameters.
When loading multiple models, I am using the placementTransform parameters.
the issues I am facing is that the Rotation works however the translation does not.
var Rmat = new THREE.Matrix4();
Tmat=new THREE.Matrix4().makeTranslation(X,Y,Z);
Rmat.makeRotationZ(Angle);
Rmat.multiply(Tmat);
var modelOptions = {
placementTransform: Rmat,
sharedPropertyDbPath: doc.getRoot().getPropertyDbManifest()
};
As far as I know, placementTransform should support both translation and rotation. Try applying the transformations individually (only translation or only rotation), see if both are applied as expected. And also double-check if you're multiplying the matrices in the correct order.
Moreover, if you can reproduce the issue in a sample app, please share it with us via forge (dot) help (at) autodesk (dot) com and we'll take a look at it.
I tried all the combinations the only one that worked was using the globalOffset
and commented this._firstGlobalOffset the code that worked is as follows:
//this._firstGlobalOffset = {x:0,y:0,z:0}; // Commented
var Rmat = new THREE.Matrix4();
Rmat.makeRotationZ(Angle);
var modelOptions = {
placementTransform: Rmat,
globalOffset:{x:X,y:X,z:Z},
sharedPropertyDbPath: doc.getRoot().getPropertyDbManifest()
};
I'VE loaded a GLTF file with 2 mesh object in it (cube1, cube2) and rendered it, looks OK.
The problem is this :
I'm trying to manipulate the opacity / scale of those objects separately.
Tried to address them with:
Var cube1 = gltf.Scene.GetObjectByName('Cube1');
But when I try to define cube1.opacity, I get an "undefined" error.
Any help is appreciated!
Thanks
Well... even tho' the question is simple, the answer not so much.
First you are using a loader, usually this implies that your cube model will be a bit more complicated. You will go something like this:
3D Object > Children > Mesh [x] > material > Opacity
I have a live example here:
https://boxelizer.com/renderer.php?mid=7740369e824e4eadbd83e6f01fa96caa
In which you can go into the console and change that property like this:
model.children[1].material.transparent = true;
model.children[1].material.opacity = .5;
model.children[1].material.needsUpdate = true;
Your model may be a bit different but I hope this example helps you figure out yours.
I'm trying to experiment a little with glTF 2.0 models with animation.
Unfortunately, when i try to update the THREE.animationMixer, I get a warning:
THREE.Matrix3: .getInverse() can't invert matrix, determinant is 0.
Here's the setup:
The model:
I'm no 3D artist, so i've made a cube + torus in blender.
Also there are two actions in the Action Editor, moving the torus in two different ways.
You can download the .blend, and .glTF from here.
I think the export worked fine, since the model + animation are working in Don McCurdy's glTF viewer.
The Code:
I've tried using either Don McCurdy animation-mixer, or mixing Three.js into an a-frame component:
AFRAME.registerComponent("foo", {
init: function() {
var el = this.el;
setTimeout(()=>{
var model = el.getObject3D('mesh')
this.mixer = new THREE.AnimationMixer(model);
var clips = model.animations || (model.geometry || {}).animations ||
[];
console.log(this.mixer)
console.log(el)
console.log(clips[0])
const action = this.mixer.clipAction(clips[0], model);
action.setDuration(100).setLoop(THREE.LoopRepeat).play();
console.log(action)
}, 2000)
},
tick: function (t, dt) {
if (this.mixer && !isNaN(dt)) this.mixer.update(dt / 1000);
}
})
This code is basically a ripoff of Don's Loader. The only object that should be moving, the torus, dissapears, with the mentioned error, when I add the mixer.update part. Nothing logs as undefined, so the objects are created properly. Furthermore, the animation-mixer behavior is the same (i guess no surprise, since i just took part of it).
Any ideas what could be causing the problem ? I may be missing something, but i have no clue how to troubleshoot this.
Cubic bezier interpolation is broken in older versions of THREE (pre r87-r88 or so), which A-Frame 0.7.0 still uses. Switching to linear interpolation in Blender would work around this, or using the A-Frame master branch.
You also mention two actions in the Action Editor, which would be merged during export because multiple actions are still in progress for the Khronos glTF Blender exporter.
If that doesn't work, there is also another glTF Blender exporter to try: https://github.com/Kupoman/blendergltf/
I've tried finding an answer to this question but I couldn't. I am still very bad at WebGL and I only use Three.js to do my work. Do Three.js Mesh Constructors support the use of ANGLE_instanced_arrays to do Geometry Instancing?
If there is browser support for the ANGLE_instanced_array is there a way to create the THREE.Mesh() with Geometry Instancing rather than relying on "Pseudo Instancing" ?
Thanks in advance.
Yes it does (at least in r72). There are several examples that use the ANGLE_instanced_arrays extension like: http://threejs.org/examples/#webgl_buffergeometry_instancing, http://threejs.org/examples/#webgl_buffergeometry_instancing_billboards, http://threejs.org/examples/#webgl_buffergeometry_instancing_dynamic, http://threejs.org/examples/#webgl_buffergeometry_instancing_interleaved_dynamic
It doesn't appear that way. I've been looking for an authoritative answer to this question and haven't been able to find confirmation, but given that a search for the constant "ANGLE_instanced_arrays" on github yields no matches my guess is that it is not implemented.
THREE 's WebGLRenderer.supportsInstancedArrays() is now WebGLRenderer.extensions.get( 'ANGLE_instanced_arrays' ).
DeprecatedList
var geo = new THREE.InstancedBufferGeometry();
// src/core/InstancedBufferGeometry.js
isInstancedBufferGeometry: true,...
// src/renderers/WebGLRenderer.js
if ( geometry && geometry.isInstancedBufferGeometry ) {
if ( geometry.maxInstancedCount > 0 ) { renderer.renderInstances( geometry, drawStart, drawCount );
......
//src/renderers/webgl/WebGLIndexedBufferRenderer.js
function renderInstances( geometry, start, count ) {
var extension = extensions.get( 'ANGLE_instanced_arrays' );