Just like https://threejs.org/examples/?q=morph#webgl_morphtargets_human,
but I want to implement a glTF based demo .
I had tried glTF models such as https://github.com/HowardWolosky/glTF-Sample-Models/tree/morphAnimation/2.0/AnimatedMorphCube and https://github.com/HowardWolosky/glTF-Sample-Models/tree/morphAnimation/2.0/AnimatedMorphSphere, but they use animations, I want to control the morph weights manually, like:
mesh.morphTargetInfluences[0] = 0.5;
mesh.morphTargetInfluences[1] = 0;
mesh.morphTargetInfluences[2] = 1;
Thanks
I had solve this question myself by changing code in gltfloader.js.
see https://github.com/mrdoob/three.js/pull/11786#issuecomment-316423788
Related
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 am using bullet/ammo.js with three.js. I have a 3d mesh and I want to use the exact shape for collision detection with a soft body. Is there a way I can create a 3d rigid body (in bullet) from a mesh (in three.js)?
Here is an example:
http://kidzinski.com/miamisura/lazy3d/ (please wait a second for the 3d model to download). I have a cloth falling on a 3d body and I need to simulate collision of this cloth with the body.
I am new to these frameworks sorry if I fundamentally misunderstood something.
It looks like you can do some work to turn an arbitrary Three.js mesh into a Bullet concave mesh. This is supported by Physi.js, which is a plug and play solution to link Three.js directly to ammo.js. I personally wouldn't recommend using the project (Physi.js) but you can look at the source code to see how they implement concave meshes.
First they loop over the geometry to create a custom list of "triangle" data objects on these lines of physi.js
for ( i = 0; i < geometry.faces.length; i++ ) {
face = geometry.faces[i];
if ( face instanceof THREE.Face3) {
triangles.push([
...
Then these triangles are passed off to Ammo.js to make a new Ammo.btBvhTriangleMeshShape on these lines:
for ( i = 0; i < description.triangles.length; i++ ) {
...
triangle_mesh.addTriangle( _vec3_1, _vec3_2, _vec3_3, true );
}
...
shape = new Ammo.btBvhTriangleMeshShape( triangle_mesh, true, true );
This should be a good starting point for building your own Ammo.js custom mesh.
There are lots of threads around the web, that Physijs Concave mesh does not work with collission. It seems, that btBvhTriangleMeshShape is not intended to work with collission in ammo.js, as I found out searching for that topic in bullet related forums.
What worked for me, is btConvexHullShape:
var triangle, triangle_mesh = new Ammo.btTriangleMesh;
var btConvexHullShape = new Ammo.btConvexHullShape();
var _vec3_1 = new Ammo.btVector3(0,0,0);
var _vec3_2 = new Ammo.btVector3(0,0,0);
var _vec3_3 = new Ammo.btVector3(0,0,0);
for ( i = 0; i < triangles.length; i++ ) {
triangle = triangles[i];
_vec3_1.setX(triangle[0].x);
_vec3_1.setY(triangle[0].y);
_vec3_1.setZ(triangle[0].z);
btConvexHullShape.addPoint(_vec3_1,true);
_vec3_2.setX(triangle[1].x);
_vec3_2.setY(triangle[1].y);
_vec3_2.setZ(triangle[1].z);
btConvexHullShape.addPoint(_vec3_2,true);
_vec3_3.setX(triangle[2].x);
_vec3_3.setY(triangle[2].y);
_vec3_3.setZ(triangle[2].z);
btConvexHullShape.addPoint(_vec3_3,true);
triangle_mesh.addTriangle(
_vec3_1,
_vec3_2,
_vec3_3,
true
);
}
return btConvexHullShape;
In the process of learning physic based 3d with threejs, I also want to mention the following best practice: when using complex models, create a low poly model that you can push to that converter function instead of the original model, or you will encounter a stack overflow.
For some time, I've been trying to figure out how to do an object selection outline in my game. (So the player can see the object over everything else, on mouse-over)
This is how the result should look:
The solution I would like to use goes like this:
Layer 1: Draw model in regular shading.
Layer 2: Draw a copy in red color, scaled along normals using vertex shader.
Mask: Draw a black/white flat color of the model to use it as a stencil mask for the second layer, to hide insides and show layer 1.
And here comes the problem. I can't really find any good learning materials about masks. Can I subtract the insides from the outline shape? What am I doing wrong?
I can't figure out how to stack my render passes to make the mask work. :(
Here's a jsfiddle demo
renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters)
composer = new THREE.EffectComposer(renderer, renderTarget)
// composer = new THREE.EffectComposer(renderer)
normal = new THREE.RenderPass(scene, camera)
outline = new THREE.RenderPass(outScene, camera)
mask = new THREE.MaskPass(maskScene, camera)
// mask.inverse = true
clearMask = new THREE.ClearMaskPass
copyPass = new THREE.ShaderPass(THREE.CopyShader)
copyPass.renderToScreen = true
composer.addPass(normal)
composer.addPass(outline)
composer.addPass(mask)
composer.addPass(clearMask)
composer.addPass(copyPass)
Also I have no idea whether to use render target or renderer for the source of the composer. :( Should I have the first pass in the composer at all? Why do I need the copy pass? So many questions, I know. But there are just not enough resources to learn from, I've been googling for days.
Thanks for any advice!
Here's a js fiddle with working solution. You're welcome. :)
http://jsfiddle.net/Eskel/g593q/6/
Update with only two render passes (credit to WestLangley):
http://jsfiddle.net/Eskel/g593q/9/
The pieces missing were these:
composer.renderTarget1.stencilBuffer = true
composer.renderTarget2.stencilBuffer = true
outline.clear = false
Now I think I've found a bit simpler solution, from the THREEx library. It pre-scales the mesh so you dont need a realtime shader for it.
http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html
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' );