Babylon.js
Babylon.js: a complete JavaScript framework for building 3D games with HTML 5 and WebGL
Babylon.js
When I try to add an image to a 3d sphere using Babylon.js, I get the error Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.
This is how I've written my code. I've followed the tutorial here and everything has worked prefectly until I try to change the textures.
//Creation of spheres
var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 6.0, scene);
var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 7.0, scene);
var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 8.0, scene);
//Positioning the meshes
sphere1.position.x = 10;
sphere3.position.x = -10;
//Textures
var sphere1texture = new BABYLON.StandardMaterial("sphere1texture", scene);
var sphere2texture = new BABYLON.StandardMaterial("sphere2texture", scene);
var sphere3texture = new BABYLON.StandardMaterial("sphere3texture", scene);
sphere1texture.alpha = 0.75
sphere2texture.diffuseTexture = new BABYLON.Texture("./texture1.jpg", scene);
sphere2 (the one I tried to load the image to) doesn't show up in the program, but everything else works fine.
Also, I tried downloading the source code for the lesson and the same thing happened, so I'm guessing its something to do with my browser (Google Chrome).
Source: (StackOverflow)
I'm trying to make a house configurator, the problem I have is that is not working properly on Chrome (latest version) for Mac. You can see a preview version of the configurator in: http://www.wilawara.com/wec360demo/
And it works fine on Windows (Chrome & Firefox).
In my country it is not very easy to access Mac equipment so I asked a friend (in other country) to try it in mac but the drag n drop function does not work, you can check the mistakes here: https://www.youtube.com/playlist?list=PLnzWqhLuiuDCtWe0fhr86lqLPcf2-Jn4Z
Can someone tell me what I should do to make it work properly on any desktop (or Chrome for Mac min.)?
Also can somebody try it on Safari to see if there is the same problem?
Thank you very much to all.
Source: (StackOverflow)
I can't understand algorithm of creation of an array of "mBones" in babylon.js.
Help to understand.
All that I managed to find, it:
Skeleton.prototype.prepare = function() {
if (!this._isDirty) {
return;
}
if (!this._transformMatrices || this._transformMatrices.length !== 16 * (this.bones.length + 1)) {
this._transformMatrices = new Float32Array(16 * (this.bones.length + 1));
}
for (var index = 0; index < this.bones.length; index++) {
var bone = this.bones[index];
var parentBone = bone.getParent();
if (parentBone) {
bone.getLocalMatrix().multiplyToRef(parentBone.getWorldMatrix(), bone.getWorldMatrix());
} else {
bone.getWorldMatrix().copyFrom(bone.getLocalMatrix());
}
bone.getInvertedAbsoluteTransform().multiplyToArray(bone.getWorldMatrix(), this._transformMatrices, index * 16);
}
this._identity.copyToArray(this._transformMatrices, this.bones.length * 16);
this._isDirty = false;
this._scene._activeBones += this.bones.length;
};
Skeleton.prototype.getAnimatables = function() {
if (!this._animatables || this._animatables.length !== this.bones.length) {
this._animatables = [];
for (var index = 0; index < this.bones.length; index++) {
this._animatables.push(this.bones[index]);
}
}
return this._animatables;
};
This code to me is absolutely unclear, and I am simpler than the help
Source: (StackOverflow)
I'm working on a webgl RTS game called density wars, but am not sure how to include babylonjs in my build.
In my main game file I do this, and babyon is present in my code
require('babylonjs');
However at buildtime I get this:
nikos$ webpack
Hash: 88edca3955a1ee0ca7b8
Version: webpack 1.12.0
Time: 2701ms
Asset Size Chunks Chunk Names
density-wars.js 848 kB 0 [emitted] main
density-wars.js.map 972 kB 0 [emitted] main
[0] multi main 28 bytes {0} [built]
+ 6 hidden modules
ERROR in /Users/nikos/PhpstormProjects/Density-Wars/lib/game.ts:10:25
File '/Users/nikos/PhpstormProjects/Density-Wars/babylonjs.d.ts' is not a module.
main class:
require('../style.css');
import BABYLON = require('babylonjs');
class Game {
currentUser:User;
remoteUsers:Array<User>//other players in the game, start with just 1 for now for simplicity
numCores:number;
canvas:HTMLCanvasElement;
engine:BABYLON.Engine;
webpack.config:
module.exports = {
context: __dirname + "/lib",
entry: {
main: [
"./game.ts"
]
},
output: {
path: __dirname + "/dist",
filename: "density-wars.js"
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
}
}
package.json
"devDependencies": {
"awesome-typescript-loader": "^0.12.0",
"babylonjs": "^2.1.2",
"css-loader": "^0.16.0",
"html-webpack-plugin": "^1.6.0",
"loader": "^0.1.6",
"style-loader": "^0.12.3",
"typescript": "^1.5.3",
"webpack": "^1.11.0"
}
Source: (StackOverflow)
I'm pretty fine working with the .babylon file format.
Exporter which was developed for Blender 3D editor works perfectly and if to load the exported model using the next code:
// won't write the full code
// because it was fetched from the playground and it's very standard and works
BABYLON.SceneLoader.Load("", "fileName.babylon", engine, function (newScene) {
...
works well and WebGL renderer in browser shows my model.
But, what if I don't want to load models as static files which must be saved in public folder of HTTP-server ( IIS, Apache, lighttpd, nginx, etc.. ).
For e.g. I wanna load a .babylon file from the user's side or to secure the access to .babylon files at my backend.
All right, let's watch the situation, if I provide some kind of Uploader (using File API from browser) in my web-application, from which user will be able to load 3D-models from their PC or other devices.
I'm trying to load models like this way:
File uploading ( change event of input-file ) which works well:
function handleFiles( event ) {
var uploader = event.srcElement || event.currentTarget;
var files = uploader.files;
var reader = new FileReader();
reader.onload = function( event ) {
var data = JSON.parse( event.target.result );
loadCustomMesh( data );
};
// passing only single mesh because of testing purpose
reader.readAsText( files[ 0 ] );
}
Handling geometry and adding to scene:
function loadCustomMesh( data ) {
var mesh = new BABYLON.Mesh( Math.random().toString(), scene );
mesh.setVerticesData( BABYLON.VertexBuffer.PositionKind, data.meshes[ 0 ].positions, true );
mesh.setVerticesData( BABYLON.VertexBuffer.NormalKind, data.meshes[ 0 ].normals, true );
mesh.setIndices( data.meshes[ 0 ].indices );
mesh.position = new BABYLON.Vector3( 0, 0, 0 );
...
It works FINE! But!!! Without materials...
I've found that multimaterial is here from the uploaded data:
But if to use the next code:
mesh.material = data.multiMaterials[ 0 ];
Which is valid exactly for this sample, it throws the next error:
Uncaught TypeError: t.needAlphaBlending is not a function
And I don't even know what to do next, any ideas?
Source: (StackOverflow)
When I get the picked mesh with
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
how can I get the Coordinates / Point on the Texture from that.
Thanks for any help,
Lothar
Source: (StackOverflow)
Is it possible to catch a DOM Element Event, change some properties (e.g. x,y Position clicked) and send it to another DOM Element. So whatever listen to the Events of the 2nd Element can catch them (in my case fabricjs)?
My real Problem is that i use a fabricjs canvas as dynamic texture on a babylonjs mesh. When a user clicks or moves the mouse over the mesh i can calculate the Position in the texture. Now I want to send an Event with the calculated Position to the fabricjs canvas. So e.g. elements are moved.
(Hope that makes sense)
thanks,
Lothar
Source: (StackOverflow)
I have a scene created in blender and consists of different meshes. Each mesh has child-of constraint which i have added. When this scene is exported to .babylon file and used, there is no parent-child constraint preserved. Do I add this constraint separately or is there any way to use this constraint from blender ?
If I have to add the constraint separately then how ?
Source: (StackOverflow)
If I have 3 coordinates, how do I create a plane in Babylon.js with this 3 Vectors as corners?
I know I can create a plane like this:
var plane = BABYLON.Mesh.CreatePlane("plane", 500.0, scene);
and there is a function like
var plane1 = BABYLON.Plane.FromPoints(new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0,50,0), new BABYLON.Vector3(0,0,50));
But how do I get plane1 into the scene?
Source: (StackOverflow)
I am currently attempting to trace the path of an object in BabylonJS.
To do this I would like to draw a line between the existing location and the previous location.
The closest I've been able to come is a cube.
var plane = BABYLON.Mesh.CreatePlane("Plane", 50, scene);
Here is a link to one of the tutorials, but none of them talk about lines.
Does anyone know how to draw a line using BabylonJS?
Source: (StackOverflow)
I am working with the planetary textures from this site. They are all in rectangular form.
However, in my BabylonJS application, textures are expected to be like this.
I have tried setting the coordinates mode, but it doesn't seem to do anything.
// These didn't have an effect
material.diffuseTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;
material.diffuseTexture.coordinatesMode = BABYLON.Texture.EXPLICIT_MODE;
material.diffuseTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;
material.diffuseTexture.coordinatesMode = BABYLON.Texture.PLANAR_MODE;
material.diffuseTexture.coordinatesMode = BABYLON.Texture.CUBIC_MODE;
material.diffuseTexture.coordinatesMode = BABYLON.Texture.PROJECTION_MODE;
material.diffuseTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
Is there a way to convert between these two kinds of textures? Alternatively, are their planet textures like the bottom.
Source: (StackOverflow)
I've been screwing around with this collision response far to long now. I thought i'd ask you guys for some guidance.
http://jsbin.com/qoyuciti/1
Edit link: http://jsbin.com/qoyuciti/1/edit?html (just know that you can't use the movement keys in jsbin edit mode (as far as i know))
This JSBin shows what i have at the moment. I can move around and when i hit the box i won't go trough and i glide of the box. There are two problems:
- Gliding left, all goes well, gliding right it starts "hopping";
- Sometimes after colliding for like 20 seconds the sphere goes trough the box.. I think this might have to do something with the "hopping" i'm experiencing when gliding right.
A quick explanation of my approach
User starts walking, as soon as i intersect with the box i start testing for intersects in a 180 degree cone in front of the sphere (the direction the user is heading). As soon as it finds an empty spot it will put the player there.
If anyone has a better approach please let me know. As i'm explaining my code it seems like this could go more efficient but let me know :)
Thanks in advance!
Source: (StackOverflow)
I have an issue with blender scene exporter to babylon.js, exported scene meshes do not have vertices property - and I could not recreate mesh in code.
What I receive is ( for simple cube - default scene in blender ):
id: "Cube"
indices: [0, 1, 2, 3, 4, 5, 6, 7, 5, 0, 5, 4, 4, 3, 2, 6, 2, 3, 6, 0, 2, 7, 3, 5, 0, 6, 5, 1, 0, 4, 1, 4, 2, 7,…]
isEnabled: true
isVisible: true
materialId: "Material"
name: "Cube"
normals: [0.5773, -0.5773, -0.5773, -0.5773, -0.5773, -0.5773, -0.5773, -0.5773, 0.5773, -0.5773, 0.5773,…]
position: [0, 0, 0]
positions: [1, -1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1, 1, 1, -1, 1, -1, 1, 1, 1, 1]
receiveShadows: false
rotation: [0, 0, 0]
scaling: [1, 1, 1]
subMeshes: [{materialIndex:0, verticesStart:0, verticesCount:8, indexStart:0, indexCount:36}]
useFlatShading: false
As far as I know I should get indices ( which I get ), and vertices ( there is no such property )
Am I missing something?
I'm using mesh loader from this article: click me
Also, when I use monkey.babylon from article I got proper object, so there is possibly something wrong with exporting ( maybe? ).
Source: (StackOverflow)
I am trying to load .babylon file. But it doesn't load any thing, the page is blank.
I was using the following links:
- Import a 3d scene into babylonJS
- How to load Babylon file produced with blender
The sample files provided by the second link didn't work on my machine. Then I found that they need to be hosted on a server. After uploading the files on dropbox.com they started working but my file is still not working.
The code on the link:
BABYLON.SceneLoader.Load("", "scene.babylon", engine, function (newScene) {
I just changed it to:
BABYLON.SceneLoader.Load("", "myscene.babylon", engine, function (newScene) {
The error in the browser's console is:
Uncaught TypeError: Cannot read property '0' of undefined babylon.js:1
BABYLON.Vector3.FromArray babylon.js:1
(anonymous function) babylon.js:11
request.onreadystatechange babylon.js:1
Additional Information:
myscene.babylon is exported from blender using Babylon Exporter available on GitHub official link.
It only contains a cube and a plane.
Source: (StackOverflow)
I am new to Babylonjs and i want to display/show image using BabylonJs and also i want to move the image using keyboard(like left arrow key, right arrow key, up arrow key, and down arrow key) with collision detection and i also want to disable all mouse events .
I have wrote below code for showing image but i think that is not right way..
var playerMaterial = new BABYLON.StandardMaterial("ground", scene);
playerMaterial.diffuseTexture = new BABYLON.Texture("/images/mail.png", scene);
playerMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
player.material = playerMaterial;
player.position.y = 1;
player.position.x = -84;
player.size = 20;
Can someone help me how to do (if you can share the source code that may help even better)?
Thanks
Raviranjan
Source: (StackOverflow)