Home > Developer > Web Develop
Long time no update three.js, the first three chapters understand some of the basic knowledge. We'll do something about this chapter and do something interesting.
Effects such as:
Because it is stationary, the actual effect is that the earth rotates.
Nonsense not much to say, on the code:
<! DOCTYPE html>{padding:0px; margin:0px; } html,body,.main {width:100%; Height:100%; Overflow:hidden; }</style><body> <div class= "main" ></div></body>functionThree (className) { This. width =$ (className). width (); This. Height =$ (className). Height (); This. Renderer =Newthree. Webglrenderer ({antialias:true //turn on aliasing, default is False }); This. Renderer.setsize ( This. width, This. height);//to set the render area to a wide height This. Renderer.setclearcolor ("white");//Set Background color$ (className). Append ( This. renderer.domelement); } Three.prototype={init:function() { This. scence =NewThree. Scene ();//Create a stage //setting the angle of view and parameters This. Camera =NewThree. Perspectivecamera (45, This. Width/ This. height, 1, 10000); This. Camera.position.set (0,0,10); This. Camera.lookat (NewThree. Vector3 (0, 0, 0)); //setting lights and Parameters This. Light =NewThree. Ambientlight (0xDDDDDD); This. Light.position.set (100, 100, 200); This. Scence.add ( This. Light); //Create a role varCircle =NewThree. Spheregeometry (755,50,50); varTexture =Newthree. Textureloader (); varMaterial =Newthree. Meshbasicmaterial (); //add a background image to circleMaterial.map = Texture.load ("Images/earth_atmos_4096.jpg",function() {Three.renderer.render (three.scence, Three.camera); }); Three.mesh=Newthree. Mesh (circle,material); Three.mesh.position.set (0,0,-5000); Three.scence.add (Three.mesh); }, animate:function() {requestanimationframe (three.animate); THREE.MESH.ROTATION.Y+ = 0.01; Three.renderer.render (Three.scence, Three.camera); }, start:function() { This. Init (); This. Animate (); } } varthree =NewThree (". Main"); Three.start ();</script>
Here I upload the picture of the Earth, or no picture can not be loaded.
Finally, I would like to remind you that when a picture is loaded into three.js, it needs to be run on the server side. Otherwise it will be an error.
Today's three.js is here, next time goodbye.
Three.js-(Getting Started four)
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
