Search the Community
Showing results for tags 'import'.
-
I'm trying to se my interaction mode to true so I can set my sprite to follow my cursor. I've managed to do this before i Added ES6 and webpack. Here is a code example: import * as PIXI from 'pixi.js'; // App with width and height of the page const app = new PIXI.Application({ width: 500, height: 500, resolution: 1, backgroundColor: 0xAAAAAA, }); document.body.appendChild(app.view); let player = new PIXI.Sprite.from('assets/dirt.png'); player.anchor.set(0.5); player.x = app.view.width / 2; player.y = app.view.height / 2; app.stage.addChild(player); const movePlayer = function (e) { let pos = e.data.global; player.x = pos.x; player.y = pos.y; } app.stage.interactive = true; app.stage.on("pointermove", movePlayer); Console screenshot: https://i.imgur.com/w4fAcb9.png I think that the problem may be related to webpack somehow ;(
-
import { UnderlineText } from './underlineText.js'; let Application = PIXI.Application, loader = PIXI.Loader.shared, resources = PIXI.loader.resources, Sprite = PIXI.Sprite, text = PIXI.Text; let app = new Application({ width: window.innerWidth, height: window.innerHeight, antialias: true, transparent: false, resolution: 1, autoDensity: true }); document.body.appendChild(app.view); let underLine = new UnderlineText(null, [100, 385], null, null); app.stage.addChild(underLine); //app.loader.onError.add((error) => console.error(error)); Above is my index.js file. I have the module called UnderLineText. It doesn't work properly as it shows underline but not the text itself. It does count the width of the text, thus displaying the line underneath but I don't know how to make the text visible. Any ideas what I did wrong? P.S. I'm using PIXI js and I'm a newbie. class UnderlineText extends PIXI.Graphics { constructor(text, points, textFontSize, textColor) { super(); let t = this.textFontSize = textFontSize || 12; let s = this.lineWidth = 1; let c = this.textColor = textColor || "0xFFFFFF"; let ut = this.text = text || "Ողջույն"; let textStyle = { fontFamily: 'Arian AMU', fill: c, fontSize: t } let newText = new PIXI.Text(ut, textStyle); this.points = points; points[0] = newText.position.x; points[1]= newText.position.y; this.lineStyle(s, c); this.moveTo(points[0], points[1] + 13); this.lineTo(points[0] + newText.width, points[1] + 13); } } export { UnderlineText };
-
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).
-
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.
-
Hi everybody! I am a newbie in Babylon; please excuse me for minor mistakes. I am trying to import multiple objects in .glb format defining their position,rotation and scale. On the inspector, it seems like I am able to do that. I can see the meshes on scene explorer but in the scene I am not able to see although I set the camera position close to the mesh position. In addition, I realized another problem. While the root module has the correct rotation values; submeshes don't. They are assigned also quaternion rotation value. You can find my piece of code attached. I would appreciate if you could tell me where I am doing wrong. Thank you! gltfimport.zip
-
I'm having an issue with collision. While messing around with terrain, I wanted to make a house, for said terrain. I made a little hexagonal house and exported a STL (I use sketchup web). It imported just fine, but I can't get any collision. My test site is here : (giv0.gitlab.io/Fpoy). I use gitlab because I love the Gitlab web ide and github has nothing like it. Thanks for any help, but if possible, I also need to size it down. I could probably do that on my own, but any efficient was is helpful. Ignore the terrain you spawn on, I was testing height maps and mixmaps and textures. Thanks in advance! -
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.
-
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
-
Hello forum! I'm still new to babylon, but I want to go overboard and create a first-person-shooter with an AI and case-based reasoning (maybe with JADE and myCBR). But that's just the intro, now to the important part: For this goal I don't want to create everything by myself. I thought I could easily import a character model and a scene that fits as environment for a FPS. For test purposes I tried to import some meshes - skull.babylon and dude.babylon: https://www.babylonjs-playground.com/#JUKXQD (skull.babylon) https://can't find dude.babylon anymore I did it by searching in the example tab, opening the playground and downloading via Zip-Button. Is there another way to look for scenes and meshes to import (except demos)? And maybe a better way to save them. Bla bla bla here is my problem: As you can see in the picture, the dude-character doesn't has his texture. That happens to me for most textures I want to put on meshes. How can I add a texture properly to a mesh? Or why are some textures not shown right? Another Example that isn't working with some links: var ground = new BABYLON.Mesh.CreateGround("ground", 50, 50, 1, scene); ground.material = new BABYLON.StandardMaterial("groundMat", scene); ground.material.diffuseTexture = new BABYLON.Texture("https://previews.123rf.com/images/mansum007/mansum0071511/mansum007151100626/47766920-hei%C3%9Fe-lava-muster-illustration-hintergrund.jpg"); This is the primary the code I downloaded, i just repeated the import function for dude.babylon. https://playground.babylonjs.com/#VKVHP6 As always, i thank you in advance for your solutions or advices.
-
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?
-
Hi everyone, I'm quite new to babylon JS and need a small bump into the right direction ? Hoping not to fall for the XY Problem here's what I want to do: Going from a model created for Unity, that use special shaders, I want to export these to a WebGL solution. That way I can display these models on any supported browser (even mobile since Unity WebGL is not supported by most) My Approach: Create model in Unity3D with custom Shaders - done Export model to glTF, adding a custom extension to the material that holds all relevant information (specular maps, UV mappings, custom material properties that exceed the standard shaders) - done, made a special extension for the Unity exporter that handles my materials Import glTF to babylon and read out the custom material properties stored in the material extension - this is where I'm stuck Adapt the special Unity shader to work with the WebGL environment of babylon JS Display the model with custom shader and settings stored in glTF file Can someone tell me how to read custom extensions from GLTF within babylon JS? From the documentation I know that for now only the standard extensions are supported (KHR_Materials, draco compression, MSFT_lod, ...). Where do I have to start if I want to add a custom plugin or behavior for the glTF importer that understands my custom material extension? Thanks for your help :)
-
Hi, has been a while however I started a new project using BabylonJS, where I'm importing a model from Blender into a scene, now for some reason I cannot get it to cast a shadow. I added a cube next to it and it does cast a shadow, I'm also adding both the cube and the model to the renderList of the shadow generator.. Any ideas or suggestions what I could try or why it wouldn't work?
-
I want to import my .babylon model with animation into my code but the model didn't appear and if it does appear, the animation won't work. This is the code var human = new BABYLON.Mesh.CreateBox("human", 1.0, scene); human.isVisible = false; human.position.y = 0; human.position.x = 0; BABYLON.SceneLoader.ImportMesh("", "models/Vanquish/Human/", "Humans.babylon", scene, function(newMeshes, particleSystems, skeletons){ skeleton = skeletons[0]; skeletonMesh = newMeshes[0]; scene.beginAnimation(skeleton, 0, 20, false, 2.5); for(i = 0; i < newMeshes.length; i++){ newMeshes.parent = human; } });
-
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
-
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. -
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
-
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)
-
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? -
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 ?
-
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?
-
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")));
-
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)
-
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!
-
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?
-
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
