資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 WebGL 和 p5.js 中建立 3D 幾何圖形？
在 WebGL 和 p5.js 中建立 3D 幾何圖形是建立互動式和視覺上有趣的 Web 應用程式的強大方法。透過建立基本形狀、新增紋理、燈光和材質以及轉換 3D 幾何圖形的能力，我們可以建立各種各樣的 3D 圖形和動畫。通過了解 WebGL 和 p5.js 的基礎知識，我們可以為他們的 Web 應用程式建立令人驚歎的 3D 幾何圖形。
3D 形狀建立
第一步是使用 WebGL 和 p5.js 內建函式生成一些 3D 幾何圖形。這些形狀可以使用庫的內建方法生成，例如 sphere()、box() 和 cylinder()。
使用 WebGL
WebGL 中的 gl.drawArrays() 函式可用於構建基本形狀。此函式的三個輸入是圖元型別、起始索引和要顯示的索引數。例如，要建立球體，我們可以使用 gl.TRIANGLES 圖元型別並傳入球體的頂點和索引。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// Set up the scene
const scene = new THREE.Scene();
// Set up the camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
// Set up the renderer
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("canvas"),
});
renderer.setSize(window.innerWidth, window.innerHeight);
// Create the sphere
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
// Render the scene
renderer.render(scene, camera);
</script>
</body>
</html>
使用 p5.js
p5.js 中的 createShape() 函式可用於建立簡單的形狀。CreateShape() 函式接受一個引數，即“要建立的形狀型別”。例如，要建立球體，我們可以使用 createShape(SPHERE) 方法。
示例
<!DOCTYPE html>
<html>
<head>
<title>3D Sphere Example</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
}
function draw() {
background(200);
// Create the sphere
push();
fill(255, 0, 0);
sphere(150);
pop();
}
</script>
</body>
</html>
新增紋理
生成 3D 設計後，我們可以新增紋理以使它們更具視覺吸引力。WebGL 和 p5.js 中的紋理可以使用 gl.texImage2D() 和 texture() API 分別應用於形狀。
使用 WebGL
WebGL 中的 gl.texImage2D() 函式用於從影像檔案生成 2D 紋理。此函式接受許多引數，包括目標、細節級別、內部格式、影像寬度和高度以及影像資料格式和型別。
示例
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
</head>
<body>
<script>
// Set up the scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a cube
var geometry = new THREE.BoxGeometry(3, 3, 3);
var texture = new THREE.TextureLoader().load("https://images.pexels.com/photos/1029604/pexels-photo-1029604.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
var material = new THREE.MeshBasicMaterial({ map: texture });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Position the camera
camera.position.z = 5;
// Render the scene
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
使用 p5.js
p5.js 中的 texture() 函式用於將紋理應用於物件。texture() 函式接受一個引數：紋理影像檔案。
示例
<html>
<head>
<title>p5.js Texture Example</title>
<script src="https://cdn.jsdelivr.net/npm/p5"></script>
<script src="https://cdn.jsdelivr.net/npm/p5/lib/addons/p5.dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5/lib/addons/p5.sound.min.js"></script>
</head>
<body>
<script>
let img;
function preload() {
img = loadImage("https://images.pexels.com/photos/1029604/pexels-photo-1029604.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}
function setup() {
createCanvas(650, 300, WEBGL);
noStroke();
}
function draw() {
background(200);
texture(img);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(100);
}
</script>
</body>
</html>
我們應用了 WebGL 和 p5.js 來構建 3D 幾何圖形並在我們的 Web 應用程式中應用動畫。我們討論了在 WebGL 和 p5.js 中建立 3D 幾何圖形的一些基本概念，包括形狀、紋理、燈光等。
651 次瀏覽
