1. Visão geral do Three.js
Three.js é um mecanismo 3D escrito em linguagem JavaScript que roda no navegador. Ao contrário do WebGL, os desenvolvedores não precisam dominar conhecimentos gráficos avançados ao desenvolver usando Three.js e podem criar uma cena 3D com apenas uma pequena quantidade de código JavaScript. Pode-se dizer que o surgimento do Three.js teve um enorme efeito de promoção no campo do desenvolvimento 3D.
1.1 Introdução ao Three.js
O mecanismo 3D Three.js foi desenvolvido e suas funções são as seguintes.
❑ Crie gráficos 3D de forma rápida e fácil de acordo com as necessidades do desenvolvedor.
❑ Fornece vários tipos de texturas e materiais para renderizar objetos.
❑ Vem com função de cálculo de sombra para obter efeitos de sombra realistas.
❑ Suporta objetos 3D e animação de esqueleto em vários formatos, tornando a cena 3D mais rica.
❑ O mecanismo vem com uma variedade de shaders para obter uma variedade de efeitos realistas.
Three.js é um projeto de código aberto no Github e está se desenvolvendo extremamente rapidamente. Até agora, Three.js se tornou um mecanismo 3D relativamente completo e é amplamente utilizado por desenvolvedores nacionais e estrangeiros.
Antes de aprender formalmente o desenvolvimento do código do Three.js, primeiro entenda o trabalho de preparação.
Baixe todo o projeto Three.js. O diretório de construção armazena Three.jse Three.min.jsesses Three.module.js3 arquivos. three.js não realiza compactação de código e é adequado para depuração. Three.min.js é compactado, mas a depuração é complicada e adequada para a versão final.
Após a conclusão do download, introduza o arquivo Three.js como um arquivo externo em HTML e opere todas as variáveis e métodos da biblioteca por meio da variável global TRÊS. O código introduzido é o seguinte.
<script src="./three.js/three.js-master/build/three.js""></script>
1.2 Exibição do efeito Three.js
As imagens a seguir são capturas de tela feitas usando o mecanismo Three.js3D.
Usando Three.js, você pode desenvolver cenas 3D interessantes e realistas, proporcionando aos usuários um forte impacto visual. Por outro lado, Three.js tem as vantagens de alto encapsulamento e baixa dificuldade de desenvolvimento. Acredito que o Three.js explodirá com mais energia em um futuro próximo.
Dica: Os leitores interessados podem fazer login no site oficial do Three.js para experimentar vários trabalhos excelentes.
2. Primeira introdução aos aplicativos Three.js
Através de casos simples, as etapas básicas de desenvolvimento usando Three.js são apresentadas em detalhes para melhorar ainda mais a compreensão dos leitores sobre o desenvolvimento de programas.
O efeito de execução do Caso 1 é mostrado na figura.
Código do caso 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>第一个Threejs案例</title>
<script src="./three.js/three.js-master/build/three.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#webgl {
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>
</head>
<body>
<div id="webgl"></div>
<script>
// 获取渲染容器
let webgl = document.getElementById("webgl");
// 获取渲染容器的宽高
let webglWidth = webgl.offsetWidth;
let webglHeight = webgl.offsetHeight;
// 创建场景
let scene = new THREE.Scene();
// 创建三维坐标（轴线长度）
// 用于调试：红色：x轴、绿色：y轴、蓝色：z轴
let axes = new THREE.AxesHelper(60);
// 添加三维坐标到场景中
scene.add(axes);
// 设置环境光（十六进制颜色）
let ambient = new THREE.AmbientLight(0x444444);
// 将环境光添加到场景中
scene.add(ambient);
// 设置点光源（十六进制颜色）
let point = new THREE.PointLight(0xffffff);
// 设置点光源的位置（x轴, y轴, z轴）
point.position.set(400, 200, 300);
// 将点光源添加到场景中
scene.add(point);
// 创建立方几何体（x轴, y轴, z轴）
let cubeGeometry = new THREE.BoxGeometry(20,20,20);
// 创建网格基础材质
let cubeMaterial = new THREE.MeshLambertMaterial({
color:0x00FFFF});
// 创建立方体（几何体, 材质）
let cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
// 调整立方体位置（x轴, y轴, z轴）
cube.position.set(0, 0, 0);
// 将立方体添加到场景中
scene.add(cube);
// 创建透视相机（角度, 宽高比, 最近距离, 最远距离）
let camera = new THREE.PerspectiveCamera(60,webglWidth/webglHeight,0.1,2000);
// 设置相机的位置（x轴, y轴, z轴）
camera.position.set(100, 100, 100);
// 将相机指向场景中心
camera.lookAt(scene.position);
// 创建渲染器
let renderer = new THREE.WebGLRenderer();
// 设置渲染器的初始颜色（十六进制颜色, 透明度）
renderer.setClearColor(0xEEEEEE,1);
// 设置渲染器大小（标签宽度, 标签高度）
renderer.setSize(webglWidth,webglHeight);
// 将渲染器添加到渲染容器中（渲染器元素）
webgl.appendChild(renderer.domElement);
// 创建渲染函数
function render(){
// 渲染场景和相机（场景, 相机）
renderer.render(scene,camera);
}
// 调用渲染函数
render();
// 设置窗口变化自适应调整事件
window.onresize = function(){
// 重新获取渲染容器的宽高
webglWidth = webgl.offsetWidth;
webglHeight = webgl.offsetHeight;
// 重置渲染器canvas画布大小
renderer.setSize(webglWidth,webglHeight);
// 重置相机显示范围的宽高比
camera.aspect = webglWidth/webglHeight;
// 更新相机的投影矩阵
camera.updateProjectionMatrix();
// 重新调用渲染函数
render();
};
</script>
</body>
</html>
O efeito da operação do Caso 2 é mostrado na figura.
Código do caso 2:
<html>
<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="./three.js/three.js-master/build/three.js"></script>
<script>
//创建场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//创建渲染器，设置尺寸为窗口尺寸，并将渲染后的元素添加到body
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//创建一个Mesh（绿色的3D立方体），并添加到场景中
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
//设置照相机的位置
camera.position.z = 5;
//浏览器每次渲染的时候更新立方体的旋转角度
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
A ideia principal é criar um novo arquivo html, introduzir o arquivo Three.js como um arquivo externo e, em seguida, operar todo o projeto escrevendo código JavaScript.