当前位置：首页 > news >正文

threejs小案例——贴图翻转

news 来源：原创 2025/5/17 7:20:44

简要说明：

该小案例，主要做的是对长方体6个面进行贴图，以及贴图的方向进行调整；

贴图图片：

1、不加旋转的贴图效果：

整体效果

代码运行的整体效果；

完整代码（可运行）：

// 引入threejs
import * as THREE from "three";
// 引入轨道控制器扩展库
import { OrbitControls } from "three/addons/controls/OrbitControls.js";const scene = new THREE.Scene();
// 定义变量
const width = 1167;   // 画布大小
const height = 737;
const bigBox = {len: 822,W: 482,H: 86,
};
const smallBox = {len: 150,W: 50,H: 80,
};
// 外面大盒子
const geometry = new THREE.BoxGeometry(bigBox.len, bigBox.H, bigBox.W); // 形状
const meterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质
meterial.transparent = true;
meterial.opacity = 0.5;const mesh = new THREE.Mesh(geometry, meterial);
scene.add(mesh);
// 线框
borderLine(geometry, mesh)// 里面小盒子
const smallGeometry = new THREE.BoxGeometry(smallBox.W,smallBox.H,smallBox.len
);const textureLoader = new THREE.TextureLoader()let smallMaterial = []
// 顺序不可乱：右左、上下、前后
let arr = ['../../src/direction_image/right.jpg', '../../src/direction_image/left.jpg', '../../src/direction_image/top.jpg','../../src/direction_image/bottom.jpg', '../../src/direction_image/front.jpg', '../../src/direction_image/back.jpg']// 加载所有纹理并创建材质
Promise.all(arr.map(url => {return new Promise((resolve, reject) => {const texture = textureLoader.load(url, () => resolve(texture), error => reject(error));});
})).then((textures) => {// 对顶部和底部纹理进行特殊处理// const topTexture = textures[2]; // 顶部纹理// topTexture.rotation = Math.PI; // 旋转180度// topTexture.center.set(0.5, 0.5); // 设置旋转中心smallMaterial = textures.map((texture, index) => {// if (index === 2) {//     return new THREE.MeshBasicMaterial({//         map: texture,//         side: THREE.DoubleSide//     });// }return new THREE.MeshBasicMaterial({ map: texture });})const smallMesh = new THREE.Mesh(smallGeometry, smallMaterial);smallMesh.position.set(0, -(bigBox.H - smallBox.H - 2) / 2, 0)scene.add(smallMesh);borderLine(smallGeometry, smallMaterial)// 显示坐标轴const axesHelper = new THREE.AxesHelper(500);scene.add(axesHelper);const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 2000);// 创建渲染器对象const renderer = new THREE.WebGLRenderer();// 相机CameraFn(renderer,camera)// 设置相机空间轨道控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener("change", function () {renderer.render(scene, camera);});
})function CameraFn(renderer,camera){camera.position.set(-1000, 800, 800); // 设置相机位置camera.lookAt(0, 10, 0);renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);
}// 各部件外框线
function borderLine(BoxGeometry, Mesh, color = 0xffffff) {let edgesGeometry = new THREE.EdgesGeometry(BoxGeometry)let edgesMaterial = new THREE.LineBasicMaterial({color: color,linewidth: 2})let line = new THREE.LineSegments(edgesGeometry, edgesMaterial)scene.add(line)
}

2、对贴图添加旋转

需求：要求左图和有图，图片上的箭头均指向后方；

目前的左图、右图如下所示：

目前的效果（不加旋转）：

修改后的（添加旋转）：

修改的核心代码：

完整代码（可运行）：

// 引入threejs
import * as THREE from "three";
// 引入轨道控制器扩展库
import { OrbitControls } from "three/addons/controls/OrbitControls.js";const scene = new THREE.Scene();
// 定义变量
const width = 1167;   // 画布大小
const height = 737;
const bigBox = {len: 822,W: 482,H: 86,
};
const smallBox = {len: 150,W: 50,H: 80,
};
// 外面大盒子
const geometry = new THREE.BoxGeometry(bigBox.len, bigBox.H, bigBox.W); // 形状
const meterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质
meterial.transparent = true;
meterial.opacity = 0.5;const mesh = new THREE.Mesh(geometry, meterial);
scene.add(mesh);
// 线框
borderLine(geometry, mesh)// 里面小盒子
const smallGeometry = new THREE.BoxGeometry(smallBox.W,smallBox.H,smallBox.len
);const textureLoader = new THREE.TextureLoader()let smallMaterial = []
// 顺序不可乱：右左、上下、前后
let arr = ['../../src/direction_image/right.jpg', '../../src/direction_image/left.jpg', '../../src/direction_image/top.jpg','../../src/direction_image/bottom.jpg', '../../src/direction_image/front.jpg', '../../src/direction_image/back.jpg']// 加载所有纹理并创建材质
Promise.all(arr.map(url => {return new Promise((resolve, reject) => {const texture = textureLoader.load(url, () => resolve(texture), error => reject(error));});
})).then((textures) => {// 对顶部和底部纹理进行特殊处理const topTexture = textures[0]; // 顶部纹理topTexture.rotation = Math.PI; // 旋转180度topTexture.center.set(0.5, 0.5); // 设置旋转中心smallMaterial = textures.map((texture, index) => {if (index === 0) {return new THREE.MeshBasicMaterial({map: texture,side: THREE.DoubleSide});}   return new THREE.MeshBasicMaterial({ map: texture });})const smallMesh = new THREE.Mesh(smallGeometry, smallMaterial);smallMesh.position.set(0, -(bigBox.H - smallBox.H - 2) / 2, 0)scene.add(smallMesh);borderLine(smallGeometry, smallMaterial)// 显示坐标轴const axesHelper = new THREE.AxesHelper(500);scene.add(axesHelper);const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 2000);// 创建渲染器对象const renderer = new THREE.WebGLRenderer();// 相机CameraFn(renderer,camera)// 设置相机空间轨道控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener("change", function () {renderer.render(scene, camera);});
})function CameraFn(renderer,camera){camera.position.set(-1000, 800, 800); // 设置相机位置camera.lookAt(0, 10, 0);renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);
}// 各部件外框线
function borderLine(BoxGeometry, Mesh, color = 0xffffff) {let edgesGeometry = new THREE.EdgesGeometry(BoxGeometry)let edgesMaterial = new THREE.LineBasicMaterial({color: color,linewidth: 2})let line = new THREE.LineSegments(edgesGeometry, edgesMaterial)scene.add(line)
}