參考資料
- 創(chuàng)建紋理貼圖
- …
- UV動畫
知識點
注：基于Three.jsv0.155.0文章來源地址http://www.zghlxwxcb.cn/news/detail-712430.html
- 紋理貼圖加載器：TextureLoader
- 紋理對象：Texture
- 顏色貼圖屬性.map
- 頂點UV坐標(biāo)
- 圓形平面設(shè)置紋理貼圖：CircleGeometry
- 設(shè)置陣列模式：THREE.RepeatWrapping
- 網(wǎng)格地面輔助觀察：GridHelper
- 紋理對象.offset屬性
代碼實現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js</title>
</head>
<body>
</body>
<!-- 具體路徑配置，你根據(jù)自己文件目錄設(shè)置，我的是課件中源碼形式 -->
<script type="importmap">
{
"imports": {
"three": "./js/three.module.js",
"three/addons/": "../three.js/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const width = 800
const height = 500
// 場景
const scene = new THREE.Scene();
// ********** 本章知識點示例代碼 Start **********
// 1. 創(chuàng)建紋理貼圖
// 幾何體
const geometry = new THREE.SphereGeometry(100);
// const geometry = new THREE.BoxGeometry(100, 100 ,100);
// 文理貼圖
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./img/6.JPG');
// 材質(zhì)
const material = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture,
});
material.map = texture;
const mesh1 = new THREE.Mesh(geometry, material);
scene.add(mesh1);
// 2. 自定義頂點UV坐標(biāo)
scene.remove(mesh1);
const geometry2 = new THREE.PlaneGeometry(200, 100);
console.log('?? ~ file: 5頂點UV坐標(biāo)、紋理貼圖.html:29 ~ geometry.attributes.uv:', geometry.attributes.uv);
console.log('?? ~ file: 5頂點UV坐標(biāo)、紋理貼圖.html:29 ~ geometry.attributes.position:', geometry.attributes.position);
const textureLoader2 = new THREE.TextureLoader();
const texture2 = textureLoader2.load('./img/6.JPG');
geometry2.attributes.uv = new THREE.Float32BufferAttribute([
0, 1,
1, 1,
0, 0,
1, 0,
], 2);
// 材質(zhì)
const material2 = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture2,
});
const mesh2 = new THREE.Mesh(geometry2, material2);
scene.add(mesh2);
// 3. 圓形平面設(shè)置紋理貼圖
scene.remove(mesh2);
const geometry3 = new THREE.CircleGeometry(100);
const textureLoader3 = new THREE.TextureLoader();
const texture3 = textureLoader3.load('./img/6.JPG');
// 材質(zhì)
const material3 = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture3,
});
const mesh3 = new THREE.Mesh(geometry3, material3);
scene.add(mesh3);
// 4. 紋理對象Texture陣列
scene.remove(mesh3);
const geometry4 = new THREE.PlaneGeometry(400, 400);
const textureLoader4 = new THREE.TextureLoader();
const texture4 = textureLoader4.load('./img/6.JPG');
texture4.wrapS = THREE.RepeatWrapping;
texture4.wrapT = THREE.RepeatWrapping;
texture4.repeat.set(10, 10);
// 材質(zhì)
const material4 = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture4,
side: THREE.DoubleSide,
});
const mesh4 = new THREE.Mesh(geometry4, material4);
mesh4.rotateX(-Math.PI / 2);
scene.add(mesh4);
// 5. 矩形Mesh+背景透明png貼圖
scene.remove(mesh4);
const geometry5 = new THREE.PlaneGeometry(600, 200);
const textureLoader5 = new THREE.TextureLoader();
const texture5 = textureLoader5.load('./img/6.JPG');
texture5.wrapS = THREE.RepeatWrapping;
// 材質(zhì)
const material5 = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture5,
side: THREE.DoubleSide,
transparent: true,
});
const mesh5 = new THREE.Mesh(geometry5, material5);
mesh5.rotateX(-Math.PI / 2);
scene.add(mesh5);
// 網(wǎng)格地面輔助觀察
const grid = new THREE.GridHelper(500, 10);
grid.position.set(0, -0.01, 0);
scene.add(grid);
mesh5.position.y = 1
// ********** 本章知識點示例代碼 End **********
// 光源
const pointLight = new THREE.PointLight(0xffffff, 1.0, 0, 0);
pointLight.position.set(200, 200, 200 );
scene.add(pointLight);
// 環(huán)境光
const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
scene.add( ambientLight );
// 坐標(biāo)系
const axes = new THREE.AxesHelper(200);
scene.add(axes);
// 相機
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(scene.position);
// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
// 控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
renderer.render(scene, camera);
});
// 渲染循環(huán)
function render() {
texture5.offset.x += 0.005;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-712430.html
到了這里，關(guān)于Three.js之頂點UV坐標(biāo)、紋理貼圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
