The introduction
Recently, I learned to learn visualization with moon shadow, and then I wanted to find something to practice. Welcome to study together.
Implementation effect
code
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> margin: 0; overflow: hidden; </style> <! -- introducing three. Js 3 d engine -- > < script SRC = "https://cdn.bootcdn.net/ajax/libs/three.js/100/three.js" > < / script > < script SRC ="./files/ Orbitcontrols.js "></script> </head> <body> <script> /** * Create Scene object Scene */ var Scene = new threes.scene (); Var point = new three.pointlight (0xffFFFF); point.position.set(400, 200, 300); //scene.add(point); Var ambient = new THREE.AmbientLight(0x444444); scene.add(ambient); /** * camera Settings */ var width = window.innerWidth; Var height = window.innerheight; Camera = new THREE.PerspectiveCamera(40, window.innerwidth/window.innerheight, 1, 10000); camera.position.set(0, 0, 3000); Function create (){function makeTextCanvas(text, width, height) { var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; var c = canvas.getContext("2d"); // c.fillStyle = "#FF0000"; // c.fillRect(0, 0, width, height); c.clearRect(0, 0, c.canvas.width, c.canvas.height); / / text mount eginPath (); c.translate(width/2,height/2); c.fillStyle = "#ffffff"; // Text fill color c.font = "48px Arial"; C.extbaseline = "middle"; // The vertical coordinate defined by the text and fillText c.textalign = "center"; C. fillText(text, 0, 0); // document.body.appendChild(canvas) return c.canvas; } var textCanvas = makeTextCanvas("hello", 160, 80); var texture = new THREE.CanvasTexture(textCanvas); texture.generateMipmaps = false; texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; let pinMaterial = new THREE.SpriteMaterial({ map: texture, }); let mesh= new THREE.Sprite(pinMaterial); return mesh } let group = new THREE.Group(); //var sphere = [] //var vector = new THREE.Vector3(); for ( var i = 0, l = 60; i < l; i ++ ) { var phi = Math.acos( - 1 + ( 2 * i ) / l ); var theta = Math.sqrt( l * Math.PI ) * phi; var sprite = createS() sprite.scale.set(80, 40, 1); sprite.position.setFromSphericalCoords( 800, phi, theta ) //sphere.push(sprite) group.add(sprite); } scene.add(group); Var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width, height); / / set the renderer render area size. The shadowMap. Enabled = false; //renderer.setClearColor(0xb9d3ff, 1); // Set the background color renderer.setPixelRatio(window.devicepixelRatio); document.body.appendChild(renderer.domElement); Renderer. render(scene, camera); var controls = new THREE.OrbitControls(camera,renderer.domElement); function render() { renderer.render(scene,camera); // Perform render operation group.rotatey (-0.001); Group.rotatex (0.001) controls.update() requestAnimationFrame(render); Render} render(); </script> </body> </html>Copy the codeknowledge
2. Sprite is a plane that always faces the camera in a 3D scene.