serie de texturas threejs (1) textura de lienzo

Threejs no solo admite la importación de varias texturas para generar texturas, sino que también puede usar lienzos para dibujar imágenes como texturas. Esto utiliza CanvasTexture, que acepta un objeto canas. Mientras dibujemos el lienzo, podemos usarlo como textura. Aquí utilizamos una imagen para lograr este efecto.

Código básico:

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();

El efecto de visualización final es el siguiente:

Aquí se debe prestar especial atención al problema de la asincronía de la textura. Cuando dibujamos una imagen a través de drawImage, la operación de scene.add (cube) debe realizarse en img.onload (); de lo contrario, la imagen no se mostrará.

serie de texturas threejs (1) textura de lienzo

Supongo que te gusta