Ok, We've Heard Enough.
Let's Start Coding!
First of all, so we don't reinvent the wheel, we're going to be relying on an existing 3D Javascript library. We want a library that can give us all the tools we need to create our own WebGL experiences from start to finish.
There's a lot of libraries out there, but the most popular ones are three.js & babylon.js.
For the sake of this lecture, we're going to be focusing on babylon.js, because it's more user-friendly and faster to learn.
The great thing about babylon.js is that it's also very visual. Go to their website, and click on the PLAYGROUND icon. This is how it's going to look:
There's lots to do & learn here, so we're going to be brief.
If you want to learn more in depth, babylon.js has lots of information online and a very active community. Check out these resources:
In the Playground, on the left side, is where you write your code.
Notice there's already some code written - this code creates our 3D scene, seen on the right.
Drag around with your mouse and look at the sphere and ground from different angles.
This is exactly how the user is going to experience your scene.
While coding, if you want to see the outcomes of what you're building - press the PLAY icon in the top toolbar.
With the DOWNLOAD option, you can tranform your scene into a working index.html file, and save it on your computer.
Try this now, and integrate the index.html into your WIX website, like we've shown before:
The final part of this lecture is going to be with live coding, so we can play around freely:
Here below is a 3D Viewer code template.
Copy it into Babylon's Playground, and hit the PLAY icon.
In the code, there are explanations on the different parts of it - any line that starts with // is an explanation, and not the actual code.
Change the parameters as you wish, to fit your model and style.
Then click DOWNLOAD and get that index.html. :)
To change the bottle example to your own model, I've marked the code below in 4 colors.
Change these to your own model & texture HTTPS location, on your cloud service.
Don't delete the "" by mistake, the links to your model & texture need to be inside these "".
Here's an explanation of the 4 colors:
Green:
This is the HTTPS location of the folder that holds your model, on the cloud.
Red:
This is the actual name of your model's file. In this example - Corona.obj
Make sure to write this correctly.
Babylon JS does not work with FBX file formats.
Pink:
This is a name I gave the model in the code. In this example - bottle
you can change this name as you wish, just make sure to always refer to your new name anywhere that is needed in the code.
Orange:
This is the HTTPS location of the texture image (jpg or png file) of your model, on the cloud.
Here's the code, copy from here, on:
var createScene = function () {
var scene = new BABYLON.Scene(engine);
// Adding an Arc Rotate Camera, change the number "20" to whatever zoom amount you want the camera to have from your model
var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 20, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// Scrolling down the website will not affect zoom in & out of the model, delete if you want otherwise
camera.inputs.attached.mousewheel.detachControl(canvas);
// Color of the canvas, currently it's transparent
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
// This creates a light, the 3 numbers after Vector3 are the XYZ position of the light in the 3D scene, change as you wish
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(35, 0, 0), scene);
// Default intensity is 1. Let's strengthen the light a small amount, and give it color
light.intensity = 1.3;
light.diffuse = new BABYLON.Color3(1, 1, 1);
light.specular = new BABYLON.Color3(0.15, 0.18, 0.21, 0.03);
// The first parameter can be used to specify which mesh to import. Here we import all meshes
BABYLON.SceneLoader.ImportMesh("", "https://musrara1.s3.me-south-1.amazonaws.com/add1/test1/", "Corona.obj", scene, function (newMeshes) {
// Gives a name to the imported mesh, use this name further on, always
var bottle = newMeshes[0];
// Position & Rotation & Scaling of the imported mesh, change at will
bottle.position.x = 0;
bottle.position.y = -6;
bottle.position.z = 0;
bottle.rotation.x = 55;
bottle.rotation.y = 0;
bottle.rotation.z = 10;
bottle.scaling.x = 0.3;
bottle.scaling.y = 0.3;
bottle.scaling.z = 0.3;
// Gives a material and a texture to the imported mesh
var material1 = new BABYLON.StandardMaterial;
bottle.material = material1;
material1.diffuseTexture = new BABYLON.Texture("https://musrara1.s3.me-south-1.amazonaws.com/add1/test1/BotellaText.jpg", scene);
});
return scene;
};