Threejs：创建纹理

创建纹理

// 导入纹理
const loader = new THREE.TextureLoader();
// 加载所需要的纹理图片
const texture1 = loader.load('./dist/texture/sea.jpg')
const material5 = new THREE.MeshLambertMaterial({ map: texture1, side: THREE.DoubleSide, });
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture1.repeat.set(1, 1);

// 添加物体
const geometry4 = new THREE.BoxGeometry(1, 1, 1);
// const material4 = new THREE.MeshBasicMaterial({color:0xfff888})
const mesh2 = new THREE.Mesh(geometry4, material5);
mesh2.position.z = 2;
scene.add(mesh2);

 纹理的一些显示方法

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./texture/sea.jpg');
// // 设置偏移 
// texture.offset.y = 0.5;
// texture.rotation = Math.PI / 2
// // 重复x
// texture.wrapS = THREE.RepeatWrapping
// // y镜像重复
// texture.wrapT = THREE.MirroredRepeatWrapping;
// 纹理的显示设置--马赛克效果
// texture.minFilter = THREE.NearestFilter;
// texture.magFilter = THREE.NearestFilter;
// // 匹配像素---缩小滤镜
// texture.minFilter = THREE.LinearFilter;
// texture.magFilter = THREE.LinearFilter;

 完整代码：

import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 导入动画库
import gsap from 'gsap'
// 导入dat.gui
import * as dat from 'dat.gui';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';


// 1、创建场景
const scene = new THREE.Scene();
// 2、创建照相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 3、初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 给渲染器开启阴影的计算
renderer.shadowMap.enabled = true;
// 开启场景钟的阴影贴图
renderer.physicallyCorrectLights = true;

// 4、webgl渲染的canvas添加到节点
document.body.appendChild(renderer.domElement);

// 设置坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 5、设置轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();



// 创建盒子
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const meshBasicMaterial = new THREE.MeshBasicMaterial({
    color: "#fff000"
});



// 导入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./texture/sea.jpg');
// // 设置偏移 
// texture.offset.y = 0.5;
// texture.rotation = Math.PI / 2
// // 重复x
// texture.wrapS = THREE.RepeatWrapping
// // y镜像重复
// texture.wrapT = THREE.MirroredRepeatWrapping;
// 纹理的显示设置--马赛克效果
// texture.minFilter = THREE.NearestFilter;
// texture.magFilter = THREE.NearestFilter;
// // 匹配像素---缩小滤镜
// texture.minFilter = THREE.LinearFilter;
// texture.magFilter = THREE.LinearFilter;
// 设置透明材质
const alphatexture = textureLoader.load('./texture/shan.jpg');



// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
    color: "#ffff99",
    map: texture,
    alphaMap: alphatexture,
    transparent: true,
    opacity: 0.5,
    side: THREE.DoubleSide,//BackSide
})
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
// scene.add(cube);
scene.add(cube);


// 创建平面
const planeGeometry = new THREE.PlaneGeometry(20, 20);
const material = new THREE.MeshBasicMaterial({ color: 0x555fff, side: THREE.DoubleSide });
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(0, -3, 0);
plane.rotation.x = -Math.PI / 2;
//可以接收阴影
plane.receiveShadow = true;
scene.add(plane);
// 环境光
const color = 0xFFFfff;
const intensity = 0.5;
const light = new THREE.AmbientLight(color, intensity);
scene.add(light);

// 方向光（直线光源）
const color2 = 0xFFFFFF;
const intensity2 = 0.3;
const light2 = new THREE.DirectionalLight(color2, intensity2);
light2.position.set(10, 10, 10);
light2.castShadow = true;
light2.target.position.set(-5, 0, 0);

scene.add(light2);
scene.add(light2.target);


// 设置动画
function animate() {

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