1. Descripción general de Three.js
Three.js es un motor 3D escrito en lenguaje JavaScript que se ejecuta en el navegador. A diferencia de WebGL, los desarrolladores no necesitan dominar conocimientos gráficos avanzados cuando desarrollan usando Three.js y pueden crear una escena 3D con solo una pequeña cantidad de código JavaScript. Se puede decir que la aparición de Three.js ha tenido un enorme efecto de promoción en el campo del desarrollo 3D.
1.1 Introducción a Three.js
Se desarrolló el motor 3D Three.js y sus funciones son las siguientes.
❑ Cree gráficos 3D de forma rápida y sencilla según las necesidades del desarrollador.
❑ Proporciona varios tipos de texturas y materiales para renderizar objetos.
❑ Viene con función de cálculo de sombras para lograr efectos de sombra realistas.
❑ Admite objetos 3D y animación esquelética en múltiples formatos, enriquecendo la escena 3D.
❑ El motor viene con una variedad de sombreadores para lograr una variedad de efectos realistas.
Three.js es un proyecto de código abierto en Github y se está desarrollando extremadamente rápido. Hasta ahora, Three.js se ha convertido en un motor 3D relativamente completo y es ampliamente utilizado por desarrolladores nacionales y extranjeros.
Antes de aprender formalmente el desarrollo del código de Three.js, primero comprenda el trabajo de preparación.
Descargue el proyecto Three.js completo. El directorio de compilación almacena Three.jsy Three.min.jsestos Three.module.js3 archivos. three.js no realiza compresión de código y es adecuado para la depuración. Three.min.js está comprimido, pero la depuración es engorrosa y adecuada para el lanzamiento final.
Una vez completada la descarga, introduzca el archivo Three.js como un archivo externo en HTML y opere todas las variables y métodos en la biblioteca a través de la variable global TRES. El código introducido es el siguiente.
<script src="./three.js/three.js-master/build/three.js""></script>
1.2 Visualización del efecto Three.js
Las siguientes imágenes son capturas de pantalla realizadas con el motor Three.js3D.
Con Three.js, puede desarrollar escenas 3D interesantes y realistas, brindando a los usuarios un fuerte impacto visual. Por otro lado, Three.js tiene las ventajas de una alta encapsulación y una baja dificultad de desarrollo. Creo que Three.js explotará con mayor energía en un futuro próximo.
Consejo: los lectores interesados pueden iniciar sesión en el sitio web oficial de Three.js para experimentar varios trabajos excelentes.
2. Primera introducción a las aplicaciones Three.js
A través de casos simples, se presentan en detalle los pasos básicos del desarrollo utilizando Three.js para mejorar aún más la comprensión de los lectores sobre el desarrollo del programa.
El efecto de ejecución del Caso 1 se muestra en la figura.
Código del 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>
El efecto de operación del Caso 2 se muestra en la figura.
Código del 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>
La idea principal es crear un nuevo archivo html, introducir el archivo Three.js como un archivo externo y luego operar todo el proyecto escribiendo código JavaScript.