three.js 常见贴图

<template>
	<div id="webgl"></div>
</template>

<script setup lang="ts" name="index">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

//scene
let scene = new THREE.Scene();

//lights
let ambientLight = new THREE.AmbientLight(0xf1f1f1);
scene.add(ambientLight);

let spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position.set(50, 50, 50);
scene.add(spotLight);

//earth
function texture() {
	let earthGeometry = new THREE.SphereGeometry(10, 50, 50);
	let textureLoader = new THREE.TextureLoader();
	let texture = textureLoader.load('images/earth.jpg');
	let material = new THREE.MeshLambertMaterial({ map: texture, });
	let earth = new THREE.Mesh(earthGeometry, material);
	scene.add(earth);
}  // 普通贴图
texture();

function lightMap() {
	let earthGeometry = new THREE.SphereGeometry(10, 50, 50);
	let textureLoader = new THREE.TextureLoader();
	let texture = textureLoader.load('images/earth.jpg');
	let material = new THREE.MeshLambertMaterial({
		lightMap: texture,
		color: 0xffffff,
		lightMapIntensity:0.8
	});
	let earth = new THREE.Mesh(earthGeometry, material);
	scene.add(earth);
}  //光照贴图
// lightMap();

function normalMap() {
	let earthGeometry = new THREE.SphereGeometry(10, 50, 50);
	let textureLoader = new THREE.TextureLoader();
	let texture = textureLoader.load('images/earth.jpg');
	let textureNormal = textureLoader.load('images/earthOther.jpg');
	let material = new THREE.MeshPhongMaterial({
		map: texture,
		normalMap: textureNormal,
		normalScale: new THREE.Vector2(1.2, 1.2)
	});
	let earth = new THREE.Mesh(earthGeometry, material);
	scene.add(earth);
}  // 法线贴图
// normalMap();

function bumpMap() {
	let earthGeometry = new THREE.SphereGeometry(10, 50, 50);
	let textureLoader = new THREE.TextureLoader();
	let texture = textureLoader.load('images/earth.jpg');
	let textureBump = textureLoader.load('images/earthOther.jpg');
	let material = new THREE.MeshPhongMaterial({
		map: texture,
		bumpMap: textureBump,
		bumpScale: 3
	});
	let earth = new THREE.Mesh(earthGeometry, material);
	scene.add(earth);
}  // 凹凸贴图
// bumpMap();

function specularMap() {
	let earthGeometry = new THREE.SphereGeometry(10, 50, 50);
	let textureLoader = new THREE.TextureLoader();
	let texture = textureLoader.load('images/earth.jpg');
	let textureSpecular = textureLoader.load('images/earthOther.jpg');
	let material = new THREE.MeshPhongMaterial({
		map: texture,
		specularMap: textureSpecular,
		shininess: 30,
		specular: 0xff0000
	});
	let earth = new THREE.Mesh(earthGeometry, material);
	scene.add(earth);
}  //高光贴图
// specularMap();

function envMap() {
	let earthGeometry = new THREE.SphereGeometry(10, 50, 50);
	let textureLoader = new THREE.TextureLoader();
	let texture = textureLoader.load('images/earth.jpg');
	let material = new THREE.MeshPhongMaterial({
		envMap: texture,
		reflectivity: 0.5
	});
	let earth = new THREE.Mesh(earthGeometry, material);
	scene.add(earth);
}  //环境贴图
// envMap();

//camera
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 35, 70);
scene.add(camera);

// dom and render
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//orbit Controls
let orbitControls = new OrbitControls(camera, renderer.domElement);

//render loop
let render = function () {
	renderer.render(scene, camera);
	requestAnimationFrame(render);
};
render();
</script>

<style scoped></style>