Home > Developer > Web Develop
has been interested in WebGL, finally mentioned the spirit of learning, the road is long AH ~
Source: WebGL Chinese web http://www.hewebgl.com
1, three major formationIn Three.js, to render an object to a Web page, we need 3 builds: Scene, camera, and renderer (renderer). With these three things, you can render objects to a Web page.
Remember the key statement: With these three things, we can use the camera to render the scene to the Web.
2. CameraAnother build is a camera, and the camera determines the view of that angle in the scene to be displayed. The camera is like a human eye, people stand in different positions, looking up or down to see different views.
There is only one scene, but there are many different cameras. As in reality, different cameras identify all aspects of the phase. For example, some cameras are suitable for portraits, some cameras are suitable for landscapes, and professional photographers choose different cameras depending on the actual use. For programmers, just setting different camera parameters can make the camera look differently.
3. RendererThe final step is to set the renderer, which determines how the rendered result should be drawn on the page, and how it will be plotted. Note that the domelement element of the renderer renderer, which represents the canvas in the renderer, all of the rendering is drawn on the domelement, so the appendchild here means to hook this domelement under the body, This renders the result to be displayed on the page.
4. Add object to Scene 5, Render 6, Render loopExample one, a preliminary study:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Of</title> <style>Canvas{width:100%;Height:100%}</style> <Scriptsrc= "Lib/three.js"></Script></Head><Body> <Script> varScene= Newthree. Scene ();//ScenesvarCamera= Newthree. Perspectivecamera ( the, Window.innerwidth/Window.innerheight, 0.1, 1000);//Perspective camera varrenderer= NewThree. Webglrenderer (); Renderer Renderer.setsize (window.innerwidth, window.innerheight); // Set the size of the renderer to the inner width of the window, that is, the width of the content area document.body.appendChild (renderer.domelement);
Add an object to the scenevarGeometry= Newthree. Cubegeometry (1,1,1); varMaterial= Newthree. Meshbasicmaterial ({color:0x00ff00}); varCube= Newthree. Mesh (geometry, material); Scene.add (Cube); Camera.position.z= 5; functionrender () {requestanimationframe (render); Cube.rotation.x+= 0.1; CUBE.ROTATION.Y+= 0.1; Renderer.render (scene, camera); } render (); </Script></Body></HTML>
WebGL Learning Note One
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
