WebGL Learning Note One

Source: Internet
Author: User

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 formation

In 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. Camera

Another 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. Renderer

The 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 loop

Example 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.