Sign in to follow this  
PhilT

TypeError: Cannot set property renderingGroupId of [object Object] which has only a getter

Recommended Posts

I'm having trouble using `createInstance` when importing BabylonJS as an ES6 module.
 

// <script src='main.js' type='module'></script>

import {Engine, Scene, ArcRotateCamera, Vector3,
  MeshBuilder, Color3, HemisphericLight} from './node_modules/babylonjs/es6.js'

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('renderCanvas')
  const engine = new Engine(canvas, true)

  const scene = new Scene(engine)
  const camera = new ArcRotateCamera('camera', 1, 0.8, 10,
    new Vector3(0, 0, 0))
  camera.setPosition(new Vector3(0, 0, -100))
  scene.activeCamera.attachControl(canvas)

  const light = new HemisphericLight('', new Vector3(0, 1, 0))
  light.diffuse = new Color3(1, 1, 1)
  light.groundColor = new Color3(0.2, 0.2, 0.2)

  let mesh = MeshBuilder.CreateSphere('', {})
  mesh.createInstance('')
})

If I run the previous code I get the following error:

TypeError: Cannot set property renderingGroupId of [object Object] which has only a getter
es6.js:17243
    at InstancedMesh.AbstractMesh [as constructor] (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:17243:37)
    at new InstancedMesh (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:55221:33)
    at Mesh.createInstance (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:29095:21)
    at HTMLDocument.document.addEventListener (c:\Users\phil\code\sandbox\babylonjs-test\main.js:19:9)

 

Importing the library in a script tag works fine:

// <script src="https://cdn.babylonjs.com/babylon.js"></script>
// <script src='main.js'></script>

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('renderCanvas')
  const engine = new BABYLON.Engine(canvas, true)

  const scene = new BABYLON.Scene(engine)
  const camera = new BABYLON.ArcRotateCamera('camera', 1, 0.8, 10,
    new BABYLON.Vector3(0, 0, 0))
  camera.setPosition(new BABYLON.Vector3(0, 0, -100))
  scene.activeCamera.attachControl(canvas)

  const light = new BABYLON.HemisphericLight('', new BABYLON.Vector3(0, 1, 0))
  light.diffuse = new BABYLON.Color3(1, 1, 1)
  light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2)

  let mesh = BABYLON.MeshBuilder.CreateSphere('', {})
  mesh.createInstance('')
})

 

I'd like to avoid bundlers and transpilers while developing the code and just package it up later on. 

Share this post


Link to post
Share on other sites

The funny thing is that this is the correct behavior. Now I wonder why it works with vaniall js :)

The InstancedMesh class has renderingGroupId set to read only:

// in typescript:
        public get renderingGroupId(): number {
            return this._sourceMesh.renderingGroupId;
        }

//in javascript

        Object.defineProperty(InstancedMesh.prototype, "renderingGroupId", {
            get: function () {
                return this._sourceMesh.renderingGroupId;
            },
            enumerable: true,
            configurable: true
        });

I will look into that. @Deltakosh, maybe the getter here can be altered? just adding a noop setter  would solve this issue.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.