创建三个 js webgl 渲染器 - Javascript

WebGL是一种JavaScript API，用于在Web浏览器中呈现交互式3D和2D图形。在本文中，我们将介绍如何创建三个不同类型的WebGL渲染器。

1. 基础渲染器

基础渲染器是最简单的WebGL渲染器。它只是在屏幕上绘制颜色矩形。以下是如何创建基础渲染器的代码片段：

// 获取渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器添加到HTML文档中
document.body.appendChild(renderer.domElement);

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建矩形
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({ color: "#ff0000" });
const rectangle = new THREE.Mesh(geometry, material);

// 将矩形添加到场景中
scene.add(rectangle);

// 渲染场景和相机
renderer.render(scene, camera);

2. 灯光渲染器

灯光渲染器是一种在场景中添加光源的WebGL渲染器。以下是如何创建灯光渲染器的代码片段：

// 获取渲染器、场景和相机，与基础渲染器相同

// 添加平行光
const light = new THREE.DirectionalLight("#ffffff", 1);
light.position.set(0, 0, 1);
scene.add(light);

// 添加立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshPhongMaterial({ color: "#ff0000" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

// 渲染场景和相机
renderer.render(scene, camera);

3. 纹理渲染器

纹理渲染器是一种使用图片或纹理贴图在WebGL场景中绘制物体的渲染器。以下是如何创建纹理渲染器的代码片段：

// 获取渲染器、场景和相机，与基础渲染器相同

// 添加纹理贴图
const loader = new THREE.TextureLoader();
loader.load("texture.jpg", (texture) => {
  const imageMaterial = new THREE.MeshBasicMaterial({ map: texture });
  const triangleGeometry = new THREE.Geometry();
  triangleGeometry.vertices.push(new THREE.Vector3(-1, -1, 0));
  triangleGeometry.vertices.push(new THREE.Vector3(1, -1, 0));
  triangleGeometry.vertices.push(new THREE.Vector3(0, 1, 0));
  triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
  triangleGeometry.computeVertexNormals();
  const triangle = new THREE.Mesh(triangleGeometry, imageMaterial);
  scene.add(triangle);
});

// 渲染场景和相机
renderer.render(scene, camera);

以上是创建三种不同类型的WebGL渲染器的代码片段。希望能够帮助你更好地了解WebGL的使用。