Topics

Antes, cuando visitaba varios sitios web, me fascinaban los objetos que se movían a primera vista y las animaciones que daban una sensación de profundidad. ¡Guau! En ese momento, pensé: "¡Quiero hacer algo así!".Three.jsoBlenderHubo un momento en que lo intenté.

Me uní a Liberogic con mucha admiración, pero al final... últimamente he estado haciendo un trabajo de implementación más sólido, como desarrollar aplicaciones empresariales y CMS headless (risas). ¡No pretendo menospreciarlos ni nada!

Ahora que estamos en el cuarto año, recuerdo mi anhelo por una "web dinámica" en aquel entonces.WebGLMe gustaría repasar brevemente los conceptos básicos del área circundante.

¿Qué es WebGL?

¿Qué es WebGL?Tecnología para mostrar gráficos 3D en sitios webFunciona en todos los navegadores principales, incluidos Chrome, Firefox y Safari.

Hace mucho tiempo, los complementos como Flash Player eran la norma, pero tenían el problema de ser difíciles de ejecutar en teléfonos inteligentes.

En ese sentido, WebGL tiene soporte nativo, por lo que el siguienteTecnología que fue pionera en la expresión 3D en la era móvilTambién se puede decir que...

De hecho lo probé

Visualización 3D en el navegador con Three.js

Tres.jsUsando JavaScriptUna biblioteca libre de marcas registradas que le permite crear fácilmente contenido 3D.

Primero, en términos de conceptos WebGL, necesitas un Renderer, una Escena y una Cámara.

Renderer es el objeto principal en Three.js.ScenedeCamera, el frustum de la cámaraRenderer3D dentroSceneLa pieza se renderizará (dibujará) como una imagen 2D en el lienzo.

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

La pieza del cubo 3D se crea mediante un objeto de visualización llamado malla. Para crear una malla, es necesario preparar la geometría (forma) y el material (material).

//Geometría (cubo)
const geometría = new THREE.BoxGeometry(100, 100, 100)

//Material (color)
const material = new THREE.MeshNormalMaterial
const caja = new THREE.Mesh(geometría, material);
//Añadir a la escena
scene.add(caja);

//Luz
const luz = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Añadir a la escena
scene.add(luz);

Por último, añade la animación.

¡Esta vez me saltearé la implementación de las partículas circundantes!

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

Cuando renderizas una escena con la cámara, la geometría, el material y la luz configurados, se dibujará en el navegador.

Creación de modelos 3D con Blender

LicuadoraSoftware gratuito, de código abierto e integrado que cubre todo el proceso de producción 3D, desde el modelado 3D, la animación, la renderización, el desarrollo de juegos y la edición de vídeo.Blender por sí solo no puede crear un sitio WebGL.

Blender utiliza el mismo concepto que Three.js, creando formas usando objetos de malla, agregando color y textura usando materiales, ajustando cómo la luz incide y proyecta sombras con luces, y ajustando la posición y dirección de la cámara para realizar la renderización.

Puede crear texturas realistas combinando nodos, como degradados, efectos metálicos y brillos.

referencia:https://www.youtube.com/watch?v=DsNZzUZPhw4

Visualización de modelado 3D creado con Blender en el navegador con Three.js

Exporta el 3D creado en Blender a un archivo .glb e incorpóralo a Three.js.

OrbitControls、GLTFLoader、DRACOLoaderImporte cada función de la biblioteca Three.js.

OrbitControlses una utilidad para controlar la cámara con el ratón,GLTFLoaderyDRACOLoaderson utilidades para cargar modelos 3D en formato GLTF y su versión comprimida, el formato DRACO, respectivamente.

¡La manzana modelada ahora se muestra en el navegador!

Sin embargo, cuando muestro un modelo creado en Blender en un navegador usando Three.js,Diferencias en los entornos de renderizado y compatibilidad de materialesEl color y la textura se verán diferentes según la configuración, por lo que es posible que necesites hacer algunos ajustes para obtener el aspecto que deseas.

Mi trabajo diario implica la integración de CMS y el diseño/construcción de front-end de aplicaciones comerciales, por lo que no tengo mucho contacto con la expresión 3D en mi propio trabajo.

Pero cuando lo juego así, me doy cuenta una vez más de que es realmente divertido.

En aquel entoncesLa red en movimientoQuizás fue debido a su admiración por el pasado que se sintió naturalmente atraído por la tecnología moderna.

Bueno, ¡hoy somos Next y Nuxt nuevamente!

Regresando al sitio, de una forma diferenteLa red en movimientoLo voy a lograr. 🚀