Lary

Hi Fellow Friend, Is there any good way to construct water effects using BabylonJS? I used the official water material, it seems a bit blue...like ocean. I saw this demo and was quite impressed. see here . Can you share any demos that reach to this effects using BJS? Thanks!

Greeeeet! Thank you so sosososoos much Sable! It really saved me! I tested the values, and it is correct!!!!!

Thank you for correction. Wingnut. and all BJSers

var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.ArcRotateCamera("arcRotateCamera", 0, 0, 15, new BABYLON.Vector3(0, 0, 0), scene) camera.beta = Math.PI / 3; // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7; // Our built-in 'sphere' shape. Params: name, subdivs, size, scene var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); // Move the sphere upward 1/2 its height sphere.position.y = 1; // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene); //Camera rotation Detection let oriAlpha = 0; let oriBeta = 0; let oriDirAlpha = 0; let oriDirBeta = 0; let turnAlpha = 0; let turnBeta = 0; let infoAlpha = []; let infoBeta = []; // // let camera = scene.activeCamera; let timeStart = null; scene.onPointerObservable.add(() => { oriAlpha = turnAlpha = camera.alpha; // console.log(oriAlpha) oriBeta = turnBeta = camera.beta; oriDirAlpha = 0; oriDirBeta = 0; infoAlpha = []; infoBeta = []; timeStart = new Date().getTime(); }, 1) scene.onPointerObservable.add(() => { infoAlpha.push({ dir: (camera.alpha - turnAlpha) > 0 ? 1 : -1, angle: camera.alpha - turnAlpha }) if (infoAlpha.length === 1) { if (infoAlpha[0].angle === 0) { console.log("click") } else { var direction = infoAlpha[0].dir < 0 ? "Right：" : "Left:" console.log(direction + Math.abs(infoAlpha[0].angle * 180 / Math.PI).toFixed(0) + "°") } } else { var turns = infoAlpha.length; var turnInfo = ""; for (var i = 0; i < turns; i++) { var direction = infoAlpha[i].dir < 0 ? "Right：" : "Left:"; turnInfo += (direction + Math.abs(infoAlpha[i].angle * 180 / Math.PI).toFixed(0) + "°" + "\n") } console.log(turnInfo) } console.log("Duration:" + (new Date().getTime() - timeStart) / 1000 + "秒"); }, 2) camera.onViewMatrixChangedObservable.add(() => { let alphaDif = camera.alpha - oriAlpha; let betaDif = camera.beta - oriBeta; // console.log(alphaDif) oriAlpha = camera.alpha; oriBeta = camera.beta; if (alphaDif) { let dir = alphaDif > 0 ? 1 : -1; if (!oriDirAlpha) { oriDirAlpha = dir; // console.log(ariDirAlpha) } else { // console.log("turn:"+turnAlpha) if (oriDirAlpha !== dir) { infoAlpha.push({ dir: oriDirAlpha, angle: camera.alpha - turnAlpha }) oriDirAlpha = dir; turnAlpha = camera.alpha; } } } }) return scene; }; Hi all, I paste my code here, coz I wonder if what happens that I can't save a PG for your information. @Wingnut

Thanks Sebavan, yes, putting the inertia to 0 could help. But the rotation would be so slow and would affect the UE, So I'm trying to calculate the inertia angle, it maybe something like camera inertia * pointerMove length. aha, just my imagination..Hope @Deltakosh and @Wingnut could support me any idea~

Hi there, Is there a way for me to get the ArcRotateCamera's rotation angle led by its inertia? I have pointerDown and pointerUp events to calculate how many angles I rotates during pointerEvent, but if I make a quick slide, the camera doesn't stop immediately after pointerUp, it will rotate for some angles due to inertia. Thanks!

Hi friend, Is there any way to detect user panning and zomming the model with arcRotateCamera on both desktop and mobile? and also when the user put one finger down and pan the model continuously from right to left, and left to right. I need to track all the actions... Thaanks!!

Hi @Wingnut and @Deltakosh, sorry to inform you late, finally I found a solution, by deleting the "canvas.tabindex = 1", then it works, though I don't know why..anyway, thanks!

Hi Wingnut, the method by setting the canvas.focus({preventScroll:true}) seems not workable....Sorry about that, anyway thanks again. But I tried replacing the babylonjs version (babylon.3.1.1.min.js.) that has the scrolling problem with that not having the problem (Babylon.js engine (v3.1-alpha)), it works well. So I can partially confirm that there's difference in both versions that affecting the canvas focus. I need to look into it, I would be much appreciate if you could supply some information.

Hi Wingnut, you're faster than the flash！ Will try that, thanks first!

@Wingnut@Deltakosh SOS~~Please help!

