threejs贴图系列（一）canvas贴图

最新推荐文章于 2025-06-13 16:14:41 发布

原创最新推荐文章于 2025-06-13 16:14:41 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#贴图

threejs 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在three.js中利用CanvasTexture功能，通过绘制canvas图像并将其转换为贴图，创建具有不同材质的立方体。特别强调了处理图片异步加载的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

threejs不仅支持各种texture的导入生成贴图，还可以利用canvas绘制图片作为贴图。这就用到了CanvasTexture，它接受一个canas对象。只要我们绘制好canvas，就可以作为贴图了。这里我们利用一张图片来实现这个效果。

基础代码：

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as Dat from "dat.gui";
// 导入Three.js库
// import * as THREE from "three";

// 创建场景、相机、渲染器等
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);

// 创建立方体的几何体
const geometry = new THREE.BoxGeometry(3, 3, 3);

// 创建动态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创建为贴图
  const texture = new THREE.CanvasTexture(canvas);
  // 创建贴图材质
  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" })
  ];

  // 创建几何体网格对象
  const cube = new THREE.Mesh(geometry, materials);

  // 将网格对象添加到场景中
  scene.add(cube);
};

// 设置相机位置
camera.position.z = 5;

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

最后的展示效果如下：