threejs不僅支持各種texture的導(dǎo)入生成貼圖，還可以利用canvas繪制圖片作為貼圖。這就用到了CanvasTexture，它接受一個(gè)canas對(duì)象。只要我們繪制好canvas，就可以作為貼圖了。這里我們利用一張圖片來(lái)實(shí)現(xiàn)這個(gè)效果。

基礎(chǔ)代碼：

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as Dat from "dat.gui";
// 導(dǎo)入Three.js庫(kù)
// import * as THREE from "three";// 創(chuàng)建場(chǎng)景、相機(jī)、渲染器等
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const control = new OrbitControls(camera, renderer.domElement);// 創(chuàng)建立方體的幾何體
const geometry = new THREE.BoxGeometry(3, 3, 3);// 創(chuàng)建動(dòng)態(tài)Canvas并在其中繪制圖像
const canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 512;
const context = canvas.getContext("2d");
const image = new Image();
image.src = "src/assets/css.jpg"; // 替換為你的圖片路徑
image.onload = function() {context.drawImage(image, 0, 0, canvas.width, canvas.height);// 將Canvas創(chuàng)建為貼圖const texture = new THREE.CanvasTexture(canvas);// 創(chuàng)建貼圖材質(zhì)const materials = [new THREE.MeshBasicMaterial({ color: "#f90" }),new THREE.MeshBasicMaterial({ map: texture }),new THREE.MeshBasicMaterial({ color: "#63a" }),new THREE.MeshBasicMaterial({ color: "#e2d" }),new THREE.MeshBasicMaterial({ color: "#c57" }),new THREE.MeshBasicMaterial({ color: "#f00" })];// 創(chuàng)建幾何體網(wǎng)格對(duì)象const cube = new THREE.Mesh(geometry, materials);// 將網(wǎng)格對(duì)象添加到場(chǎng)景中scene.add(cube);
};// 設(shè)置相機(jī)位置
camera.position.z = 5;// 渲染場(chǎng)景
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();

最后的展示效果如下：

?這里特別要注意貼圖異步問(wèn)題。在我們通過(guò)drawImage繪制圖片的時(shí)候,sence.add(cube)這個(gè)操作要在img.onload()中執(zhí)行，否則圖片會(huì)無(wú)法展示出來(lái)