1. Document address:
Chinese website:3. Development and learning environment, introducing threejs | Three.js Chinese website
2. The relationship between Three.js and WebGL:
Three.js is the framework ofWebGL. Encapsulates and simplifies WebGL methods. three.js has been further encapsulated and simplified on its basis The development process, I personally think is similar to the relationship between jQuery and native js.
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics in any compatible web browser without the use of plug-ins. It is equivalent to WebGL providing us with a series of graphics interfaces that allow us to use the GPU for browser graphics rendering through JavaScript.
Three.js is a webGL framework that is widely used due to its ease of use. Based on the API interface of WebGL, Three.js provides another layer of encapsulation to simplify the process of creating three-dimensional animation scenes.
3. Advantages of Three.js:
1. Concealing the details of 3D rendering:
Three.js abstracts the details of the WebGL native API and decomposes the 3D scene into grids, materials and light sources (that is, it has built-in some object types commonly used in graphics programming);
2. Object-oriented:Developers can use upper-level JavaScript objects instead of just calling JavaScript functions;
3. Very rich functions:Three.js In addition to encapsulating the original API of WebGL, Three.js also contains many practical built-in objects, which can be easily applied to game development, animation production, slide production, high-resolution models and some Special visual effects production;
4. Very fast:Three.js adopts 3D graphics best practices to ensure extremely high performance without losing usability;
5. Support interaction:WebGL itself does not provide picking (Picking) function (that is, knowing whether the mouse is on an object). Three.js has solidified picking support, which allows you to easily add interactive functions to your application;
6. Contains math library:Three.js has a powerful and easy-to-use math library in which you can perform matrix, projection and vector operations;
7. Built-in file format support:You can use popular 3D modeling software to export text format files and then load them using Three.js, or you can use Three.js' own JSON format or binary format;
8. Very scalable:It’s easy to add new features or perform custom optimizations to Three.js. If you need a special data structure, you only need to encapsulate it into Three.js;
9. Support HTML5 Canvas:Three.js not only supports WebGL, but also supports rendering using Canvas2D, CSS3D and SVG. Fallback to other solutions in non-WebGL compatible environments;
4. Current limitations:
Although Three.js has great advantages, it also has its shortcomings:
1. The official website documentation is rough and not friendly to novices;
2. There is a lack of related resources in China, and most of the information exists in English format;
3. It is not a game engine, and some game-related functions are not packaged in it. If you need related functions, you need to Secondary development;
5. Create a basic 3D graphic
<!DOCTYPE html>
<html>
<head>
<title>Wonanut 3D</title>
<style type="text/css">
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/stats.js"></script>
<script type="text/javascript">
// 场景
var scene = new THREE.Scene();
// 摄像机
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 设置渲染器渲染阴影效果
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
// 坐标轴
var axes = new THREE.AxesHelper(20);
scene.add(axes);
// 平面
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
// 设置投影
plane.receiveShadow = true;
// 物体
var geometry = new THREE.BoxGeometry(4, 4, 4);
var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
cube.position.x = 0;
cube.position.y = 2;
cube.position.z = 0;
// 设置投影
cube.castShadow = true;
scene.add(cube);
// 光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);
// 设置投影
spotLight.castShadow = true;
// 状态监视器
var stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);
renderer.render(scene, camera);
</script>
</body>
</html>
When the browser opens, you will see a rotating cube;
To be continued. . .