Three.js
Three.js es un motor 3D basado en el empaquetado y la ejecución nativos de WebGL. Entre todos los motores WebGL, Three.js es el motor 3D más utilizado con la mayor cantidad de documentos en China.
Three.js es, popularmente hablando, el complemento js para crear efectos 3D
Problemas de compatibilidad
Móvil
Borde de la PC
Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 y Microsoft Edge
se pueden detectar utilizando el archivo Detector.js, que se puede descargar de Internet, o puede copiar directamente el código a continuación para
ver la versión: TRES. REVISIÓN
El código de Detector.js es el siguiente:
/**
* @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);
}
};
Utilice Detector.js para probar el código
<!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>
efecto:
Three.js cuatro componentes principales
Escena
En Threejs solo hay una escena, representada por THREE.Scene, escena para un miembro muy simple, un nuevo objeto puede ser tan largo como el código sea el siguiente: var scene = new THREE.Scene () ;
equivalente a Stage
cámara
Hay dos tipos de cámaras:
- Cámara de perspectiva: La proyección de perspectiva se ajusta a los hábitos psicológicos de las personas, es decir, los objetos cercanos al punto de vista son grandes, los objetos alejados del punto de vista son pequeños y desaparecen cuando llegan al punto extremo y se convierten en un punto de fuga. Las cámaras de perspectiva no son realmente "perspectiva"
- Cámara ortográfica: Tiene el mismo tamaño de lejos y de cerca.
Renderizador
El renderizador determina qué elemento de la página se debe dibujar en el resultado del renderizado y cómo dibujarlo. Es
equivalente a un pincel, que dibuja el contenido en el lienzo, que es la escena.
Hay dos formas de renderizar: renderizado en tiempo real y renderizado sin conexión.
Primero echemos un vistazo al renderizado sin conexión. Piense en el último Señor Buda en "Viaje al Oeste: Conquistando a los Demonios". Definitivamente no es real. Fue renderizado por una computadora. La calidad de la imagen es muy alta., Y luego une las imágenes en una película. Esto es renderizado sin conexión. Si no trata la imagen fotograma a fotograma de antemano, la película se atascará mucho. La CPU y la GPU simplemente no tienen la capacidad de generar imágenes de tan alta calidad durante la reproducción.
Renderizado en tiempo real: Significa que la imagen debe renderizarse continuamente, incluso si nada en la imagen ha cambiado, debe volver a renderizarse.
objeto
Los objetos son elementos que se dibujan en la escena, como los cubos o círculos geométricos más simples, y también se pueden importar modelos 3D.
Esencia de geometría
Si observa el siguiente código, puede ver que el modelo de malla de cubo Mesh está compuesto por geometría de cubo y material material. La geometría de cubo BoxGeometry es esencialmente una serie de vértices, pero APIBoxGeometry de Threejs encapsula los detalles de la generación de vértices. Usuarios puede usarlo directamente. Por ejemplo, un modelo de malla de cubo tiene 6 caras, y cada cara está compuesta por al menos dos triángulos para formar un plano rectangular, y cada triángulo está compuesto por tres vértices. Para un modelo de malla de esfera, una esfera también está formada por triángulos. Cuantos más triángulos haya, más cerca estará la superficie del modelo de malla de una forma esférica.
Referencia: Three.js-EdgesGeometry guía de borde de geometría
Código:
<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>
efecto:
