Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve the effect of the solar system planetary system in html5. It is very detailed and has a certain reference value. Interested friends must read it!

Initialize the scene, camera, renderer, and set the camera position.

/ / initialize the scene var scene = new THREE.Scene (); / / initialize the camera. The first parameter is the vertical view angle of the camera cone, the second parameter is the aspect ratio of the camera cone, / / the third parameter is the camera cone proximal face, and the fourth parameter is the camera cone distal face var camera = new THREE.PerspectiveCamera (20, dom.clientWidth / dom.clientHeight, 1, 100000). / / set the camera position. The corresponding parameters represent camera.position.set (0,0500); var renderer = new THREE.WebGLRenderer ({alpha: true, antialias: true})

Set the scene window size, and initialize the controller, the window size is the same as the browser window size by default, and finally load the renderer into dom.

/ / set the window size, the first parameter is width, the second parameter is height renderer.setSize (dom.clientWidth, dom.clientHeight); / / initialize the controller var orbitcontrols = new THREE.OrbitControls (camera,renderer.domElement); / / load the renderer into dom dom.appendChild (renderer.domElement)

Define the sun and its materials, the sun is implemented through SphereGeometry, and maps are imported through ImageUtils.

/ / define var sunTexture = THREE.ImageUtils.loadTexture ('. / image/sun_bg.jpg', {}, function () {renderer.render (scene, camera);}); / / Sun and solar materials set centerBall = new THREE.Mesh (new THREE.SphereGeometry (30,30,30), new THREE.MeshBasicMaterial ({map: sunTexture})); scene.add (centerBall)

The sun glow effect is achieved by introducing createRadialGradient for canvas rendering into Sprite.

/ * * realize the raster g and b values of the param color color of * @ param color, for example: "123123123"; * @ returns {Element} returns the canvas object * / var generateSprite = function (color) {var canvas = document.createElement ('canvas'); canvas.width = 16; canvas.height = 16; var context = canvas.getContext (' 2d') Var gradient = context.createRadialGradient (canvas.width / 2, canvas.height / 2,0, canvas.width / 2, canvas.height / 2, canvas.width / 2); gradient.addColorStop (0, 'rgba (' + color +', 1)'); gradient.addColorStop (0.2, 'rgba (' + color +', 1)'); gradient.addColorStop (0.4, 'rgba (' + color +', .6)'); gradient.addColorStop (1, 'rgba) Context.fillStyle = gradient; context.fillRect (0,0, canvas.width, canvas.height); return canvas;}; / / add sunglow effect var centerBallLite = new THREE.Sprite ({map: new THREE.CanvasTexture (generateSprite (sunSpriteColor)), blending: THREE.AdditiveBlending}); centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize;scene.add (centerBallLite)

The orbit of the planets in the solar system is realized by RingGeometry, the orbit offset is realized by position, and the planetary system is realized by THREE.Sprite.

/ * return to planetary orbit combination * @ param starLiteSize size of the planet * @ rotation radius of the param starLiteRadius planet * @ param rotation rotation angle in three directions * @ param speed planetary motion velocity * @ param imgUrl planet mapping * @ param scene scene * @ returns {{satellite: THREE.Mesh, speed: *}} satellite combination object Speed * / var initSatellite = function (starLiteSize, starLiteRadius, rotation, speed, imgUrl, scene) {var track = new THREE.Mesh (new THREE.RingGeometry (starLiteRadius, starLiteRadius + 0.05,50,1), new THREE.MeshBasicMaterial (); var centerMesh = new THREE.Mesh (new THREE.SphereGeometry (1,1,1), new THREE.MeshLambertMaterial ()); / / material setting var starLite = new THREE.Sprite (new THREE.SpriteMaterial ({map: THREE.ImageUtils.loadTexture (imgUrl)})) StarLite.scale.x = starLite.scale.y = starLite.scale.z = starLiteSize;starLite.position.set (starLiteRadius, 0,0); var pivotPoint = new THREE.Object3D (); pivotPoint.add (starLite); pivotPoint.add (track); centerMesh.add (pivotPoint); centerMesh.rotation.set (rotation.x, rotation.y, rotation.z); scene.add (centerMesh); return {starLite: centerMesh, speed: speed};}

The created rotation system of the sun and planets is rendered into the scene, the rotation and rotation are realized by changing the position value regularly, and the animation is realized by using requestAnimationFrame.

/ / execute function var render = function () {renderer.render (scene, camera); centerBall.rotation.y-= 0.01; for (var I = 0; I < starLite.rotation.z-= starLites [I] .starLite.rotation.speed;} orbitcontrols.update (); requestAnimationFrame (render) } these are all the contents of the article "how to achieve the effect of the Planetary system in the Solar system in html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.