Three.js
Three.js ist eine 3D-Engine, die auf nativen WebGL-Paketen basiert und ausgeführt wird. Unter allen WebGL-Engines ist Three.js die am häufigsten verwendete 3D-Engine mit den meisten Dokumenten in China.
Three.js ist im Volksmund das js-Plugin zum Erstellen von 3D-Effekten
Kompatibilitätsprobleme
Handy, Mobiltelefon
PC-Kante
Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 und Microsoft Edge
können mithilfe der Detector.js-Datei erkannt werden, die aus dem Internet heruntergeladen werden kann, oder Sie können den folgenden Code direkt in kopieren
Sehen Sie sich die Version an: DREI. ÜBERARBEITUNG
Der Detector.js-Code lautet wie folgt:
/**
* @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);
}
};
Verwenden Sie Detector.js, um den Code zu testen
<!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>
bewirken:
Drei.js vier Hauptkomponenten
Szene
In Threejs gibt es nur eine Szene, dargestellt durch THREE.Scene, Szene für ein sehr einfaches Mitglied. Ein neues Objekt kann so lang sein, wie der Code lautet: var scene = new THREE.Scene () ;
entspricht Stage
Kamera
Es gibt zwei Arten von Kameras:
- Perspektivische Kamera: Die perspektivische Projektion entspricht den psychologischen Gewohnheiten der Menschen, dh Objekte in der Nähe des Blickwinkels sind groß, Objekte in der Nähe des Blickwinkels sind klein und verschwinden, wenn sie den äußersten Punkt erreichen und zu einem Fluchtpunkt werden. Perspektivkameras sind nicht wirklich "Perspektive"
- Orthographische Kamera: Sie ist nah und fern gleich groß.
Renderer
Der Renderer legt fest, welches Element der Seite im Rendering-Ergebnis gezeichnet werden soll und wie es gezeichnet werden soll. Dies
entspricht einem Pinsel, bei dem der Inhalt auf der Leinwand gezeichnet wird, bei der es sich um die Szene handelt.
Es gibt zwei Möglichkeiten zum Rendern: Echtzeit-Rendering und Offline-Rendering.
Schauen wir uns zuerst das Offline-Rendering an. Denken Sie an den letzten Buddha-Lord in "Reise in den Westen: Eroberung der Dämonen". Er ist definitiv nicht real. Er wurde von einem Computer gerendert. Die Bildqualität ist sehr hoch Dann nähen Sie die Bilder in einen Film. Dies ist Offline-Rendering. Wenn Sie das Bild nicht Frame für Frame im Voraus bearbeiten, bleibt der Film sehr hängen. Die CPU und die GPU sind einfach nicht in der Lage, solche qualitativ hochwertigen Bilder während der Wiedergabe zu rendern.
Echtzeit-Rendering: Dies bedeutet, dass das Bild kontinuierlich gerendert werden muss, auch wenn sich nichts im Bild geändert hat, es muss neu gerendert werden.
Objekt
Objekte sind Dinge, die in die Szene gezeichnet werden sollen, z. B. die einfachsten Geometriewürfel oder -kreise, und 3D-Modelle können ebenfalls importiert werden.
Geometrie Essenz
Wenn Sie sich den folgenden Code ansehen, sehen Sie, dass das Würfelnetzmodell Mesh aus Würfelgeometriegeometrie und Materialmaterial besteht. Die Würfelgeometrie BoxGeometry besteht im Wesentlichen aus einer Reihe von Scheitelpunkten, aber die APIBoxGeometry von Threejs kapselt die Details der Scheitelpunktgenerierung. Benutzer kann es direkt verwenden. Beispielsweise hat ein Würfelnetzmodell 6 Flächen, und jede Fläche besteht aus mindestens zwei Dreiecken, um eine rechteckige Ebene zu bilden, und jedes Dreieck besteht aus drei Eckpunkten. Bei einem Kugelnetzmodell wird eine Kugel auch aus Dreiecken gebildet. Je mehr Dreiecke vorhanden sind, desto näher ist die Oberfläche des Netzmodells an einer Kugelform.
Referenz: Three.js-EdgesGeometry Geometrie-Randführung
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>
bewirken:
