Buen artículo. Front-end 3D Three.js. Construya un sitio web oficial localmente. Creamos un sitio web oficial para Three.
Ahora creemos el primer recurso ThreeJs.
Aquí todavía elegimos un modo de desarrollo de andamio porque básicamente todos los front-end ahora usan este método de desarrollo. Aquí
creamos un directorio de carpetas como directorio de almacenamiento para nuestro proyecto
. Abra la terminal en este directorio y ingresar
npm init vite@latest
Luego comenzará la conversación sobre el nombre del proyecto. Lo llamo dom01 aquí. De hecho, ¿qué 1 y qué 2 se usan en el nombre? Este número es realmente muy rentable, pero no es nada para que lo estudiemos. Después de presionar Enter, La segunda pregunta nos pregunta qué marco queremos usar
. Una es que no hay necesidad de ningún marco
. Entonces vue y reaccionar deberían ser viejos amigos.
Aquí primero seleccionamos el primero y luego diré tanto vue como reaccionar. Allí
Ya hay tres, que también pueden ser modificados por ts.
Aquí seleccionamos el primero y presionamos Enter por el momento. No se requiere framework
. Luego aquí te preguntará si quieres ts o js. Comencemos con js y don No lo hagas demasiado complicado. Luego presiona
Enter para confirmar que nuestro proyecto está creado.
Luego abre nuestro proyecto con el editor
y aquí lo instalamos. Confía en la entrada del terminal.
npm install
Después de ejecutarlo, se instalarán todas las dependencias de nuestro proyecto.
A través de package.json podemos ver que el comando de inicio lo
ejecuta dev en nuestra terminal
npm run dev
Luego, nuestro navegador accede a la dirección de ejecución del proyecto que nos proporcionó el terminal.
Este es nuestro entorno de ejecución de proyectos más básico.
Luego abrimos el proyecto y vemos el archivo de entrada main.js, y luego encontramos que el contenido en realidad está escrito por InnerHTML. Aquí
, además de importar todos los códigos distintos de style.css, no es necesario eliminarlos directamente.
Luego, cambiemos el
código de referencia de style.css de la siguiente manera
*{
margin: 0;
padding: 0;
}
canvas{
width: 100vw;
height: 100vh;
display: block;
}
Primero, configuramos el estilo global sin márgenes internos y externos. Luego, lienzo es el elemento de nombre de uno de nuestros lienzos.
Primero lo escribimos como tamaño de pantalla completa.
Bien, ahora necesitamos instalar three.js.
Terminamos el proyecto en la terminal y entrar
npm install three
Luego
escribimos el código directamente en el archivo de entrada main.js de la siguiente manera
import './style.css'
import * as THREE from "three";
//创建场景
const scene = new THREE.Scene();
//创建相机
const camera = new THREE.PerspectiveCamera(
45, //视角 视角越大 能看到的范围就越大
window.innerWidth / window.innerHeight,//相机的宽高比 一般和画布一样大最好
0.1, //近平面 相机能看到最近的距离
1000 //远平面 相机能看到最远的距离
);
//c创建一个canvas容器 并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//创建一个几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//创建材质
const material = new THREE.MeshBasicMaterial({
color:0x08ffe });
//创建网格
const cube = new THREE.Mesh(geometry, material);
//将网格添加到场景中
scene.add(cube);
//设置相机位置 这里 我们设置Z轴 大家可以试试 S Y 和 Z 都是可以的
camera.position.z = 5;
//设置相机默认看向哪里 三个 0 代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
Creo que mis anotaciones son relativamente claras aquí, así que no explicaré demasiado. El
concepto de cámara es equivalente a cómo vemos la imagen a través de una cámara.
Después de leer las anotaciones, entenderás completamente cuando leas esta oración.
Entonces nuestro efecto de interfaz Eso es todo,
de hecho es un cubo, pero sabemos que muchas interfaces de gráficos 3D se pueden arrastrar y ver desde diferentes ángulos, pero la nuestra parece estar muerta y no se puede mover
en absoluto.
Aquí podemos escribir una función de rotación.
La llamaré animar aquí.
El código de referencia es el siguiente
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
Nuestra lógica aquí es que seguirá llamándose a sí mismo para garantizar que nunca dejará de girar.
Cada llamada agregará uno a los ejes x e y, de modo que el
elemento continuará animándose
. De esta manera, nuestro cubo se activará. .
