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
Your code looks basically right, assuming you also have a camera and light source. Here is a playground entry.
And, for posterity, here is that code:
var scene = new BABYLON.Scene(engine);
//Create a light
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);
//Create an Arc Rotate Camera - aimed negative z this time
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 210, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
//Creation of a repeated textured material
var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
materialPlane.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);
materialPlane.specularColor = new BABYLON.Color3(0, 0, 0);
materialPlane.backFaceCulling = false;//Allways show the front and the back of an element
//Creation of a plane
var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
plane.rotation.x = Math.PI / 2;
plane.material = materialPlane;
I started with one of their demos, then hacked away most of the stuff to get the minimal example. I left in the backFaceCulling = false (as otherwise the image is only visible from one direction), and added in your specularColor setting.
An alternative approach is to replace the diffuseTexture with emissiveTexture:
materialPlane.emissiveTexture = new BABYLON.Texture("textures/grass.jpg", scene);
Then you can comment out the light, and it will still be visible. (In fact, if you leave the light pointing at it, it will be overexposed.)
(I would recommend starting a new question for your keyboard control and collision detection questions. Or work through the babylon samples and tutorial videos.)
var playerMaterial = new BABYLON.StandardMaterial("ground", scene);
playerMaterial.diffuseTexture=new BABYLON.Texture("./yourImage.png", scene);
playerMaterial.bumpTexture=new BABYLON.Texture("./yourImage.png", scene);
i use that for parallax i help maybe
Related
I create a 3D scene using Qt3D, there is an orthographic camera and a plane in the scene, I want the camera to capture the plane just right. The problem is, when I call QTransform::setScale3D() to scale up the plane along with Z-axis, increasing from 1, when the value acoss 2, part of the image goes black suddenly. After a lot of testing, I ensure that the position and rotation of the plane and the camera all not changed.
Some codes are as follows:
rootEntity = new Qt3DCore::QEntity;
// create a plane
plane = new Qt3DCore::QEntity(rootEntity);
// mesh
auto planeMesh = new Qt3DExtras::QPlaneMesh;
planeMesh->setWidth(1.0f);
planeMesh->setHeight(1.0f);
// transform
transform = new Qt3DCore::QTransform;
transform->setTranslation(QVector3D(0, 0, 0));
transform->setRotation(QQuaternion::fromEulerAngles(QVector3D(0, 0, 0)));
transform->setScale3D(QVector3D(1, 1, 2));
//transform->setScale3D(QVector3D(m_planeWidth, 1, m_planeHeight));
// material
//auto mat = new Qt3DExtras::QPhongMaterial;
texMat = new Qt3DExtras::QTextureMaterial;
// add component
plane->addComponent(planeMesh);
plane->addComponent(transform);
plane->addComponent(texMat);
// configure camera
camera()->setPosition(QVector3D(0.0f, 1.0f, 0.0f));
//camera()->rotate(QQuaternion::fromEulerAngles(QVector3D(-90, 0, 0)));
camera()->transform()->setRotation(QQuaternion::fromEulerAngles(QVector3D(-90, 0, 0)));
//camera()->setViewCenter(QVector3D(0.0f, 0.0f, 0.0f));
camera()->lens()->setOrthographicProjection(
m_planeWidth / 2, // left
m_planeWidth / 2, // right
m_planeHeight / 2, // bottom
m_planeHeight / 2, // top
0.3f, // nearPlane
1000.0f); // farPlane
Screenshots:
When the plane's scale-Z is 1:
When the plane's scale-Z goes to 2:
Any helpful discussion is welcome. Thanks in advance.
OK, I set the parameter left/right/bottom/top of the orthographic camera incorrectly. The left and bottom should be negative, but I set them all positive. I found my mistake when I printed the default values of those 6 properties of the orthographic camera, they are -0.5, 0.5, -0.5, 0.5. It's a little embarrassed.
I have a issue with UrhoSharp. I want to load a Indoor Map image with 2D texture. I create a scene with Octree(Urho Class)with Box Shape and it's comes in a 3d view.
So, how can I achieve the same in 2D view any suggestion or demo will be so helpful.
Thanks in advance.
You can use staticsprite2d to load your 2d texture and view from orthographic camera.
Refer https://developer.xamarin.com/api/type/Urho.Urho2D.StaticSprite2D/
//Create sprite image
var floorNode = _scene.CreateChild();
floorNode.Position = new Vector3(0, 0, 0.0f);
StaticSprite2D staticSprite = floorNode.CreateComponent<StaticSprite2D>();
staticSprite.Color = Color.White;
staticSprite.BlendMode = BlendMode.Alpha;
var sprite = ResourceCache.GetSprite2D("floorplan_image.jpg");
staticSprite.Sprite = sprite;
//Create a camera
Node cameraNode = _scene.CreateChild("camera");
var camera = cameraNode.CreateComponent<Camera>();
camera.Orthographic = true;
cameraNode.Position = (new Vector3(0.0f, 0.0f, -10.0f));
camera.OrthoSize = (float)Graphics.Height * PixelSize;
I want to rotate an object in 3D space, so that the front side always looks to the mouse.
function onMouseMove(event){
mouse3D = projector.unprojectVector(
new THREE.Vector3( event.clientX, event.clientY, 0.5 ), camera );
}
var angle = ??;
box.rotation.y = angle;
First is the unprojection correct ? And secondly how to calculate the angle ? Is it just tan(mouseX/mouseY) ? I'm trying to get more into the 3D mathematics, so a little bit explanation would be nice.
Thanks in advance.
// Direction we are already facing (without rotation)
var forward = new Vector3(0,0,-1);
// Direction we want to be facing (towards mouse pointer)
var target = new Vector3().sub(mouse3D, box.position).normalize();
// Axis and angle of rotation
var axis = new Vector3().cross(forward, target);
var sinAngle = axis.length(); // |u x v| = |u|*|v|*sin(a)
var cosAngle = forward.dot(target); // u . v = |u|*|v|*cos(a)
var angle = Math.atan2(sinAngle, cosAngle); // atan2(sin(a),cos(a)) = a
axis.normalize();
// Overwrite rotation
box.rotation.makeRotationAxis(axis, angle);
Alternatively, you could use quaternions:
// Overwrite rotation
box.useQuaternion = true;
box.quaternion.setFromAxisAngle(axis, angle);
I'm trying to rescale uploaded jpeg in asp.net
So I go:
Image original = Image.FromStream(myPostedFile.InputStream);
int w=original.Width, h=original.Height;
using(Graphics g = Graphics.FromImage(original))
{
g.ScaleTransform(0.5f, 0.5f); ... // e.g.
using (Bitmap done = new Bitmap(w, h, g))
{
done.Save( Server.MapPath(saveas), ImageFormat.Jpeg );
//saves blank black, though with correct width and height
}
}
this saves a virgin black jpeg whatever file i give it.
Though if i take input image stream immediately into done bitmap, it does recompress and save it fine, like:
Image original = Image.FromStream(myPostedFile.InputStream);
using (Bitmap done = new Bitmap(original))
{
done.Save( Server.MapPath(saveas), ImageFormat.Jpeg );
}
Do i have to make some magic with g?
upd:
i tried:
Image original = Image.FromStream(fstream);
int w=original.Width, h=original.Height;
using(Bitmap b = new Bitmap(original)) //also tried new Bitmap(w,h)
using (Graphics g = Graphics.FromImage(b))
{
g.DrawImage(original, 0, 0, w, h); //also tried g.DrawImage(b, 0, 0, w, h)
using (Bitmap done = new Bitmap(w, h, g))
{
done.Save( Server.MapPath(saveas), ImageFormat.Jpeg );
}
}
same story - pure black of correct dimensions
Since you didn't fill the area with background of image you're reading from inputStream,you can only get a blank image that way.
Instead of using scaling the image,you can use Fill background into a resized area.
Check this out:
Image img = Image.FromFile(Server.MapPath("a.png"));
int w = img.Width;
int h = img.Height;
//Create an empty bitmap with scaled size,here half
Bitmap bmp = new Bitmap(w / 2, h / 2);
//Create graphics object to draw
Graphics g = Graphics.FromImage(bmp);
//You can also use SmoothingMode,CompositingMode and CompositingQuality
//of Graphics object to preserve saving options for new image.
//Create drawing area with a rectangle
Rectangle drect = new Rectangle(0, 0, bmp.Width, bmp.Height);
//Draw image into your rectangle area
g.DrawImage(img, drect);
//Save your new image
bmp.Save(Server.MapPath("a2.jpg"), ImageFormat.Jpeg);
Hope this helps
Myra
Try this:
- get the Image from your stream
- create a new Bitmap of the correct size
- get the Graphics object from the new bitmap, not the original one
- call g.DrawImage(original, 0, 0, done.Width, done.Height)
Edit:
The problem is this section:
using (Bitmap done = new Bitmap(w, h, g))
{
done.Save( Server.MapPath(saveas), ImageFormat.Jpeg );
}
You're creating a black bitmap, with the resolution specified by g. You're not actually creating a bitmap with any image data coming from g. In fact, I don't think the Graphics object actually stores image data that you can really pass around, it just allows you to manipulate some object that stores the image data.
Try replacing that with b.Save(...)
There is something I am missing. Say I have the following code:
private Bitmap source = new Bitmap (some_stream);
Bitmap bmp = new Bitmap(100,100);
Rectangle newRect = new Rectangle(0, 0, bmp.Width, bmp.Height);
Rectangle toZoom= new Rectangle(0, 0, 10, 10);
Graphics g = Graphics.FromImage(bmp);
g.DrawImage(source, newRect, toZoom, GraphicsUnit.Pixel);
My goal is to zoom-in the 10x10 pixels on the top left corner of the source picture. After I created the graphics object g and called DrawImage: the requested rectangle (toZoom) will be copied to bmp, or will it be displayed on the screen? I am a bit confused, can somebody please clarify?
You code will only give you an in-memory bitmap (which won't automatically be displayed to the screen). A simple way to display this would be to put a 100 x 100 PictureBox on your form, and set its Image property like this (using the Bitmap from your code above):
pictureBox1.Image = bmp;
Also, you'll want some using blocks in your code:
using (private Bitmap source = new Bitmap (some_stream))
{
Bitmap bmp = new Bitmap(100,100);
Rectangle newRect = new Rectangle(0, 0, bmp.Width, bmp.Height);
Rectangle toZoom= new Rectangle(0, 0, 10, 10);
using (Graphics g = Graphics.FromImage(bmp))
{
g.DrawImage(source, newRect, toZoom, GraphicsUnit.Pixel);
}
pictureBox1.Image = bmp;
}
Note that there is no using block with bmp - this is because you're setting it as the PictureBox's Image property. The using block automatically calls an object's Dispose method at the end of the block's scope, which you don't want to do since it will still be in use.
it will be copied and not displayed.