NuxtJS + VueJS 2 + BabylonJS

Bugs
1

Hi everyone! can you help with the integration of Babylon.js in Nuxt app?) I created a simple page with this code. Haven’t console errors, but the image doesn’t appear on a page. canvas is just blank and white
I treid to follow this Getting Started - Chapter 1 - First Scene | Babylon.js Documentation

nuxt config js

{src: '~plugins/babylon.js', srr: false}

plugins/babylon.js:

import * as BABYLON from 'babylonjs';
import Vue from 'vue';
Vue.use(BABYLON);

in Vue file i get this code:

mounted() {
		this.$nextTick(() => {
				this.createScene();
			}
		);
	},
	methods: {
		createScene() {
	  this.canvas = document.getElementById('renderCanvas');
	  this.engine = new BABYLON.Engine(this.canvas, true);
	  const scene = new BABYLON.Scene(this.engine);
	  const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
	  camera.attachControl(this.canvas, true);
	  const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
	  const box = BABYLON.MeshBuilder.CreateBox("box", {width:10, height: 10, depth: 10}, scene);
	  // return scene;
		}
	}

and pug part:

div.d-item
  no-ssr
    canvas#renderCanvas
2

so, this was easy)) after 2 hours I founded that I just need to call

scene.render()

and then the scene has appeared. but only background)) maybe there is another command for box viz?)

3

so, all code is:

in Vue file:

mounted() {
		this.$nextTick(() => {
				const scene = this.createScene();
			}
		);
	},
	methods: {
		createScene() {
			this.canvas = document.getElementById('renderCanvas');
			this.engine = new BABYLON.Engine(this.canvas);
			let scene = new BABYLON.Scene(this.engine);
			let camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
			camera.setTarget(new BABYLON.Vector3.Zero());
			camera.attachControl(this.canvas, false);
			let light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
			let sphere = new BABYLON.Mesh.CreateSphere('sphere1', 16, 1, scene, false, BABYLON.Mesh.FRONTSIDE);
			sphere.position.y = 1;
			let ground = new BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
			this.engine.runRenderLoop(function() {
				scene.render();
			});
		}
	}
1 Like