Open source accelerates the development of technology, and also makes those of us in technology sacrifice a lot of time to update new skills.
Webgl is a relatively new thing, its own library is quite cumbersome, you can write a triangular face, or a cube, it can drive people crazy. Fortunately, many big cows have written a lot of convenient and practical libraries.
The Three.js library is used a lot, and there are many practical libraries such as geometry, rendering and so on. Download address: https://github.com/mrdoob/three.js
The stats.js library is used to monitor program performance, download address: https://github.com/mrdoob/stats.js
Tween.js library is used to make animation, download address: https://github.com/sole
The following example just uses these three libraries.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/three.js"></script>
<script src="js/stats.js"></script>
<script src="js/Tween.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
function initTween() {
new TWEEN.Tween(mesh.position)
.to({ x: -400 }, 3000).repeat(Infinity).start();
}
was renderer;
var stats;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0,0,0);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
light = new THREE.PointLight(0x00FF00);
light.position.set(0, 0, 300);
scene.add(light);
}
var cube;
var mesh;
function initObject() {
var geometry = new THREE.CylinderGeometry(100, 150, 400);
var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0, 0, 0);
scene.add(mesh);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
initTween();
}
function animation() {
renderer.render(scene, camera);
requestAnimationFrame(animation);
stats.update();
TWEEN.update();
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
For professional modelers, the geometric part is the most important, so the following focuses on supplementing the geometric part.
For this part, if you just look at the source code or the English of the official website, you will also collapse. For someone like me who is poor in English and works in a foreign company, the bad mood is terrifying when you think about it. Fortunately, the network is a very good thing. You can view the help document of the Chinese version of the Three.js api at this link:
http://techbrood.com/threejs/docs/
Here are a few examples
Draw a straight line:
function initObject() {
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-100, 0, 0),
new THREE.Vector3(100, 0, 0)
);
var line = new THREE.Line(geometry, material);
scene.add(line);
}
Draw an ellipse line:
function initObject() {
var curve = new THREE.EllipseCurve(
0, 0, // ax, aY
100, 20, // xRadius, yRadius
0, 2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);
var path = new THREE.Path(curve.getPoints(50));
var geometry = path.createPointsGeometry(50);
var material = new THREE.LineBasicMaterial({ color: 0xff0000 });
// Create the final Object3d to add to the scene
var ellipse = new THREE.Line(geometry, material);
scene.add(ellipse);
}
The circular curve is relatively simple, you only need to modify the radii in the x and y directions to equal values based on the above code.
The rectangle is even simpler. In fact, it is composed of four lines, so there is no need for an example.
Next, start drawing simple faces:
1. Rectangular plane
function initObject() {
var geometry = new THREE.PlaneGeometry(200, 200, 1,1);
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
}
2. Circular surface
function initObject() {
var geometry = new THREE.CircleGeometry(50,32);
var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0, 0, 0);
scene.add(mesh);
}
3. The simple point of the triangular plane can be obtained by a circle, that is, the triangular face is changed to 1, but this triangle is an isosceles triangle.
function initObject() {
var geometry = new THREE.CircleGeometry(50,1);
var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0, 0, 0);
scene.add(mesh);
}
4. If you want to draw a triangular plane of any shape, you can add points through THREE.Shape().lineTo(). Similarly, if you want to draw planes of different shapes, you can add points:
function initObject() {
var rectShape = new THREE.Shape();
rectShape.moveTo(0, 0);
rectShape.lineTo(0, 100);
rectShape.lineTo(150, 100);
rectShape.lineTo(0, 0);
var rectGeom = new THREE.ShapeGeometry(rectShape);
var rectMesh = new THREE.Mesh(rectGeom, new THREE.MeshBasicMaterial({ color: 0xff0000 }));
scene.add(rectMesh);
}
The problem of lines and surfaces is solved, and the next step is the body. If the body is to be built, it can also be built with the ready-made api:
1. First the cube:
function initObject() {
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
}
2. Next is the cone:
var geometry = new THREE.ConeGeometry(50, 200, 320);
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var cone = new THREE.Mesh(geometry, material);
scene.add(cone);
3. Cylinder:
function initObject() {
var geometry = new THREE.CylinderGeometry(50, 50, 200, 32);
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);
}
4. Sphere:
function initObject() {
var geometry = new THREE.IcosahedronGeometry(100, 2);
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
}
Let's take the example of these conventional models first. If you want to implement more complex graphics, you can check the Chinese api description of Three.js.
For other basic knowledge such as lighting, textures, etc., it is recommended to look at the Three.js basic tutorial of webgl Chinese website, and some other api applications, just buy books and read them, and look at the help of apis. More advanced Application requires practice and exploration.