Three.js
Three.js is a 3D engine based on native WebGL packaging and running. Among all WebGL engines, Three.js is the most widely used 3D engine with the most documents in China.
Three.js popularly speaking is the js plugin for making 3D effects
Compatibility issues
Mobile
PC edge
Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge
can be detected using the Detector.js file, which can be downloaded from the Internet, or you can directly copy the code below to
view the version: THREE. REVISION
The Detector.js code is as follows:
/**
* @author alteredq / http://alteredqualia.com/
* @author mr.doob / http://mrdoob.com/
*/
var Detector = {
canvas: !!window.CanvasRenderingContext2D,
webgl: (function () {
try {
var canvas = document.createElement('canvas');
return !!( window.WebGLRenderingContext && ( canvas.getContext('webgl') || canvas.getContext('experimental-webgl') ) );
} catch (e) {
return false;
}
})(),
workers: !!window.Worker,
fileapi: window.File && window.FileReader && window.FileList && window.Blob,
getWebGLErrorMessage: function () {
var element = document.createElement('div');
element.id = 'webgl-error-message';
element.style.fontFamily = 'monospace';
element.style.fontSize = '13px';
element.style.fontWeight = 'normal';
element.style.textAlign = 'center';
element.style.background = '#ffd598';
element.style.color = '#000';
element.style.padding = '1em 0';
element.style.position = 'absolute';
element.style.top = '0';
element.style.left = '0';
element.style.width = '100%';
element.style.zIndex = '10';
if (!this.webgl) {
element.innerHTML = window.WebGLRenderingContext ?
'您的显卡似乎不支持 <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>。<br />点击 <a href="http://get.webgl.org/" style="color:#000">这里</a> 查看如何获取WebGL支持'
:
'您的浏览器似乎不支持 <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>。<br />点击 <a href="http://get.webgl.org/" style="color:#000">这里</a> 查看如何获取WebGL支持';
}
return element;
},
addGetWebGLMessage: function (parameters) {
var parent, id, element;
parameters = parameters || {
};
parent = parameters.parent !== undefined ? parameters.parent : document.body;
id = parameters.id !== undefined ? parameters.id : 'oldie';
element = Detector.getWebGLErrorMessage();
element.id = id;
parent.appendChild(element);
}
};
Use Detector.js to test the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Detector.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
if (Detector.webgl) {
} else {
var warning = Detector.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
</script>
</body>
</html>
effect:
Three.js four major components
Scene
There is only one kind of scene in Threejs, which is represented by THREE.Scene. It is also very simple to construct a scene. As long as new is an object, the code is as follows: var scene = new THREE.Scene();
equivalent to the stage
camera
There are two types of cameras:
- Perspective camera: Perspective projection conforms to people's psychological habits, that is, objects close to the point of view are large, objects far away from the point of view are small, and they disappear when they reach the extreme point and become a vanishing point. Perspective cameras are not really "perspective"
- Orthographic camera: It is the same size far and near.
Renderer
The renderer determines what element of the page should be drawn on the rendering result, and how to draw it. It is
equivalent to a brush, drawing the content on the canvas, which is the scene.
There are two ways of rendering: real-time rendering and offline rendering.
Let’s take a look at the offline rendering first. Think about the last Buddha Lord in "Journey to the West: Conquering the Demons". He is definitely not real. He was rendered by a computer. The picture quality is very high. , And then stitch the pictures into a movie. This is offline rendering. If you do not deal with the picture frame by frame in advance, the movie will be very stuck. The CPU and GPU simply do not have the ability to render such high-quality pictures during playback.
Real-time rendering: It means that the picture needs to be rendered continuously, even if nothing in the picture has changed, it needs to be re-rendered.
object
Objects are things to be drawn into the scene, such as the simplest Geometry cubes or circles, and 3D models can also be imported.
Geometry essence
Looking at the code below, you can see that the cube mesh model Mesh is composed of two parts: a cube geometry geometry and a material material. The cube geometry BoxGeometry is essentially a series of vertices, but the APIBoxGeometry of Threejs encapsulates the details of the vertex generation. Users can use it directly. For example, a cube mesh model has 6 faces, and each face is composed of at least two triangles to form a rectangular plane, and each triangle is composed of three vertices. For a sphere mesh model, a sphere is also formed by triangles. The more triangles there are, the closer the mesh model surface is to a spherical shape.
Reference: Three.js-EdgesGeometry geometry border guide
Code:
<body>
<div id="app"></div>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建相机 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素
camera = new THREE.PerspectiveCamera(105,
window.innerWidth / window.innerHeight, 1, 1000);
// 渲染器
// 把眼睛看到的大千世界绘制到HTML页面中
render = new THREE.WebGLRenderer({
antialias: true
});
// 计算处理dpi
render.setPixelRatio(window.devicePixelRatio);
// 设置画布大小
render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");
// 绘制出一个canvas小面板
app.appendChild(render.domElement);
// 创造一个立方体, 点模型
var geometry = new THREE.CylinderGeometry(10, 10, 20, 15); //创建一个立方体几何对象Geometry
// 创造一个立方体, 网格模型
var material3 = new THREE.MeshBasicMaterial({
color: 0xffff00,
});
var meshs = new THREE.Mesh(geometry, material3);
// 创建物体的边框线
var geoEdges = new THREE.EdgesGeometry(geometry, 1);
var edgesMtl = new THREE.LineBasicMaterial({color: 0xff0000});
var geoLine = new THREE.LineSegments(geoEdges, edgesMtl);
meshs.add(geoLine);
scene.add(meshs);
//执行渲染操作 指定场景、相机作为参数
camera.position.z = 40;
camera.position.y = 20;
camera.position.x = 0;
render.render(scene, camera);
// 产生动效
function animate(){
render.render(scene, camera);
}
setInterval(animate,100);
</script>
</body>
effect:
