Home > Developer > Web Develop
Recently collected a variety of information, found that the WebGL Chinese network is particularly useful, very suitable for beginners: http://www.hewebgl.com/article/getarticle/50
Just need to download all the packages needed, and then use Notepad can start to write code, run code I choose Google Chrome, in fact, IE is the same, purely personal beliefs.
Then for the cube, the code given is very clear:
<! DOCTYPE html>
<title></title>
<style>canvas {width:100%; height:100%}</style>
<script src= "Js/three.js" ></script>
<body>
<script>
var scene = new three. Scene ();
var camera = new three. Perspectivecamera (Window.innerwidth/window.innerheight, 0.1, 1000);
var renderer = new three. Webglrenderer ();
Renderer.setsize (Window.innerwidth, window.innerheight);
Document.body.appendChild (renderer.domelement);
var geometry = new three. Cubegeometry (2,2,2);
var material = new three. Meshbasicmaterial ({color:0xf0f000});
var cube = new three. Mesh (geometry, material); Scene.add (Cube);
Camera.position.z = 5;
function render () {
Requestanimationframe (render);
Cube.rotation.x + = 0.05;
CUBE.ROTATION.Y + = 0.05;
Renderer.render (scene, camera);
}
Render ();
</script>
</body>
Have written the site page words know HTML processing is like a stack, see head push into the stack, start processing head content, hit the next head and then pop out, logo head processing end.
Overall, the simple site page including the
Similar to writing unity scripts, WebGL's graphical interface requires these three basic elements.
1.scene
2.camera
3.renderer
Then we declare an object cube, which is the same as the new variable: var cube = new three. Mesh (geometry, material); Scene.add (cube); it is noteworthy that JS likes to use Var to declare variables, because Var and c (void*) are similar, can receive any type, more flexible.
Which looks more wonderful is the color of the assignment, with the 16-0x000000, in fact, the equivalent of 0xRGB, each color with two bits to represent.
It feels like the WEBGL implementation is similar to the latest OpenGL, and now that the emerging applet is in fact inextricably linked to H5, the WebGL feel is a tool for front-end engineering.
"Getting Started with WebGL" draw a spinning cube
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
