3D - A Painting in a Frame (Difficulty: 2)
CreatiCode last edited by creaticodeta2-mail
- Initializing 3D scenes
- Using boxes
- Updating texture with shared file
- Updating textures
- Updating scale
- Using rectangle tubes
- 3D text
- Camera configuration
In this tutorial, you will create a program that displays a famous painting in a frame like this, so that the user can appreciate it from different angles and distances:
As shown, the X-axis points to the right, the Y-axis points forward (into the screen), and the Z-axis points up. You can drag your mouse on the stage to rotate the camera around it:
We first need to add a big flat box to serve as our “canvas”. It will be a square shape in the X and Z directions (size of 1000 each), but very thin in the Z direction (size of 1). The color won’t matter, since we will paint over the box.
This is what you’ll get. You need to zoom out the camera to view it.
Next, you need to find an image online for the painting you would like to show.
First, open a search engine like Google, and search by the painting’s name or artist. Switch to the “images”, and browse through the list like this:
Once you have picked a painting you like, select it, then right-click on the image preview, and select “copy image address”. This will copy the URL of that image into your computer’s clipboard.
In this tutorial, we are using the following URL for “Wheatfield with Crows” by Van Gogh:
Note that in most cases, you can use these images for free only for learning purposes. If you are building a project for commercial use, then you need to get a proper license for using the image.
Next, let’s use that image as the texture of the box, using the “add texture with shared file” block. Since our box is 1000 by 1000, you need to set the “unit size” of the texture to 1000 as well, so that the image will fit onto the box face exactly. Also, you need to delete the URL in the block’s input, and paste the new URL you copied in step 3.
Now your box should be covered with the painting you selected:
Most paintings are not square-shaped. In other words, the ratio between the width and height (called “aspect ratio”) is not 1. We can fix this by scaling the box.
For this example, the painting’s height is slightly smaller than half of its width. Therefore, we need to scale down the box to 48% in the Z direction like this:
Now the box’s width is still 1000, but its height is only 480. It looks much closer to the original painting now.
Next, let’s add a picture frame around the painting, using a rectangle tube. Suppose the thickness of the frame border is 20, then the 2 borders on the left and right adds 40 units in total. We know the painting itself is 1000 by 480, so the rectangle tube has to be 1040 by 520.
We also need to rotate the frame, since by default it will face up.
Now we get a frame around the painting:
To make the picture frame look more realistic, we can apply a texture to it, such as “Marble06”. You can also play with the texture size to get different visual effects. For example, if we use a texture size of 3000, the texture image will be more stretched out.
This is how it looks after applying the texture:
We can add a description that includes the painting’s name and artist, using a 3D text object. Its width should roughly match the width of the painting, which is 1000. Also, the description needs to be moved below the painting. Since the height of the painting is 480, the bottom edge of it would be at a Z-position of -240. Also, the frame border is 20, so the text needs to be below the Z-position of -260.
The description will look like this:
Since the description is facing the front direction (positive Y direction), we need to rotate the text by 180 degrees, or move the camera to the front. In this case, it is better to move the camera, since we need to move the camera to a good view distance to show the entire painting as well.
Now the user gets a good view of the painting when they click the green flag, no need to rotate or zoom the camera:
To enhance the viewing experience, we can add a beautiful background, using the “set sky” block. It should be inserted at the beginning of the program, since it will take some time to load the background image, and setting the sky would move the camera further away as well.
Also, it’s a good time to hide the 3D axis now as we are mostly done with the development:
Now we get a good background that also changes as we move the camera.
To produce a more fun viewing experience, we can start the camera at a different position, then move it to the front view position through animation.
Here is the final demo:
Here are some fun ideas you can try to modify this project:
- Multiple Paintings: you can try to create a gallery of multiple paintings and arrange them in the 3D space
- Description Text: you can add more descriptive text on the painting or around it. For example, the user can click a button to show the description, then click it again to hide it.
- Thick Text: you can try to use the “add 3D thick text” block for the description, which supports more font styles.