Babylon

Bidirectional Interaction Between Vue 3 and Babylon.js (Part 2)

Overview In the following article, I created a program for interaction between Vue 3 and Babylon.js. This time, as an advanced version of the above, the mesh to be passed to the scene is specified from Vue. You can check the content at the following link. (There are some parts where meshes are not properly deleted. This is planned to be fixed in the future.) https://youtu.be/-dyQp-QX42I Demo Site https://nakamura196.github.io/nuxt3-babylonjs/10 ...

March 29, 2023 · Updated: March 29, 2023 · 1 min · Nakamura

Loading .glb Files with Nuxt3 x babylon.js

Overview I encountered an error when attempting to load a .glb file in Nuxt3 x babylon.js, so this is a memo of how I resolved it. Error Details The following error occurred: Unable to load from ./models/test.glb: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse Solution The issue was resolved by additionally installing the following package: npm install @babylonjs/loaders As a result, I was able to display the model with the following JavaScript file: ...

March 29, 2023 · Updated: March 29, 2023 · 1 min · Nakamura

Bidirectional Interaction Between Vue 3 and Babylon.js

Overview I prototyped a program for bidirectional interaction between Vue 3 and Babylon.js. You can check the content at the following link. https://youtube.com/shorts/BIdj-3T2_z8 Demo Site https://nakamura196.github.io/nuxt3-babylonjs/9 Source Code https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/9/index.vue Summary We hope this serves as a useful reference.

March 29, 2023 · Updated: March 29, 2023 · 1 min · Nakamura

[Babylon.js x Vue] Passing Click Events to Vue

Overview I investigated how to get the name of a mesh clicked in Babylon.js, as shown below. I referenced the following tutorial. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2#passing-data-from-babylonjs-to-vue-using-callbacks The demo page is as follows. https://nakamura196.github.io/nuxt3-babylonjs/8/ The source code for the page is as follows. https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/8/index.vue Implementation In the following section, a callback variable is passed to createScene. The name fpsCallback might need to be revised. https://github.com/nakamura196/nuxt3-babylonjs/blob/5c33d2e6bcd1681df17f3f12fea3cd68fc645157/components/Scene8.vue#L10-L13 Then, in the createScene function, the result of onPointerDown is passed. ...

February 17, 2023 · Updated: February 17, 2023 · 1 min · Nakamura

Trying the Babylon.js Vue Tutorial with Nuxt 3

Overview Previously, I created a repository combining Babylon.js and Nuxt 3. Meanwhile, a tutorial for using Vue with Babylon.js has been published at the following link. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue This time, I implemented the following tutorial from the above site using Nuxt 3. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2 The demo site is as follows. https://nakamura196.github.io/nuxt3-babylonjs/ The source code is as follows. https://github.com/nakamura196/nuxt3-babylonjs Tutorial Passing data from BabylonJS to Vue using callbacks This is the most verbose, but the safest, most extensible, and most reusable approach. Basically, you create methods in the BabylonJS scene code and export them accordingly, allowing you to import them in Vue components and call each one. ...

February 17, 2023 · Updated: February 17, 2023 · 2 min · Nakamura

Using Babylon.js with Nuxt3 and Vuetify Together

I had the opportunity to use Babylon.js combined with Nuxt3 and Vuetify, so this is a memo of my experience. The site I built can be viewed at the following URL. https://nakamura196.github.io/nuxt3-babylonjs/ The source code is available below. https://github.com/nakamura196/nuxt3-babylonjs I hope this is helpful when developing an app with this combination.

February 2, 2023 · Updated: February 2, 2023 · 1 min · Nakamura