Search the Community

Showing results for tags 'import'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 51 results

  1. Hello guys I have one issue . I unable to import meshes when i using Class () but everything works except for importing meshes. You can see my code here : class Player { constructor(scene) { this.scene = scene; this._skeleton; BABYLON.SceneLoader.ImportMesh("", "", "skull.babylon", this.scene, function (newMeshes, particleSystems, skeletons) { skull = newMeshes[0]; this._skeleton = skeletons[0]; skull.rotation.y= Math.PI; scene.beginAnimation(skeletons[0], 0, 501, true, 1) this.collider = BABYLON.Mesh.CreateBox("collider_box", .32, scene, false); this.collider.position.y = .151; this.collider.rotation.y = 0; this.collider.ellipsoid = new BABYLON.Vector3(0.155, 1.14, 0.155); this.collider.ellipsoidOffset = new BABYLON.Vector3(0, 1.0, 0); this.collider.isVisible = false; skull.parent= this.collider; }); } get mesh (){ return this.collider; } } Why is this didn't work ? It is becouse babylon-loaders doesn't support Class () or do I do something wrong ? Thank you in advance for your answers
  2. 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.
  3. Please help ;__;

    Please, can someone tell me how to import framework Phaser3 or other framework to Ionic? (for reference, i want to use phaser only) When i simply run html file in browser it works, but in ionic lab i can see white screen
  4. Hi, I am trying to import an animated character from mixamo.com but without success. I am a developer, not a 3D Designer so I don't really understand what happening ^^ I go on mixamo.com, select a character and an animation (walking) I check "in place" animation", export with ".dae" extension, 24 frames/s, uniform key frames reduction, with skin, and finally download the the character (zip), I import the .dae in Blender, then export it with the BabylonJS exporter I go an error in log : can't export because of armature I read I just have to ctrl+A in Blender then scale => indeed, after that, the export is working, but it breaks the animation If I continue, load the .babylon in babylon I see the character loaded, with textures But... animation make absurd things, the character is not "moving in place" but totally go away It is not a direct Babylon problem : the problem is this "ctrl +A > scale" that breaks the animation. My question is simple : after imported the .dae in Blender, what I have to do to export it correctly, with animation, in .babylon format ? My goal is just to load ANY animated character in BabylonJS, ideally, a character moving, jumping, and crouching. That could be another question : how to get many animations from mixamo in a single export ? I understood we then just have to select frame index and play the good animation. So, loading few times the same character for different animation seems not very smart ^^ Thank you for your help
  5. Displaced Shadows

    Hi guys, I recently started with some visual fidelity stuff in my scene and I wanted to add shadows. Now, I load a mesh that I exported from blender and I do this BABYLON.SceneLoader.ImportMesh("", "lib/orteclbvis/themes/defaulttheme/models/","yard.babylon", this.scene, (newMeshes, ParticleSystem, skeletons ) => { newMeshes[0].rotate(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(180), BABYLON.Space.LOCAL); newMeshes[0].position.y = this.getEnvironmentHeight(); newMeshes[0].position.z = 0; newMeshes[0].position.x = 30000; if(this.sceneObjects.sunLight) { var shadowGenerator = new BABYLON.ShadowGenerator(1024*16, this.sceneObjects.sunLight); shadowGenerator.setDarkness(.3); SceneManagerHelper.enableMeshShadowsRecursively( <BABYLON.Mesh[]>newMeshes, shadowGenerator); } }); // recursive shadow enabler method code: static enableMeshShadowsRecursively(meshes : BABYLON.Mesh[], shadowGenerator : BABYLON.ShadowGenerator) { for(var i = 0; i < meshes.length; i++) { var m = meshes[i]; shadowGenerator.getShadowMap().renderList.push(m); m.receiveShadows = true; var childs = m.getChildMeshes(); if(childs && childs.length > 0) { this.enableMeshShadowsRecursively(<BABYLON.Mesh[]>childs, shadowGenerator); } } } } And my shadows are weirdly offset. See attached images. Any idea how that can happen? My scene scale is quiet big (1 babylon unit = 1mm)
  6. This has been bugging me for some time now. I'm trying to recreate an imported mesh(box) using the MeshBuilder and the boundingInfo of the imported model. The issue happens when I start scaling the model(In 3Ds Max). Look at the following example: https://www.babylonjs-playground.com/#070GWA The meshes line up perfectly using the extendSize and centerWorld. But as soon as I start scaling the models, the following happens: https://www.babylonjs-playground.com/#070GWA#1 I tried a few things without any success: https://www.babylonjs-playground.com/#070GWA#2 Can this be done without any matrix magic?
  7. Import MIME type issue

    Hi there, nice to meet you So I have the exact same issue as related in this topic : I understand the problem and the solution. But, I'm currently running my babylon app locally without any HTTP server such as Apache, it's just firefox looking on my computer files. So I'm a little confused : does BabylonJS need a local HTTP server such as WAMP or XAMPP ? Why is that since it's just JavaScript ?
  8. Hey crew. I've run up against trouble trying to move the vertices of an imported mesh. (So far I've tried a .babylon file and .glb.) Here's a Playground example where I've added a randomize-vertex-positions function to the glTF Importer (Boombox) example. Upon loading the scene file, we do this: //Add a "do this once the mesh loads" function to the example: var bb = scene.getMeshByName("BoomBox"); //Get the newly-loaded mesh bb.updateable = true; //Not clear if this does anything var positions = bb.getVerticesData(BABYLON.VertexBuffer.PositionKind); //Copy the mesh's vertex positions into an array var numberOfVertices = positions.length/3; //Randomize the vertex coordinates in the array for(var i = 0; i<numberOfVertices; i++) { positions[i*3] = Math.random()*5; positions[i*3+1] = Math.random()*5; positions[i*3+2] = Math.random()*5; }; var positionFunction = function() { //Create a function for updateMeshPositions to call... bb.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions); //...where we replace the old vertex data with our array }; bb.updateMeshPositions(positionFunction, true); //Call that updateMeshPositions function //And... nothing happens. The boombox remains as it was at import. No change. Any thoughts on what I might be doing wrong?
  9. How would I reference a light imported from Blender? I'm appending a scene with a directional light (sun) as follows: BABYLON.SceneLoader.Append("", "museumScene.babylon", scene); Now, if I add a "fire when fully imported" function to return the array of lights in the scene, I see my sun in the console just as I'd expect: BABYLON.SceneLoader.Append("", "museumScene.babylon", scene, console.log(scene.lights)); However, if I try to reference the sun in the normal way, I only get null: BABYLON.SceneLoader.Append("", "museumScene.babylon", scene, console.log(scene.getLightByName("sun")));
  10. I've just tried to import phaser.js along this MDN document. But it raises errors no matter how the import statement is applied. import Phaser from './phaser.js'; => Uncaught SyntaxError: The requested module does not provide an export named 'default' import {Phaser} from './phaser.js'; => Uncaught SyntaxError: The requested module does not provide an export named 'Phaser' import * as phaser from './phaser.js'; => Uncaught TypeError: Cannot set property 'PIXI' of undefined It seems phaser.js doesn't have the export statements. So, could someone advise me how to add an export statement to phaser.js so that it can be imported by other modules?
  11. Any imported .OBJ have this box collisions. How i can set to the object the correct collisions or use the collision=mesh ? Maybe is there any function to force the correct collision in case are bad loaded or something ¿? . I don't know if there is something wrong on my .OBJ, the plugin or simply babylon v2.6 not accept the collision and just draw a box? Here is the .obj i'm using: https://drive.google.com/file/d/0B8vm3FpJ3vqJT1RlNFIxTldLcU0/view?usp=sharing
  12. I am currently learning Phaser by doing examples. Got into the dragon creature example, I need to import additional add-ons for Phaser. I tried to import these JavaScript files. <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-minimum.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-no-physics.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-split.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/pixi.js"></script> These files are irrelevant for the dragon example. But, interesting error happened, `... is not a constructor`. For example `pixi.js:76 Uncaught TypeError: PIXI.Point is not a constructor`. The error happened when I imported the JavaScript file, even without any other JavaScript codes written. Why is that so? Can some explain what this error meant to me? And why the error happens by importing the JavaScript files? Example of the error. Uncaught TypeError: PIXI.Point is not a constructor at Phaser.Stage.PIXI.DisplayObject (pixi.js:76) at Phaser.Stage.PIXI.DisplayObjectContainer (pixi.js:904) at new Phaser.Stage (phaser-split.js:9193) at Phaser.Game.boot (phaser-split.js:13780) at Phaser.Device._readyCheck (phaser-split.js:40872)
  13. Create React App + BabylonJS

    With the recently added NPM support added in 3.1.0alpha3.4 and some popular React ES6/Typescript starter kits being deprecated in favour of CRA (https://github.com/facebookincubator/create-react-app), I wanted to finally try out importing GUI with CRA + TypeScript. Thought I would put up a repo for anybody interested. Here is the demo: https://brianzinn.github.io/create-react-app-typescript-babylonjs/ Source: https://brianzinn.github.io/create-react-app-typescript-babylonjs/ Source for page with BabylonJS: https://github.com/brianzinn/create-react-app-typescript-babylonjs/blob/master/babylonjs-site/src/containers/home/index.tsx So, it's pretty straightforward from the docs (http://doc.babylonjs.com/overviews/npm_support), but also in practice turned out quite fast to get started.
  14. Hi, I am trying to import BABYLON, but TypeScript is complaining that it 'cannot find namespace BABYLON', As a result, I cannot compile my files with gulp. I have tried everything to get this to work, and have spent the last two days googling, to no avail. I have tried: import * as BABYLON from './babylon'; import * as BABYLON from './babylon.module'; import { BABYLON } from './babylon'; import { BABYLON } from './babylon.module'; import './babylon'; import './babylon.module'; None of them work. I have attached a screenshot of the error I am getting, and my folder setup. Hopefully someone could explain to me how to get this to work, thanks in advance!
  15. Hello, How can I use Babylon's extensions with NPM imports (es6 style)? To resume my problem: 1. I use NPM and Webpack for my project. To use Babylon I've install the node module babylonjs and I import the lib with the line: import BABYLON from 'babylonjs' 2. I would like use too the Sky extension https://doc.babylonjs.com/extensions/sky To do that I try to import it with the line: import {skyMaterial} from 'babylonjs/dist/preview release/materialsLibrary/babylon.skyMaterial.min.js' 3. The compilation is done but in my Browser I've an error : Uncaught ReferenceError: __extends is not defined at eval (webpack-internal:///36:1) at BABYLON (webpack-internal:///36:1) at eval (webpack-internal:///36:1) at Object.<anonymous> (app.js:951) at __webpack_require__ (app.js:660) at fn (app.js:86) at eval (webpack-internal:///29:7) at Object.<anonymous> (app.js:904) at __webpack_require__ (app.js:660) at fn (app.js:86) I've forgot something or it's the wrong way?
  16. 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: foot.babylon
  17. Hi, I was able to make scenes using vanilla javascript and BabylonJS. Now I want to refactor all in Typescript as my background is with C#. Anyone has an example how to import a class from another file including what loader do you use, I'm getting this error on the web browser: Uncaught ReferenceError: define is not defined at game.js This are extract of the files: index.html <!DOCTYPE html> <head> <script src="js/babylon.3.0.js"></script> <script src="js/hand-1.3.7.js"></script> <script src="./scripts/game.js"></script> <style> game.ts /// <reference path=".././js/babylon.3.0.d.ts"/> import { SceneUtils } from './sceneutils'; class Game { private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; private _camera: BABYLON.ArcRotateCamera; private _light: BABYLON.Light; constructor(canvasElement : string) { // Create canvas and engine this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement); this._engine = new BABYLON.Engine(this._canvas, true); } createScene() : void { console.log("Start create scene"); // create a basic BJS Scene object this._scene = new BABYLON.Scene(this._engine); // create a FreeCamera, and set its position to (x:0, y:5, z:-10) //this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene); this._camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 0, BABYLON.Vector3.Zero(), this._scene); this._camera.setPosition(new BABYLON.Vector3(0, 15, -30)); // target the camera to scene origin this._camera.setTarget(BABYLON.Vector3.Zero()); // attach the camera to the canvas this._camera.attachControl(this._canvas, false); // create a basic light, aiming 0,1,0 - meaning, to the sky this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene); // create a built-in "sphere" shape; with 16 segments and diameter of 2 let sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', {segments: 16, diameter: 2}, this._scene); // move the sphere upward 1/2 of its height sphere.position.y = 1; // create a built-in "ground" shape let ground = BABYLON.MeshBuilder.CreateGround('ground1', {width: 6, height: 6, subdivisions: 2}, this._scene); } sceneutils.ts /// <reference path=".././js/babylon.3.0.d.ts"/> export class SceneUtils { constructor(){} public SetSceneBackground(backgroundColor: string, scene): void { scene.clearColor = new BABYLON.Color3(1,0,0); } public GetCurrentBKColor(): string { return '#556789'; } } If I don't use the import declaration in game.ts, I don't get any errors and I can see my scene. However my project will have a lot of classes that I need to import in game.ts and other files. I was playing with require.js but I can't make it work. Thank you very much for your feedback!!!!!
  18. Import file types

    Hi, I'm pretty new to babylon.js and the "3d world" in general. What file types can be imported into babylon.js? I couldn't seem to find a list that specifies this. Thanks for your help
  19. Hi, I'm new to Babylon and try to load my mesh from a remote address. I put it in my aws s3 bucket and public it on aws cloudfront. So it is accessible via http request. Can I stringify .babylon file as json file and feed it to SceneLoader? And load it to my scene via ImportMesh("","", "data:mydatahere", scene, onsuccess, progressCallBack, onerror)? or is there a better way? Thanks, Derek
  20. Import Zip Obj

    Hello, For a test, I download a zip file. I extract files with JSZip. All files are OBJ files. I use babylon.objFileLoader for OBJ files. After extraction, I try to use BABYLON.SceneLoader.ImportMesh with rawData like this : var rawData = "data:" + contentOfFiles; BABYLON.SceneLoader.ImportMesh("", "model.obj", rawData, scene, function(){ console.log("Success"); }, function(){ console.log("PROGRESS"); }); But that's not work :((( I receive this message : importMesh of undefined from undefined version: undefined, exporter version: undefined importMesh has failed JSON parse Someone have an idea ? How can I import mu obj files ? Thanks Loïc
  21. Hi, I'm trying to import meshes with multiple animations (from Blender). Is there any description of correct workflow on how to make Babylon compatible animations in Blender? Single animation works nicely when you just manually fix scaling and rotation problems. But no matter how you append more animations into one Blender file it seems to me that transformations get messed up in export process. I've tried using Action Library and Pose Library, but both strategies produce weird twisting and morphing of the mesh. The result does somewhat resemble the intended animation, but it's hard to say what exactly goes wrong. Of course obvious workaround is to put every animation in separate file but that quickly makes download sizes unpractical (several 100 MBs).
  22. I have two .babylon files. One with meshes and skeletons, but no animation. The other one has skeletons and animation, but no meshes. Turns out BABYLON.SceneLoader.ImportMesh doesn't load the skeletons at all, because there's no mesh in the file. Is there any way to import .babylon file with just skeletons and animation?
  23. I'm currently trying to get my first Phaser project working, fiddled around a whole day trying to get it all set up but since I'm completely new to writing bigger JS projects with modules, I have no idea how any of this works, even after googling and reading a million guides. I want to write TypeScript in VSCode. So first I installed phaser with npm install phaser --save Then I import Phaser in my app.ts with import Phaser = require("phaser-ce"); Did I pick the right syntax out of the 50 different ones? Whatever, this is the one I chose. So, while im coding I now got code completion and type hints working, but after compiling to JS, I now have multiple problems: First of all, the compiler adds code to my main JS file which tries to access a global module or exports object which obviously doesn't exist. Why? Why does it assume this exists? How can I turn this off? No idea. This is what it pastes righto onto line 2 of the main JS file: Object.defineProperty(exports, "__esModule", { value: true }); And since "exports" doesn't exist unless I hack it into the HTML file, it gives me an error. But now the more important question is... how exactly do I import Phaser? As far as I know you can't really import other JS files into another? (At least not in ES5 as far as I know). (Great, after switching my text color to an illegible light gray, forcing me to manually recolor all the text to black, now the text editor here creates a new paragraph instead of a new line everytime I press enter. Whyyyyyyy...........) In order to get code hints I need to import Phaser in my TypeScript file with the import statement, but if I use anything other than "module": "commonjs" in my tsconfig.json It can't find phaser anymore: // tsconfig.json // ... "compilerOptions": { "module": "commonjs", // ... // game.ts import Phaser = require("phaser-ce"); // WORKS // tsconfig.json // ... "compilerOptions": { "module": "anything other than commonjs", // ... // game.ts import * as Phaser from "phaser-ce"; // Can't use same syntax. Why? I don't know. // TypeScriptCompiler error: // Cannot find module 'phaser-ce' But of course commonjs doesn't work in the browser so... I tried instead to load the typings manually by copying the into /node_modules/@types/phaser and then instead of importing Phaser, instead referencing the typings with: /// <reference types="phaser"/> And including phaser.js in my index.htm But since Phaser itself has a bunch of dependencies that it tries to load with require() which of course doesn't exist and even if it did couldn't work, how am I supposed to do this correctly? It just whines about Pixi not being defined and some other stuff. I read http://phaser.io/tutorials/how-to-use-phaser-with-typescript but it never mentions how Pixi etc is supposed to be included and doesn't say anything about require, export, module errors, it just works apparently, but not for me. Which of the 50 different module systems does Phaser use, how does it export itself? RequireJS? AMD? UMD? ES6? ES2015? I have no idea how many different methods there are and how to tell which one is being used. How do I import it correctly? Do I need to manually add ALL *.js files of phaser into the <head> of my index.htm? This is all waaaaay too confusing....., help please Edit: I got a basic version working for now by just scrapping all the import stuff, setting tsconfig.json "module" to "none", adding a ///<reference types="phaser-ce"/> at the top of my game.ts and just including phaser.js in the html file. How it gets it's dependencies I still don't know but at least it works now. I also have no Idea where it gets the typings from, I guess it must be magic.
  24. Latest NPM for BabylonJS 3.0 alpha includes Canvas2D! I am having difficulty importing Canvas2D into my project. I have no troubles at all with regular BabylonJS only with importing Canvas2D. // I can import the main babylonJS in a variety of ways and they all work. // explicit imports import { Sound, Mesh, ShadowGenerator, ... } from 'babylonjs' // default and named import BABYLON, { Sound, Mesh, ShadowGenerator, ... } from 'babylonjs' // tried also named default only and * After that I am importing the Canvas2D and have tried various ways. // named default import import Canvas2D from 'babylonjs/babylon.canvas2d' // as side-effect import from 'babylonjs/babylon.canvas2d' // explicit imports import { ScreenSpaceCanvas2D } from 'babylonjs/babylon.canvas2d' The error I am getting is "TypeError: Cannot read property 'Effect' of undefined". So, basically line 1 of babylon.canvas2d, where BABYLON is undefined. Removing those will fail later (ie: BABYLON.Vector2 being undefined). I was reading on the ES6 spec that there is no guarantee of ordering only that the imports will all be run before code is executed. I looked through other NPMs where I can import add on modules separately and they have extra declarations in package.json (ie: "jsnext:main": "index", "module": index") and they are exporting explicitly in index.js the other modules from the main project. I tried that and a few other things, but am unable to get Canvas2D to import unfortunately. If anybody has successfully imported BabylonJS without creating their own bundle any tips would be appreciated. I'm using webpack and babel (https://babeljs.io/).
  25. Does PIXI work with Vue.js ?

    Hi ! I'm a beginner with both pixi.js and vue.js and I can't manage to import pixi.js in my components. I tried different ways : - Import pixi.js in index.html via the CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script> - Import pixi.js directly in my component (like in the example, it's working perfectly with TweenMax) import PIXI from 'pixi.js' import TweenMax from 'gsap' export default { name: 'home', mounted () { console.log('Mounted home, ready to PIXI') console.log(PIXI) } } The problem is that in my component, 'PIXI' is always undefined. Do you know if it's possible or if it's just me missing something. Thank you in advance.