this._gl.getContextAttributes is not a function

Questions
1

使用nuxt框架初始化babylonjs出现错误
image

<script>
import * as BABYLON from 'babylonjs';
import { mapState, mapMutations, mapActions, mapGetters, Store } from 'vuex';
export default {
  components: {},
  data() {
    return {
      engine: null
    };
  },
  computed: {},
  methods: {},
  mounted() {
    // Get the canvas DOM element
    var canvas = document.getElementById('renderCanvas');
    // Load the 3D engine
    var engine = new BABYLON.Engine(canvas, false, { preserveDrawingBuffer: true, stencil: true });
    console.log(engine);
    // CreateScene function that creates and return the scene
    var createScene = function() {
      // Create a basic BJS Scene object
      var scene = new BABYLON.Scene(engine);
      // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
      var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
      // Target the camera to scene origin
      camera.setTarget(BABYLON.Vector3.Zero());
      // Attach the camera to the canvas
      camera.attachControl(canvas, false);
      // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
      var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
      // Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
      var sphere = BABYLON.Mesh.CreateSphere(
        'sphere1',
        16,
        2,
        scene,
        false,
        BABYLON.Mesh.FRONTSIDE
      );
      // Move the sphere upward 1/2 of its height
      sphere.position.y = 1;
      // Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
      var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
      // Return the created scene
      return scene;
    };
    // call the createScene function
    var scene = createScene();
    // run the render loop
    engine.runRenderLoop(function() {
      scene.render();
    });
    // the canvas/window resize event handler
    window.addEventListener('resize', function() {
      engine.resize();
    });
  }
};
</script>

<style scoped>
.contain {
  width: 100%;
  height: 100%;
}
#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}
</style>
2

can you show full sample with the element ‘el’ you are attaching to, where the <canvas id=“renderCanvas” /> element would be loaded from?
Also, often just refs are used <canvas ref=“renderCanvas” /> and then in your mounted(), you can do this.$refs[‘renderCanvas’].

3

<template>

<div class=“contain”>

<div id=“renderCanvas”></div>

</div>

</template>

4

the DOM element you render BablyonJS on need to be a canvas.

<template>

<div class=“contain”>

<canvas id=“renderCanvas”></canvas>

</div>

</template>
1 Like