Home > Developer > Web Develop
Three.js has encapsulated the bottom layer WebGl接口 so we can easily create three-dimensional scenes without having to master the tedious knowledge of graphics. Compared to using the underlying WEBGL we can use less code, greatly reducing the cost of learning, making development more efficient.
Start by creating a new HTML page that introduces the Three.js file.
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "UTF-8"> <title>Three.js</title> </Head> <Body> <Scripttype= "Text/javascript"src= "Js/three/three.js"></Script> <Script> </Script> </Body> </HTML>
Create a three-dimensional scene
Add a renderervar scene = new three. Scene ();
Three.js provides us with such as: CANVAS,SVG,CSS3. Many renderers, but the WebGL renderer is more flexible, so take WebGL for example.
var render = new three. Three. Webglrenderer ({ // anti-aliasing properties, WebGL Renderer a commonly used property AntiAlias: true }); // Set the background color to white (0XFFFFFF) Render.setclearcolor (0xffffff // set render size to page size Render.setsize (Window.innerwidth, window.innerheight); // use Webglrenderer to generate a canvas element. Document.body.appendChild (render.domelement); Important components in a three-dimensional sceneOf course, you can also define a
canvasCanvas <canvas id= "MyCanvas" width= "400px" height= "300px" ></canvas> and change webglrenderer definition to var New three. Webglrenderer ({canvas:document.getElementById (' MyCanvas 'true});
Important components in a three-dimensional scene include, camera light object .
Used by Three.js 右手坐标系 .
Camera, which determines the position, orientation, and angle of the three-dimensional scene you're starting to see.
Lightvar New Three. Perspectivecamera (Window.innerwidth/window.innerheight, 0.1, +); // Camera.lookat (new three. Vector3 (20, 0, 20));
Light, which determines the type of light that your scene has and the lighting effect it produces.
Objectvar New Three. Ambientlight (0xFFFFFF); // add light to scene using the Add method of scene () Scene.add (light);
Object (object) that you want to add to the scene in a variety of objects.
//object Three-dimensional graphics varGeometry =NewThree. Cubegeometry (4, 4, 4); //Object Material varMaterial =Newthree. Meshbasicmaterial ({color:0x4d6dad }); //creating three-dimensional objects varMesh =Newthree. Mesh (geometry, material); Mesh.position.set (10, 0, 10); //Add mesh to scene using the Add method of scene ()Scene.add (mesh);
Rendering the scene
Refresh the scene periodically and call Webglrenderer's render function to refresh the scene.
function render () { requestanimationframe (render); Renderer.render (scene, camera); } We can achieve a simple animation effect by controlling the position (position), rotation (rotation), and scale (scaling) properties of object in the render () function. The rendered FPS is 60, which means that it will change 60 times a second.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>Three-basic</title> <style>Body{margin:0;Overflow:Hidden; } </style> </Head> <Body> <Scripttype= "Text/javascript"src= "Libs/three.js"></Script> <Script> varscene, renderer, camera, mesh; functionInit () {Scene= Newthree. Scene (); Renderer= Newthree. Webglrenderer ({antialias:true }); Renderer.setclearcolor (0xFFFFFF); Renderer.setsize (Window.innerwidth, window.innerheight); Camera= Newthree. Perspectivecamera ( $, Window.innerwidth/Window.innerheight,0.1, +); Camera.lookat (Newthree. Vector3 ( -, 0, -)); var Light= Newthree. Ambientlight (0xFFFFFF); Scene.add (light); varGeometry= Newthree. Cubegeometry (4, 4, 4); varMaterial= Newthree. Meshbasicmaterial ({color:0x4d6dad }); Mesh= Newthree. Mesh (geometry, material); Mesh.position.set (Ten, 0, Ten); Scene.add (mesh); Document.body.appendChild (renderer.domelement); Render (); } functionrender () {MESH.ROTATION.Y+=Math.PI/ the * 1; Renderer.render (scene, camera); Requestanimationframe (render); } init (); </Script> <Scripttype= "Text/javascript"src=".. /js/cjy_info.js "></Script> </Body></HTML>
Original https://chenjy1225.github.io/2016/08/08/three-js-basic/
Three.js Getting Started 3
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
