Threejs basic components in a scene

General Order

camera : Decide which things will be rendered on the screen
Light source : Determines how the material will be displayed and used to generate shadows
objects: Objects being rendered in the camera

Several methods of scene scenes

1. Scene.add (object);//Add objects to the scene
2. Scene.remove (object);//Remove object from scene
3. Scene.children;//scene List of sub-objects; array bar, including camera and light source
4. Scene.getchildbyname ()//Access the object through the object's Name property
   at Var cude= ... When you can set Cude.name to "Block 1"
5. Scene.traverse (function);//A function parameter is called once for each child object

Scene.traverse(function(e){    //将一个函数作为参数传进来，对Scene的每个子对象都调用一次    if(e instanceof THREE.Mesh && e!=plane){        ...如果e是网格对象且不是地面,则做旋转处理等    }}) //可以用for循环children达到同样的效果

Note: Three.camera will be added automatically when the scene is rendered, and can be added manually if you like
Scene.add (camera);

Two properties of the scene Fog (atomized) and overridematerial (material overlay) fog

scene.fog=newTHREE.Fog(0xffffff,0.015,100)

parameters : White atomization effect, near attribute value, distance attribute value, where atomization begins and ends, and degree of deepening

Another-Fog:

newTHREE.FogExp2(0xffffff,0.015)//后一个参数为浓度

Material Overlay

Used to set the material of all objects > means that all objects added to the scene use the same material

newTHREE.MeshLambertMaterial({color:0xffffff});//所有的都是白色的

Functions and properties of mesh objects

• Position: Determines the position of the object relative to its parent object, and the general parent object is Three.scene
• The rotation:rotation.x|y|z rotates a certain angle around an axis.
• Scale: Scales to scale objects along the XYZ axis
• Translatex| y| Z (amount)//Pan the object amount position

Material material

Meshlambertmaterial and meshphongmaterial are two materials that react to light sources.

• Meshlambertmaterial: Can be used to create objects with dim colors
• Meshphongmaterial: Can be used to create shiny objects such as metal

Camera Cameras

Positive projection camera and perspective camera

• Perspective projection the farther away the camera is, the smaller the object is rendered.

• Just as the size of the same object is projected, the distance between the object and the camera does not affect the rendering result, which can be achieved by simulating the city.

  ===> More with perspective camera, closer to the real world
  The camera's point focus generally points to the Camera.lookat (new three. Vector3 (x, y, z)//0 0 0

Window.requestanimationframe

Window.requestanimationframe (callback) uses a callback function as a parameter, and the main purpose is to redraw the Web page by frame. One thing to note, though, is that the requestanimationframe is done on the main thread. This means that if the main thread is very busy, the animation effect of Requestanimationframe will be greatly compromised. Not all browsers support REQUESTANIMATIONFRAMEAPI the best way is to emulate this method as follows

 window . Requestanimframe = (function  () {return  window . Requestanimationframe | |               window . Webkitrequestanimationframe | |               window . Mozrequestanimationframe | |               window . Orequestanimationframe | |               window . Msrequestanimationframe | | function  (callback) {window . SetTimeout (Callback, 1000 /60 );    }; })();

function renderScene(){        requestAnimationFrame(renderScene);        renderer.render(scene,camera);    }

A requestanimationframe (Renderscene) is called again in Renderscene, which ensures that the animation continues to run and that the function is called in the code to start the animation.

Shadow

Create a few steps to create a shadow, and let the sphere and the Block project shadows onto the ground, which objects cast shadows and which objects receive shadows.

1. render.shadowmapenabled=true;//tell render we need Shadow (allow Shadow insinuate)
2. plane.receiveshadow=true;//Ground accepts Shadows
3. Cude.castshadow=true;//cast projection, which is a square cast shadow
4. Spotlight.castshadow=true, not all light sources can cast shadows, where a poly-point light source can be used to create shadows.

Threejs basic components in a scene