Three.js notes

/** * Scenes (Scene) * **/varScene =NewThree. Scene ();//Create a sceneScene.add (x);//Insert Scene/** * CAMERAS (camera) * **///orthographic projection CameravarCamera =Newthree. Orthographiccamera (left, right, top, bottom, near, far);//Perspective Avatar CameravarCamera =NewThree. Perspectivecamera (FoV, Aspect, near, far);//FOV: human eye angle, aspect: aspect ratio/** * Renderer (renderer) * **/varRenderer =Newthree. Webglrenderer (options);//Options {} is optional. Parameters://canvas:element <canvas></canvas>renderer.setsize (long, wide); Element.appendchild (renderer.domelement);//inserting NodesRenderer.setclearcolor (color, opacity);//set the color after clearing 16 binaryRenderer.clear ();//Clear PanelRenderer.render (scene, camera);//Rendering/** * LIGHTING (Light) * **/NewThree. Ambientlight (color);//Ambient LightNewThree. Pointlight (color, intensity, distance);//Point LightNewThree. DirectionalLight (color, brightness);//Parallel LightNewThree. SpotLight (color, intensity, distance, angle, attenuation index);//Spotlight/** * Geometric shape * **/NewThree. Cubegeometry (long, wide, tall, long split, wide split, high split);//CubeNewThree. Plangeometry (long, wide, long split, wide split);//planeNewThree. Spheregeometry (radius, longitude slice, latitude division, Longitude division, longitude span, latitude start, latitude span);//SpheresNewThree. Circlegeometry (RADIUS, number of slices, beginning, crossing angle);//roundNewThree. Cylindergeometry (top area, bottom area, high, round split, high split, no top and bottom);//Round TableNewThree. Tetrahedrongeometry (RADIUS, detail);//Positive QuadrilateralNewThree. Octahedrongeometry (RADIUS, detail);//eight-edged shapeNewThree. Iconsahedrongeometry (RADIUS, detail);//positive 12 side shapeNewThree. Torusgeometry (RADIUS, pipe radius, latitude Division, Longitude division, arc of Torus);//Doughnut face//Custom ShapesvarGeometry =Newthree. Geometry (); Geometry.vertices.push (NewThree. Vectory3 (x, Y, z));//points, where x, y, z are coordinatesGeometry.faces.push (NewThree. Faces3 (x, Y, z));//polygon, where x, Y, Z are the index of the array of points, three points to determine a polygon/** * Material * **/NewThree. Meshbasicmaterial (options);//Basic Material//Options {} is optional. Parameters://Visible : See//Color: Colors//wireframe: Whether to render lines rather than polygons//Side:THREE.FrontSide Front, three. Backside opposite, three. Doubleside Double Sided//Map: MapNewThree. Meshlambertmaterial (options);//Lambert material, suitable for illumination//Ambient: Reflective Ability//emissive: Self-luminous colorNewThree. Meshphongmaterial ();//Phong material, suitable for metal and mirror//Specular: Light Mask color//shininess: Spot size (the larger the value, the smaller the spot)NewThree. Meshnormalmaterial ();//Orientation Material/*Stickers*/varTexture = three. Imageutils.loadtexture (URL, {},function(){});//load a single map (a multiple of 256 of the recommended map's length)NewThree. Meshfacematerial ()//set a map of different faces with an array of parameters as a single mapTexture.wraps texture.wrapt = three. Repeatwrapping//how the map repeatsTexture.repeat.set (x, y)//Number of repetitionsNewThree.texture (Canvas)//use canvas as a decal/** * Combine models and textures * **/varMesh =Newthree. Mesh (shape, material); Mesh.position//position mesh.position.x (Y, z) or Mesh.position.set (x, Y, z)Mesh.scale//ZoomMesh.rotation//Rotate/** * Monitor fps * **/varStats =NewStats (); Stats.domelement//nodeStats.begin ()//StartStats.end ()//End

Three.js notes