Jmonkey: Make RigidBodyControl React to Gravity - jmonkeyengine

I am trying my best to make an object fall, and so far I can't even come close. Here is the code i am trying.
BulletAppState bulletAppState = new BulletAppState();
cubemesh = new Box(1f,1f,1f);
Geometry something = new Geometry("cube", cubemesh);
Material bronze = new Material(assetManager,
"Common/MatDefs/Light/Lighting.j3md");
something.setLocalTranslation(0,1,0);
bronze.setTexture("DiffuseMap", assetManager.loadTexture("Textures/bronze.jpg"));
something.setMaterial(bronze);
rootNode.attachChild(something);
RigidBodyControl control = new RigidBodyControl(10f);
Vector3f direction = new Vector3f(0,-9.81f,0);
something.addControl(control);
//all the random lines i've tried
stateManager.attach(bulletAppState);
control.setGravity(direction);
bulletAppState.getPhysicsSpace().setGravity(direction);
rootNode.attachChild(something);
bulletAppState.getPhysicsSpace().add(control);
Help will be appreciated.

The physics in your example do work for me. But using your material, i can't see anything because there's no light.
Try attaching a Light:
AmbientLight light = new AmbientLight();
light.setColor(ColorRGBA.White);
rootNode.addLight(light);
Trying random lines won't get you very far. I recommend reading the jME wiki so you understand what these lines actually do. Here's a minimalistic example which uses a Material that doesn't need light:
public void simpleInitApp() {
BulletAppState bulletAppState = new BulletAppState();
stateManager.attach(bulletAppState);
Geometry something = new Geometry("cube", new Box(1,1,1));
something.setMaterial( new Material(assetManager, "Common/MatDefs/Misc/ShowNormals.j3md") );
something.setLocalTranslation(0,2,0);
something.addControl( new RigidBodyControl(10f) );
rootNode.attachChild(something);
bulletAppState.getPhysicsSpace().add(something);
}
This example displays a colourful falling cube. If this doesn't work for you, there might be something wrong with your jME version or its setup
(I'm using jMonkeyEngine 3.1-alpha1).

Related

How can I get camera world direction with webxr?

I would like to use camera.getWorldDirection() and access to the head-mounted display directions. I was able to do this with the previous webVR API. When I use the new HelioWebXRPolyfill.js from THREE, I am not able to receive current positions.
According to the WebXR Device API, this should be done using the XRViewerPose object.
This feature is only working using HTTPS.
It seems that calling renderer.xr.getCamera() isn't fully copying the various camera member properties that camera.getWorldDirection() is expecting to find. I'm not sure where this problem originates (perhaps the polyfill?), but you can get around it by computing direction yourself :
let xrCamera = this.renderer.xr.getCamera(sceneCamera)
let e = xrCamera.matrixWorld.elements
let direction = new THREE.Vector3(-e[8], -e[9], -e[10]).normalize()
I came up with a simple fix. Just parent a box to the camera and use the camera box in place of the camera.
camera.add( camerabox );
This doesn't work:
var direction = new THREE.Vector3();
camera.getWorldDirection( direction );
This DOES work:
var direction = new THREE.Vector3();
camerabox.getWorldDirection( direction );
global variable
var cameraVector = new THREE.Vector3(); //define once and reuse it!
in your render loop
let xrCamera = renderer.xr.getCamera(camera);
xrCamera.getWorldDirection(cameraVector);
//heading vector for webXR camera now within cameraVector

Three.js secret: I cannot run any example

I'm beginner in WebGL
I follow the examples and I always get error.
Why my example does not work.
While it works for the others with similar code?
(function() {
// Set basic some variables.
var documentWidth = document.body.clientWidth,
documentHeight = document.body.clientHeight,
viewAngle = 45,
drawNear = 0.1,
drawFar = 10000,
aspectRatio = documentWidth / documentHeight,
renderer = new THREE.WebGLRenderer(),
scene = new THREE.Scene();
... follow jsfiddle
you did not include three.js. https://jsfiddle.net/2pha/naudwtaL/1/
https://rawgit.com/mrdoob/three.js/master/build/three.min.js
The older design of jsfiddle made it easy to include some external libraries by having a combobox for you to select from.
The new design has moved these options as seen in the below picture.
While you can add three.js via the combobox selector thing, as of now you can only include three.js r54 which is quite old, so you are probably better off including it the way I did in the fiddle I linked to.

How to fix tiny holes in the Mesh after subtract operation with Three.CSG

I have a Box Mesh where I subtract another Box with Three.CSG to create a wall with a window.
After doing so, there are tiny holes in the Mesh alongside the cut. They are not visible alle the time, but show up when moving around.
How to close these holes?
This is part of the code how I am creating the Mesh:
var wallBsp = new ThreeBSP( myWallMesh );
var subMesh = new THREE.Mesh( mygeo );
var subBsp = new ThreeBSP( subMesh );
var subtract_bsp = wall_bsp.subtract( subBsp );
var result = subtract_bsp.toMesh();
result.material.shading = THREE.FlatShading;
result.geometry.computeVertexNormals();
Update
I have created a jsfiddle, but it is difficult to reproduce the error, I couldnt make it visible there: http://jsfiddle.net/L0rdzbej/23/
However, you can see the full application here.
Like #gaitat suggested, geometry.mergeVertices() does not look like it changes anything for me. Chandler Prall hinted at the source where precisionPoints, which is a variable inside the mergeVertices function, could solve this. Depending on the scale of the scene its value should be lower or negative, but I had no success so far.

Outline object (normal scale + stencil mask) three.js

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

Lights look different in Three.js than 3DS Max

I am using the r65 of Three.js. When I light a scene in 3ds max I then export it as a an obj to load in Three.js. I take a second step and export the model to FBX so I can extract the lighting and load in Three.js. I am noticing that the lights are not as "strong" in Three.js, almost like a multipier should be added to the intensity possibly? Could it be that I am missing some property on the light in Three.js?
Here is what the scene looks like in 3ds Max
Here is what it looks like when it's imported to Three.js
After playing around with settings, after turning on the gammaOutput and gammaInput
So it looks a little better with the gamma output on, but still not what I was hoping it would look like from 3ds max. I created a fiddle but due to the Access-Control-Allow-Origin errors I couldn't figure out how to get the fiddle to work, but hopefully the code there will help see what I am trying to do.
// scene
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.gammaOutput = true;
renderer.gammaInput = true;
container.appendChild(renderer.domElement);
loader = new THREE.OBJMTLLoader();
var modelFilePath = "http://goo.gl/ecHpSf?gdriveurl";
var materialFilePath = "http://goo.gl/bZWZEA?gdriveurl";
loader.load(modelFilePath, materialFilePath, function (object) {
materials.push.apply(materials, object.children);
scene.add(object);
object.position.set(0, 0, 0);
});
// setup lighting
var light = new THREE.PointLight(0xffffff, 1);
light.position = new THREE.Vector3(32.2274, 54.6139, 38.2715);
light.distance = 103.74199676513672;
light.intensity = 1;
scene.add(light);
Can anyone suggest anything that might help, it seems like I am close. Thanks!
Do check out material specular component. R65 changed a bit specular component
computation: #4636 (WebGLRenderer: Specular component implementation)
I've got similar problem implementing A3dsViewer 3ds converter to the three.js.
Try to export/save 3ds file and do conversion with the A3dsViewer to the three.js
maybe such workflow will help.
Additionally maybe such settings can help:
renderer.gammaInput = false; // do false
renderer.gammaOutput = true;
After further experimenting I have found that 3ds max has values set for far attenuation start/end. As far as I can tell, there is no way to export this value into Three.js since far attenuation [End] == Distance. Doing a search, it looks like I am limited by the values the light source takes in Three.js. I will follow this up with another post on SO.

Resources