Three means 3D and js means javascript. Together, Three.js means using JavaScript to write 3D programs.
I. Three Major Organizations
In Three.js, to render an object into a web page, we need three components: scene, camera and renderer.
1. Scene
var scene=new THREE.Scene();
2. Camera
var camera = new THREE.PerspectiveCamera(45,1,1,1000);//Perspective camera camera.position.set(0,0,100);//Setting Camera Position camera.lookAt(new THREE.Vector3(0,0,0)); //Central Point of Camera Lens
[Remarks]
// Change camera perspective.
camera.fov = parseFloat(fov) camera.updateProjectionMatrix()
The larger the viewing angle, the smaller the proportion of graphs we see, as follows:
The perspective is 100 degrees:
The angle of view is 50 degrees:
3. Render
var renderer=new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); //Display in the form.
2. Material
//Define the material THREE. LineBasicMaterial. MeshBasicMaterial....
var material = new THREE.LineBasicMaterial({
vertexColors: true //Define whether the line material uses vertex color or not. Define this as color below true before the line becomes gradient.
});
3. Geometry
// The empty geometry has no information about points, unlike Box Geometry, which has a series of points and forms a square. var geometry = new THREE.Geometry(); // Add point information to the blank geometry. Write three points here. The geometry will automatically combine these points into lines and surfaces. geometry.vertices.push(new THREE.Vector3(0,-10,0)); geometry.vertices.push(new THREE.Vector3(0,10,0));
IV. Drawing Graphics
1. Mesh drawing
Grid maps consist of many vertical and horizontal lines, so they are mainly used to draw lines in different positions.
for(var i = 0;i < 10;i++){//Vertical line
//Linear structure
var line=new THREE.Line(geometry,material);
line.position.x = 2*i - 10 //Sequential translation
// Join the scene.
scene.add(line)
}
for(var i = 0;i < 10;i++){//Horizontal line
var line=new THREE.Line(geometry,material);
line.rotation.z = -90*Math.PI / 180 //Vertical rotation minus 90 degrees to horizontal
line.position.y = 2*i - 10 //Sequential translation
scene.add(line)
}
2. Cube Drawing
var geometry2 = new THREE.CubeGeometry( 10, 10, 20, 4, 4);
var material2 = new THREE.MeshLambertMaterial( { color:0xE1E1E1} )
var mesh2 = new THREE.Mesh( geometry2, material2);
mesh2.position.set(0,20,0);
scene.add(mesh2);
V. Light Sources
* The relationship between material and light source, and the relationship between light source superposition:
/*
* 1. The white material is illuminated by a non-white light source and appears as a light source color.
* 2. Any color material is presented as material color under the illumination of white light source.
* 3. Non-white material appears black under the irradiation of non-white light source.
* 4. Any color or material that is illuminated by no light source will be black, because without light source, objects can not reflect light source into human eyes.
* 5. When two light sources exist at the same time, the color of the light source will be superimposed.
*/
1. Increasing ambient light
var ambientLight = new THREE.AmbientLight( 0x009999 ) scene.add(ambientLight)
2. Increasing the Point Light Source
var pointLight = new THREE.PointLight( 0x2196f3,1.0, 0.0 )//Color, intensity of light, distance of light (where the light source is located) scene.add(pointLight)
3. Increasing Parallel Light
var directLight = new THREE.DirectionalLight( 0xffeb3b ) directLight.position.set(0,0,1); scene.add(directLight)
VI. Dynamic effects
function animation () {
var x = camera.position.x - 0.05
x = x < -50 ? 50 : x
camera.position.x = x
// Rendering
renderer.setClearColor(0xf8f8f8,1.0)
renderer.render(scene,camera)
requestAnimationFrame(animation)
}
* After completing the above six steps, you can see the dynamic moving cubes and grids in the browser. Under the illumination of the light source, the cubes show different colors, as shown below.
7. Performance Testing Tool Stats
In Three.js, performance is managed by a performance monitor, and you can get code and details from https://github.com/mrdoob/stats.js.
It includes the following monitoring.
How to use:
If stats is added to the interface, there will be performance monitoring maps, and clicking on the maps will switch other monitoring modes.
We are still learning and will continue to update.
Finally, complete code is attached:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="three.js" type="text/javascript"></script>
<script src="stats.js" type="text/javascript"></script>
<script src="Tween.js" type="text/javascript"></script>
</head>
<body>
<div style="float: right;margin:15px;">
//Change camera perspective (0-180) <input type="text"nkeypress="change Fov(this)"/>
</div>
<script type="text/javascript" >
// scene, camera, render
var scene=new THREE.Scene();
// camera
var camera = new THREE.PerspectiveCamera(45,1,1,1000);
camera.position.set(0,0,100);
camera.lookAt(new THREE.Vector3(0,0,0));
// Renderer
var renderer=new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
//Display in form
document.body.appendChild(renderer.domElement);
//Define the material THREE. LineBasicMaterial. MeshBasicMaterial....
var material = new THREE.LineBasicMaterial({
vertexColors: true //Define whether the line material uses vertex color or not. Define this as color below true before the line becomes gradient.
});
// The empty geometry has no information about points, unlike Box Geometry, which has a series of points and forms a square.
var geometry = new THREE.Geometry();
// Add point information to the blank geometry. Write three points here. The geometry will automatically combine these points into lines and surfaces.
geometry.vertices.push(new THREE.Vector3(0,-10,0));
geometry.vertices.push(new THREE.Vector3(0,10,0));
//geometry.vertices.push(new THREE.Vector3(0,5,0));
//Line color
var color1 = new THREE.Color(0x2196f3)
var color2 = new THREE.Color(0xffeb3b)
geometry.colors.push(color1, color2, color1)
//Grid drawing
for(var i = 0;i < 10;i++){
//Linear structure
var line=new THREE.Line(geometry,material);
line.position.x = 2*i - 10
// Join the scene.
scene.add(line)
}
for(var i = 0;i < 10;i++){
var line=new THREE.Line(geometry,material);
line.rotation.z = -90*Math.PI / 180
line.position.y = 2*i - 10
scene.add(line)
}
//Increasing cubes
var geometry2 = new THREE.CubeGeometry( 10, 10, 20, 4, 4);
/*
*1.White material is illuminated by a non-white light source and appears as a light source color.
*2.Any color material is presented as material color under the illumination of white light source.
*3.Non-white material appears black under the irradiation of non-white light source
*4.Any color or material that is illuminated by no light source is shown to be black, because without light source, objects cannot reflect light source into human eyes.
*5.When two light sources exist at the same time, the color of the light source will be superimposed.
*/
var material2 = new THREE.MeshLambertMaterial( { color:0xE1E1E1} )
var mesh2 = new THREE.Mesh( geometry2, material2);
mesh2.position.set(0,20,0);
scene.add(mesh2);
//Increasing ambient light
var ambientLight = new THREE.AmbientLight( 0x009999 )
scene.add(ambientLight)
//Adding Point Light Source
var pointLight = new THREE.PointLight( 0x2196f3,1.0, 0.0 )//Color, intensity of light, distance of light (where the light source is located)
scene.add(pointLight)
//Increasing Parallel Light
var directLight = new THREE.DirectionalLight( 0xffeb3b )
directLight.position.set(0,0,1);
scene.add(directLight)
//Dynamic effects
function animation () {
var x = camera.position.x - 0.05
x = x < -50 ? 50 : x
camera.position.x = x
// Rendering
renderer.setClearColor(0xf8f8f8,1.0)
renderer.render(scene,camera)
requestAnimationFrame(animation)
stats.update()
}
//Detection performance
var stats
function execute () {
stats = new Stats();
stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom )
animation()
}
requestAnimationFrame(execute)
//Change camera perspective
function changeFov (data) {
if(window.event && window.event.key === 'Enter'){
camera.fov = parseFloat(data.value)
camera.updateProjectionMatrix()
}
}
</script>
</body>
</html>