• Content Count

  • Joined

  • Last visited

Posts posted by WhoAteDaCake

  1. I have a mesh, that I would like to colour in a way, that the colour fades out near the edges.

    The sandbox: https://codesandbox.io/s/zw63povrz4

    My current approach uses canvas, to first draw the color texture and then drawing an opacity layer that will fade the colour out.

    Expected resulthttps://i.imgur.com/YUCicAf.png

    My questions:

    1. Is there an easier method to do this.
    2. In my current approach
      1. The texture does not fit on the mesh, which means the mesh does not show any fading out, as can be seen in canvas on the side.
      2. How can that be fixed?



  2. Code:


    So if you try to load a scene asynchronously, do something else, start the engine using that scene, The scene will just show an empty space.

    However, if you take a look at the code above, go to

    async function createScene(config) {
      const { textureModifier } = config;
      const { height, width, color } = config;
      const scene = new Scene(config.engine);
      await importScene(config.mesh, scene);

    And comment 'importScene' line, the go to

      async function run() {
        // await importScene(config.mesh, scene.internal);
        engine.runRenderLoop(() => scene.render());
        // engine.runRenderLoop(() => console.log('test'));

    And uncomment 'importScene' here, it works fine.

    I've included a .babylon file below.


  3. I have a .babylon file that I've read.And I need to load the mesh into the scene. What would be the best way to do it? I can't use HTTP requests, it has to import from that object. 

    I've tried: 

    const loader = BABYLON.SceneLoader.GetPluginForExtension('babylon');
    loader.load(scene, data);

    But it gave an error:


    importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse



  4. function addSphere(scene, { x, y, z }: Object, diameter: number = 0.05, color = new BABYLON.Color3(0, 0, 0)) {
      const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter }, scene);
      const material = new BABYLON.StandardMaterial("texture1", scene);
      material.diffuseColor =  color;
      sphere.position = new BABYLON.Vector3(x, y, z);
      sphere.material = material;
    const positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    const zeroCoord = {
        x: positions[0],
        y: positions[1],
        z: positions[2],
     addSphere(scene, zeroCoord, 1);


    As you can see in the code, I am just trying to get vertices of the foot. and the placing a sphere on the first vertice of the foot.

    But for some reason, as can be seen in demo, the sphere is added somewhere not even remotely close of the foot.

    You can download the mesh here.

    Why is this happening ? I've been trying to fix this for two days now, but I can't seem to do it.


    Edit: I am using babylonjs exported for blender.

    Edit2: Added playground url  https://www.babylonjs-playground.com/#EEKFSK#2

  5. // @flow
    // $FlowIgnore
    import * as BABYLON from 'babylonjs';
    import shortid from 'shortid';
    type Color = {
      r: number,
      b: number,
      g: number,
    export default class Scene {
      _scene: BABYLON.Scene;
      _camera: BABYLON.ArcRotateCamera;
      _light: BABYLON.HemisphericLight;
      constructor(engine: BABYLON.Engine, canvas: HTMLElement) {
        const scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color4(0.5, 0.8, 0.6, 0.8);
        const camera = new BABYLON.ArcRotateCamera('Camera', 1.5 * Math.PI, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, false);
        const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 1), scene);
        light.intensity = 0.5;
        const sphereMaterial = new BABYLON.StandardMaterial('texture1', scene);
        sphereMaterial.alpha = 1;
        // sphereMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
        sphereMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0.5);
        const boxCfg = {
          size: 5,
          updatable: true,
        const sphere = BABYLON.MeshBuilder.CreateBox('sphere1', boxCfg, scene);
        sphere.material = sphereMaterial;
        sphere.position.y = 5;
        this._scene = scene;
        this._camera = camera;
        this._light = light;
      render = () => {
      dispose = () => {
    import { Engine } from 'babylonjs';
    import Scene from './Scene';
    export default class RenderEngine {
      constructor(container) {
        this._container = container;
      animate() {
        window.addEventListener('resize', this._engine.resize);
      createScene() {
        this._scene = new Scene(this._engine, this._canvas);
      render = () => {
        this._canvas = document.createElement('canvas');
        this._engine = new Engine(this._canvas, false);
      reRender = () => {
    const root = document.getElementById('root');
    const engine = new RenderEngine(root);
    if (module.hot) {
      module.hot.accept('./RenderEngine', () => {

    I am currently learning babylon.js and with my set up I have hot reloading, so when any files are changed, engine.reRender() will be called.

    To test it out I change up color of sphereMaterial. It creates new canvas, but for some reason it still shows the old colors...

    Is there any way to clear out the scene and engine to load the webgl with new configuration?

    Thank you.