I'm sorry for making the title that long....and also my content will be... Recently I'm quite tortured by a tricky problem, mainly on iOS mobile, things are like this... I inserted a Babylonjs project into a third-party homepage through iframe tags. As you know, the home page has header, footer, another content and the iframe part. When I scroll to the iframe part, and want to interact with the canvas, as long as I tap the canvas, the page jumps to the bottom immediately. Strange! I scroll back, and continue to pinch, rotate the canvas, it goes normally (do not touch other part, only the canvas after jumping). As long as I have tapped the UI, and then tap the canvas, history will happen again. I tried other projects (also build with Babylonjs)， some will not have this problem. So I made a detailed comparison, excluding the potential problem raised by html ,css. The main difference might be the version of Babylon.js. The ones that have jumping problems use the babylon.3.1.1.min VERSION , while those don't have problem, use this Version , it's compressed and I forgot the version now. Can anybody tell which version the latter is? and what's difference between them, especially about issues like canvas focus, tapping event on iOS... The test link that having the problem is this , the visit speed might be slow out of China. But the problem will be like what I mentioned above. I guess it's something about canvas.focus(). but not sure..I know you guys are more experienced and smarter. I would really appreciate!!!!!!!! 5e2233d9ce8a56b9700997ac243d5838 (1).mp4

Hi @Wingnut, thanks for the information,@JCPalmer 's camera works in my scene. Great! However, the scene in both view seems kinda tortured. What I'm using is scene.createDefaultVRExperience({createDeviceOrientationCamera:false}); which will create a webVR camera and non-webVR camera, and also a button enabling webVR access. I want this mode ,and keep both cameras. So by default, it is arcRotateCamera, when webVR triggers, the view has to be side by side with no round borders as above show. I wonder if there's a way? or I just need to correct a parameter? reference link here, in this demo, if I enter webvr mode there, it's side by side with no borders, but if I download the code and play at local, there has round corners, I don't know why....

Hi there, Now I have a basic webVR demo from PG, when I enter into VR mode, there always be round frames/corners (below pic in red circle )at each view. Is there a way to remove them, and make the view on both side in full screen? Thanks!

Thank you so much RaananW, it works!!! But the particle color seems bit different under the two modes.

Hi all, How I can make particles (in red color) visible with white background (scene.clearColor = new BABYLON.Color4(1,1,1,1))? Please find attached picture for details. Thanks in advance.

I cited pep.js and babylon.js on my project. Since this month, all is ok. and all in a sudden, touch action fails on Android wechat......

Hi fellow friends, Recently I'm having problem with touch action on Android's weChat. (I'm not sure if you use weChat there out of China, it's a chatting tool similar to Facebook.) Meshes can neither be rotated or zoomed in/out on weChat or its based browser on Android devices. This never happens on iOS. Then I made a judgement when loading canvas on different devices, on Android, I change touch action into "manipulation", while on iOS, it remains "none" as before. It seems working by this method, meshes can be rotated, but can't be zoomed in/out still. I know weChat had did something behind, but I don't know how this happens ,and what can be taken to deal with it. You can visit this test link to check the problem. (need to run on wechat of Android, on iOS all is ok). It really worried me, and I racked my brains to solve this. If anyone has had the same experience and can help me out. It's really urgent. Many thanks!!!!!!!!

Hi fellows, Does anyone has mastered both babylonJS and Krpano (a panorama frame) ? I want to put a Babylon model into krpano, and control it using BJS, which I think is a good way to present both technologies. Someone has wrote a plugin on krpano site with ThreeJS. but I want to use BJS instead, coz I love BJS. So I wonder if anyone here has given it a shot before?

@Wingnut @Arte @RaananW Hi friends, new link : https://www.babylonjs-playground.com/#5YCUIQ#1 hope it works....

Peculiar! Did I do wrong when saving the scene? I just pasted my code into PG, and click "save" to submit my scene, then it generate a link, i copy it here.... How could this happen....

@Arte @Wingnut https://www.babylonjs-playground.com/#PTG55H Check this updated link please.

Hi Wingnut, sorry for the late reply. I appreciate a lot that you're still watching my topic. As an non-English speaker as well as newbie in BJS, I regret to say that your answers seem quite expert and I can only catch some easy points. I run into a problem again and made a PG for my project, check it out please. As you see, there are 3 green meshes on the white rectangle, each time I move one green mesh and intersect with the others , one or maybe two at the same time, the current moving mesh turns Red, while the meshed being intersected remain green; when the moving mesh returns to normal position after intersection, its color returns green again. but it only takes effect when I intersect currentMesh with the second mesh. I don't know why~~ Can you give me some idea please?

Aha, that's all right. Arte, you just made my topic as lifeful as others.