• Content Count

  • Joined

  • Last visited

About freetoplay

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. freetoplay

    Hair Growth Question

    I have seen games where users can allow their character's hair to grow. I am curious as if you can do something like that using a standard material with a color map texture in Babylon? Or is there another approach?
  2. Is there a way to take a screenshot of a mesh only and leave the background of the image transparent?
  3. I have a mesh that rotates around the y axis after some pointer events. How can I reset the rotation to the initial position (the position that you see when you first load the playground)? Here is the playground code:
  4. freetoplay

    Positioning Loading Screen

    Is there a way to change the position of the loading screen to static? Right now, when the loading screen appears after the page load, it is positioned outside of the layout, probably due to it being fixed/absolute position, instead of staying within the container. Is there a way to override the positioning in this case?
  5. freetoplay

    Optimize scene

    I would like some tips on how to optimize my scene. I am trying to create an app that has at least 3 scenes at even given time. Right now, I am using the Vue framework that has a shared components of scenes that looks like this: export default Vue.extend({ name: "SceneComponent", data: function() { return { engine: null, scene: null }; }, props: { onSceneMount: { type: Function, required: true }, }, mounted() { this.setupScene(); }, methods: { setupScene() { const canvas = this.$refs.canvas as HTMLCanvasElement; this.engine = new BABYLON.Engine(canvas, true, null, false); const scene = new BABYLON.Scene(this.engine); this.scene = scene; this.$nextTick(() => { window.addEventListener("resize", this.handleResize); }); this.handleResize(); this.onSceneMount({ scene: this.scene, engine: this.engine, canvas: this.$refs.canvas }); }, handlResize() { if (this.engine) { this.engine.resize(); } } }, beforeDestroy() { window.removeEventListener("resize", this.handleResize); } }); The HTML template looks like this: <canvas ref="canvas"></canvas> Then currently all of my onSceneMount function for my scenes look like this: onSceneMount(data: ISceneArgs) { const { canvas, scene, engine } = data; const { fileLocation, fileName } = this.modelInfo; scene.clearColor = new BABYLON.Color4(0, 0, 0, 1); const main = async function() { await BABYLON.SceneLoader.AppendAsync(fileLocation, fileName, scene); BABYLON.SceneOptimizer.OptimizeAsync(scene); scene.freezeActiveMeshes(); scene.createDefaultCameraOrLight(true); scene.lights[0].intensity = 1.5; scene.activeCamera.useFramingBehavior = true; scene.activeCamera.alpha += Math.PI; scene.activeCamera.fov = 0.6; const framingBehavior = scene.activeCamera.getBehaviorByName("Framing"); framingBehavior.framingTime = 0; framingBehavior.elevationReturnTime = -1; const worldExtends = scene.getWorldExtends(); framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max); const meshes = scene.meshes; for (let i = 1; i < meshes.length; i++) { if (meshes[i].material) { meshes[i].material.freeze(); } } let mesh: BABYLON.AbstractMesh; let xStart = 0; const handlePointerUp = function(e: PointerEvent) { canvas.removeEventListener("pointermove", handlePointerMove); }; const handlePointerLeave = function(e: PointerEvent) { canvas.removeEventListener("pointermove", handlePointerMove); }; const handlePointerMove = function(e: PointerEvent) { mesh.rotation.y = -0.01 * (e.clientX - xStart); xStart = e.clientX; }; const handlePointerDown = function(e: PointerEvent) { mesh = scene.getMeshByID("__root__"); xStart = e.clientX; canvas.addEventListener("pointermove", handlePointerMove); }; canvas.addEventListener("pointerdown", handlePointerDown); canvas.addEventListener("pointerup", handlePointerUp); canvas.addEventListener("pointerleave", handlePointerLeave); engine.runRenderLoop(() => { if (scene) { scene.render(); } }); }; main(); } Rendering one scene works great, but working with multiple scenes has been tough. I have attached a screenshot of what I want to do below.
  6. freetoplay

    Multiple Scenes Approach

    For scenes that uses similar meshes, are the meshes shared here as well?
  7. freetoplay

    Multiple Scenes Approach

    Yep, I saw that, but do you know if there is an advantage of this approach of using one render loop over my current approach, where every scene has their own engine loop, would it speed up performance? Nope, I use Vue, but I can most likely translate React code to Vue code without too many changes.
  8. freetoplay

    Multiple Scenes Approach

    Hi everyone, I have a question about the best approach to my problem. I am working on a project that requires multiple scenes on one HTML page. My current approach is to create a web component that contains a HTML canvas, an Babylon engine, and a reference to the current Babylon scene. Then I create a N number of those components on the web page. But I am not sure if this is the best approach, since each scene has their own engines and it seems fairly slow. So I am wondering what would be a better approach to my problem?
  9. freetoplay

    Position of Mesh

    I tried using it with Vue, but there appears to be some conflicts because it uses its own custom DOM element.
  10. freetoplay

    Position of Mesh

    I realized that the BabylonJS viewer can do this pretty easily. With the exception of the duck (which seems to have its own set position), the above code seems to do exactly what I want it to do, given a mesh that doesn't have its own position set. However, it seems like Viewer doesn't support any frameworks yet. Do you think that the Viewer is a better alternative than writing my own viewer, even if it means waiting for framework support?
  11. freetoplay

    Position of Mesh

    Thanks again! I have been trying to play with those values, but so far, I have not been able to get it fully facing the front. I am using the math and code from the previous "camera" thread: Do you have any additional pointers?
  12. freetoplay

    Position of Mesh

    When I use the Asset Manager to import my meshes, it seems to be positioned at a weird angle vs when I import my meshes via append (see screenshots). The first screenshot shows what happens when I use the Asset Manager, how do I make it look like the 2nd screenshot?
  13. freetoplay

    Camera question

    This seems to have worked perfectly, thank you so much!
  14. freetoplay

    Camera question

    Do you know where I can find the math required to have the mesh to be within the camera frustum? The thing is I want to display different models, without the need to manually position the camera for each one of them. Not sure if that is possible.
  15. freetoplay

    Camera question

    Is there a way to adjust the camera to assure that the mesh is always within the canvas, when using AssetManager to load the mesh? I have been having issues such as this: