The core five steps are:
1. Set up the renderer
2. Set up the camera camera
3. Set scene scene
4. Set the light source light
5. Set object object
1. Set up the renderer
The process of mapping objects in three-dimensional space to two-dimensional planes is called three-dimensional rendering. Generally speaking, we call the software that performs rendering operations a renderer. Specifically, the following treatments need to be carried out.
var renderer;
function initThree(){
width = ("box").clientWidth;
height = ("box").clientHeight;
/**
//Declare the renderer object: WebGLRenderer
renderer=new ({
antialias:true, //Whether antialiasing is enabled
precision:"highp", //Select coloring accuracy
alpha:true, //Can the background color be transparent?
PremultipliedAlpha:false,
stencil:false,
preserveDrawingBuffer:true, // Whether to save the drawing buffer
maxLights:1 //maxLights: Maximum number of lights
});
*/
renderer = new ({
antialias:true
});/* Generate renderer object (properties: the anti-aliasing effect is valid for setting)*/
(width,height);
("box").appendChild();
/*Set the canvas background color (clearColor) and background color transparency (clearAlpha) */
(0xFFFFFF,1.0);
}
2. Set up the camera camera
In OpenGL (WebGL), objects in three-dimensional space are projected into two-dimensional space, there are two cameras: perspective projection and orthogonal projection.
a. Perspective projection: The closer the object is, the larger the object is, the smaller the way the object is drawn in the distance, and the way we look at objects in daily life.
b. Orthogonal projection: No matter the object and the viewpoint distance, it is drawn according to a unified size. In the fields of architecture and design, objects need to be drawn from various angles. Therefore, this projection is widely used. There are also cameras that can also specify perspective projection and orthoprojection. This article will follow the steps below to set the perspective projection method.
(1) Declare global variables (objects);
(2) Set up the camera with perspective projection;
(3) Set the camera's position coordinates;
(4) Set the upper direction of the camera to the "z" axis;
(5) Set the center coordinates of the field of view.
var camera;
function initCamera(){
/*Four parameters of PerspectiveCamera
Parameter 1: is the field of view,
Parameter 2: Aspect Ratio. This parameter almost always uses the width of the element divided by the height, otherwise you will see that the image is squashed as in old movies.
Parameter 3: The camera allows the closest distance to the object.
Parameter 4; The camera allows the farthest distance from the object. By default, the camera's upper direction is the Y axis, the right direction is the X axis, and the inner direction is the Z axis.*/
camera = new (45,width/height,1,10000);
= 0;
= 1000;
= 0;
= 0;
= 0;
= 1;
({x:0,y:0,z:0}); //Set the center coordinates of the field of view}
3. Set the scene
var scene;
function initScene(){
scene = new ();
}
4. Set the light source light
In the three-dimensional space of OpenGL (WebGL), there are two types of point light sources and spotlights. Furthermore, as a special case of point light sources, there is also a parallel light source (wireless high light source). In addition, as the parameters of the light source, settings such as [Ambient Light] can be performed. As corresponding, [Point Light] [Spot Light] [Parameter Light], and [Ambient Light] can be set. Like OpenGL, multiple light sources can be set in one scene. Basically, ambient light is combined with several other light sources. If ambient light is not set, the surfaces that cannot be exposed to the light will become too dark. In this article, first, follow the steps below to set the parallel light source, and then add ambient light.
(1) Declare global variables (objects)
(2) Set parallel light sources
(3) Set the light source vector
(4) Add light source to the scene
/*** Light (light) ***/
new (color); �
new (color, intensity, distance); �
new (color, brightness);
new (color, intensity, distance, angle, attenuation index); // spotlight
var light;
function initLight(){
light = new (0xFF0000, 1.0, 0); //parallel light (100, 100, 200); //Set the light source position (light); //Add officials to scene}
5. Set objects
//Geometric shape
CubeGeometry(Length, width, height, length division, wide division, height division); �
PlanGeometry (length, width, length division, width division); �
SphereGeometry (radius, longitude slice, latitude segmentation, longitude segmentation, longitude span, latitude start, latitude span); // sphere
CircleGeometry (radius, number of slices, start, cross angle);
CylinderGeometry (top area, bottom area, height, circle segmentation, high segmentation, whether there is no top and bottom surface);
TetrahedronGeometry(radius, details); // regular quadrilateral
OctahedronGeometry(radius, details); // regular octagon
IconsahedronGeometry(radius, details); // regular dodecagon
TorusGeometry (radius, pipeline radius, latitude division, longitude division, radius of the torus); // radius
var sphere;
function initObject(){
sphere = new (new (200,200)/*Set the size of the sphere*/,new ({color:0xff0000})/*Set the material of the sphere*/); //Material setting (sphere);
(0,0,0); /*Set object position*/
}
6. Execute
function threeExcute(){
initThree();
initCamera();
initScene();
initLight();
initObject();
();
(scene,camera);
}
Complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//r83/"></script>
</head>
<!-- The core five steps are：
1.Setting up the renderer
2.Set up the cameracamera
3.Setting up the scenescene
4.Setting up the light sourcelight
5.Setting up objectsobject
-->
<script>
// 1. Set the renderer var renderer;
function initThree(){
width = ("box").clientWidth;
height = ("box").clientHeight;
renderer = new ({
antialias:true
});/* Generate renderer object (properties: the anti-aliasing effect is valid for setting)*/
(width,height);
("box").appendChild();
/*Set the canvas background color (clearColor) and background color transparency (clearAlpha) */
(0xFFFFFF,1.0);
}
// 2. Set up the camera camera var camera;
function initCamera(){
camera = new (45,width/height,1,10000);
= 0;
= 1000;
= 0;
= 0;
= 0;
= 1;
({x:0,y:0,z:0}); //Set the center coordinates of the field of view }
// 3. Set the scene var scene;
function initScene(){
scene = new ();
}
// 4. Set the light source light var light;
function initLight(){
light = new (0xFF0000, 1.0, 0); //parallel light (100, 100, 200); //Set the light source position (light); //Add officials to scene }
//5. Set objects var sphere;
function initObject(){
sphere = new (new (200,200)/*Set the size of the sphere*/,new ({color:0xff0000})/*Set the material of the sphere*/); //Material setting (sphere);
(0,0,0); /*Set object position*/
}
//6.Execution function threeExcute(){
initThree();
initCamera();
initScene();
initLight();
initObject();
();
(scene,camera);
}
</script>
<style type="text/css">
div#box{
border: none;
cursor: move;
width: 1400px;
height: 600px;
background-color: #EEEEEE;
}
</style>
<body onload="threeExcute();">
<div ></div>
</body>
</html>
Download address://
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!