• Content count

  • Joined

  • Last visited

  1. @Samuel Girardin THANK YOU SO MUCH!!!! Turns out I had to follow this tutorial. I just needed to apply the changes using Object apply. I am new to blender, so I didn't really know this....
  2. 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); Demo 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
  3. Thank you @JCPalmer That is exactly what I ended up doing
  4. I am importing a generated foot mesh. After importing it I strip the jpg that's overlaid. Is it possible to modify color in parts of the foot. Let's say I'd want to make toes red, or half of the foot blue, can i do it after model is imported? Or do I have to overlay another mesh on top and color it ?
  5. Oh unfortunately no, it's a work in progress, so I have yet to deploy it anywhere :/ Edit: as @Deltakosh asked, i have deployed it
  6. @Deltakosh https://bitbucket.org/ajokub/footfalls-3d/, I've made few changes since i've posted this. I am currently just reloading whole webpage on change. You should comment out footData() from index.js. If you try to comment out one of the nodes inside Scene.js it reloads the canvas, but still has 9 nodes instead of 8
  7. // @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.setTarget(BABYLON.Vector3.Zero()); 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 = () => { this._scene.render(); } dispose = () => { this._scene.dispose(); } } import { Engine } from 'babylonjs'; import Scene from './Scene'; export default class RenderEngine { constructor(container) { this._container = container; } animate() { this._engine.runRenderLoop(this._scene.render); window.addEventListener('resize', this._engine.resize); } createScene() { this._scene = new Scene(this._engine, this._canvas); } render = () => { this._canvas = document.createElement('canvas'); this._container.appendChild(this._canvas); this._engine = new Engine(this._canvas, false); this.createScene(); this.animate(); } reRender = () => { this._engine.dispose(); this._container.removeChild(this._canvas); this.render(); } } const root = document.getElementById('root'); const engine = new RenderEngine(root); engine.render(); if (module.hot) { module.hot.accept('./RenderEngine', () => { engine.reRender(); }); } 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.