three.js之加载模型、贴图
加载各种模型
<canvas id="mainCanvas"></canvas>
<script type="importmap">
{
"imports": {
"three": "./js/build/three.module.js",
"three/addons/": "./js/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import { TrackballControls } from "three/addons/controls/TrackballControls.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { initRenderer, initPerspectiveCamera, initAmbientLight, initSpotLight } from "./init.js";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
import { MTLLoader } from "three/addons/loaders/MTLLoader.js";
import { ColladaLoader } from "three/addons/loaders/ColladaLoader.js";
import { STLLoader } from "three/addons/loaders/STLLoader.js";
import { VTKLoader } from "three/addons/loaders/VTKLoader.js";
import { PDBLoader } from "three/addons/loaders/PDBLoader.js";
import { PLYLoader } from "three/addons/loaders/PLYLoader.js";
import { VRMLLoader } from "three/addons/loaders/VRMLLoader.js";
import { TDSLoader } from "three/addons/loaders/TDSLoader.js";
import { ThreeMFLoader } from "three/addons/loaders/3MFLoader.js";
import { AMFLoader } from "three/addons/loaders/AMFLoader.js";
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
import { GCodeLoader } from "three/addons/loaders/GCodeLoader.js";
import { SVGLoader } from "three/addons/loaders/SVGLoader.js";
import { FBXLoader } from "three/addons/loaders/FBXLoader.js";
function init() {
const gui = new GUI();
const renderer = initRenderer("mainCanvas");
let scene = new THREE.Scene();
const camera = initPerspectiveCamera();
scene.add(camera);
const ambientLight = initAmbientLight();
scene.add(ambientLight);
const spotLight = initSpotLight();
scene.add(spotLight);
let knot = createMesh(new THREE.TorusKnotGeometry(10, 1, 64, 8, 2, 3));
scene.add(knot);
const controls = setupControls();
let step = 0;
let loadedMesh;
render();
function render() {
knot.rotation.y = step += 0.01;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function setupControls() {
const controls = new (function () {
this.radius = knot.geometry.parameters.radius;
this.tube = 0.3;
this.radialSegments = knot.geometry.parameters.radialSegments;
this.tubularSegments = knot.geometry.parameters.tubularSegments;
this.p = knot.geometry.parameters.p;
this.q = knot.geometry.parameters.q;
this.redraw = function () {
scene.remove(knot);
knot = createMesh(
new THREE.TorusKnotGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), Math.round(controls.p), Math.round(controls.q))
);
scene.add(knot);
};
this.saveMesh = function () {
const result = knot.toJSON();
sessionStorage.setItem("mesh", JSON.stringify(result));
console.log(sessionStorage.getItem("mesh"));
};
this.loadMesh = function () {
scene.remove(loadedMesh);
const json = sessionStorage.getItem("mesh");
if (json) {
const loadedGeometry = JSON.parse(json);
const loader = new THREE.ObjectLoader();
loadedMesh = loader.parse(loadedGeometry);
loadedMesh.position.x -= 40;
scene.add(loadedMesh);
}
};
this.exportScene = function () {
sessionStorage.setItem("scene", JSON.stringify(scene.toJSON()));
console.log(sessionStorage.getItem("scene"));
};
this.clearScene = function () {
scene = new THREE.Scene();
scene.add(ambientLight);
scene.add(spotLight);
};
this.importScene = function () {
const json = sessionStorage.getItem("scene");
if (json) {
const loadedSceneAsJson = JSON.parse(json);
const loader = new THREE.ObjectLoader();
scene = loader.parse(loadedSceneAsJson);
}
};
this.loadFromJson = function () {
const loader = new THREE.ObjectLoader();
loader.load("./models/lightmap/lightmap.json", function (obj) {
computeSize(obj);
console.log("obj scale", obj.scale);
computeSize(scene);
obj.scale.set(5, 5, 5);
scene.add(obj);
});
};
this.loadFromObj = function () {
// OBJ加载器 用于加载 .obj 资源的加载器。
// OBJ 文件格式是一种简单的数据格式， 这种格式以人类可读的形式来表示3D几何体，即每个顶点的位置、每个纹理坐标顶点的UV位置、顶点法线、 将使每个多边形定义为顶点列表的面以及纹理顶点。
const loader = new OBJLoader();
loader.load("./models/tree.obj", function (obj) {
computeSize(obj);
console.log("obj scale", obj.scale);
computeSize(scene);
obj.scale.set(20, 20, 20);
scene.add(obj);
});
};
this.loadFromObjMtl = function () {
const mtlLoader = new MTLLoader();
mtlLoader.load("./models/walt/WaltHead.mtl", function (materials) {
materials.preload();
const loader = new OBJLoader();
loader.load("./models/walt/WaltHead.obj", function (obj) {
computeSize(obj);
console.log("obj scale", obj.scale);
computeSize(scene);
obj.scale.set(0.2, 0.2, 0.2);
scene.add(obj);
});
});
};
this.loadFromCollada = function () {
const loader = new ColladaLoader();
loader.load("./models/collada/elf/elf.dae", function (res) {
console.log(res);
computeSize(res.scene);
res.scene.scale.set(2, 2, 2);
scene.add(res.scene);
});
};
this.loadFromStl = function () {
const loader = new STLLoader();
loader.load("./models/stl/ascii/slotted_disk.stl", function (geometry) {
const mat = new THREE.MeshStandardMaterial({
color: 0xffffff,
metalness: 1,
roughness: 0.5,
});
const mesh = new THREE.Mesh(geometry, mat);
mesh.rotation.x = -0.5 * Math.PI;
mesh.scale.set(20, 20, 20);
computeSize(mesh);
computeSize(scene);
scene.add(mesh);
});
};
this.loadFromVtk = function () {
const loader = new VTKLoader();
loader.load("./models/vtk/liver.vtk", function (geometry) {
const mat = new THREE.MeshNormalMaterial();
geometry.center();
geometry.computeVertexNormals();
const mesh = new THREE.Mesh(geometry, mat);
mesh.scale.set(0.3, 0.3, 0.3);
computeSize(mesh);
computeSize(scene);
scene.add(mesh);
});
};
this.loadFromPdb = function () {
const loader = new PDBLoader();
loader.load("./models/diamond.pdb", function (geometries) {
const group = new THREE.Object3D();
const geometryAtoms = geometries.geometryAtoms;
for (let i = 0; i < geometryAtoms.attributes.position.count; i++) {
const startPosition = new THREE.Vector3();
startPosition.x = geometryAtoms.attributes.position.getX(i);
startPosition.y = geometryAtoms.attributes.position.getY(i);
startPosition.z = geometryAtoms.attributes.position.getZ(i);
const color = new THREE.Color();
color.r = geometryAtoms.attributes.color.getX(i);
color.g = geometryAtoms.attributes.color.getY(i);
color.b = geometryAtoms.attributes.color.getZ(i);
const material = new THREE.MeshPhongMaterial({
color: color,
});
const sphere = new THREE.SphereGeometry(0.2);
const mesh = new THREE.Mesh(sphere, material);
mesh.position.copy(startPosition);
group.add(mesh);
}
const geometryBonds = geometries.geometryBonds;
for (let j = 0; j < geometryBonds.attributes.position.count; j += 2) {
const startPosition = new THREE.Vector3();
startPosition.x = geometryBonds.attributes.position.getX(j);
startPosition.y = geometryBonds.attributes.position.getY(j);
startPosition.z = geometryBonds.attributes.position.getZ(j);
const endPosition = new THREE.Vector3();
endPosition.x = geometryBonds.attributes.position.getX(j + 1);
endPosition.y = geometryBonds.attributes.position.getY(j + 1);
endPosition.z = geometryBonds.attributes.position.getZ(j + 1);
const path = new THREE.CatmullRomCurve3([startPosition, endPosition]);
const tube = new THREE.TubeGeometry(path, 1, 0.04);
const material = new THREE.MeshPhongMaterial({
color: 0xcccccc,
});
const mesh = new THREE.Mesh(tube, material);
group.add(mesh);
}
computeSize(scene);
computeSize(group);
group.scale.set(2, 2, 2);
scene.add(group);
});
};
this.loadFromPly = function () {
const loader = new PLYLoader();
loader.load("./models/ply/ascii/dolphins.ply", function (geometry) {
const material = new THREE.PointsMaterial({
color: 0xffffff,
size: 1,
opacity: 0.6,
transparent: true,
blending: THREE.AdditiveBlending,
depthWrite: false,
map: generateSprite(),
});
const group = new THREE.Points(geometry, material);
group.scale.set(0.05, 0.05, 0.05);
computeSize(scene);
computeSize(group);
scene.add(group);
});
};
this.loadFromVrml = function () {
const loader = new VRMLLoader();
loader.load("./models/house.wrl", function (model) {
computeSize(model);
console.log;
computeSize(scene);
model.scale.set(2, 2, 2);
scene.add(model);
});
};
this.loadFromTds = function () {
const loader = new TDSLoader();
loader.load("./models/3ds/portalgun/portalgun.3ds", function (group) {
computeSize(group);
group.scale.set(20, 20, 20);
scene.add(group);
});
};
this.loadFrom3mf = function () {
const loader = new ThreeMFLoader();
loader.load("./models/truck.3mf", function (group) {
computeSize(group);
scene.add(group);
});
};
this.loadFromAmf = function () {
const loader = new AMFLoader();
loader.load("./models/rook.amf", function (group) {
computeSize(group);
group.scale.set(5, 5, 5);
scene.add(group);
});
};
this.loadFromDrc = function () {
// DRACOLoader 一个用于加载经过Draco压缩的图形库。
// Draco是一个开源的库，主要用于压缩和解压缩三维模型及点云。 以客户端上解压缩为代价，显著减少压缩的图形。
// 独立的Draco文件后缀为.drc，其中包含顶点坐标，法线，颜色和其他的属性，不包含材质，纹理，动画和节点结构。
const loader = new DRACOLoader();
loader.setDecoderPath("./js/jsm/libs/draco/");
loader.setDecoderConfig({ type: "js" });
loader.preload();
loader.load("./models/bunny.drc", function (geometry) {
geometry.computeVertexNormals();
geometry.computeBoundingSphere();
geometry.computeBoundingBox();
const mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
computeSize(mesh);
mesh.scale.set(100, 100, 100);
scene.add(mesh);
});
};
this.loadFromGcode = function () {
const loader = new GCodeLoader();
loader.load("./models/benchy.gcode", function (obj) {
computeSize(obj);
obj.scale.set(0.1, 0.1, 0.1);
scene.add(obj);
});
};
this.loadFromSvg = function () {
// SVGLoader 用于加载.svg资源的加载器
// 可伸缩向量图形是XML形式的矢量图形格式，用来描述二维矢量图形并支持交互和动画。
const loader = new SVGLoader();
loader.load("./models/tiger.svg", function (data) {
const paths = data.paths;
const group = new THREE.Group();
group.scale.multiplyScalar(0.1);
group.scale.y *= -1;
for (let i = 0; i < paths.length; i++) {
const path = paths[i];
const material = new THREE.MeshBasicMaterial({
color: path.color,
side: THREE.DoubleSide,
depthWrite: false,
});
const shapes = path.toShapes(true);
for (let j = 0; j < shapes.length; j++) {
const shape = shapes[j];
const geometry = new THREE.ShapeGeometry(shape);
const mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
}
}
computeSize(group);
scene.add(group);
});
};
this.loadFromFbx = function () {
const fbxloader = new FBXLoader();
fbxloader.load("./models/Samba Dancing.fbx", function (obj) {
console.log(obj);
computeSize(obj);
obj.scale.set(0.1, 0.1, 0.1);
scene.add(obj);
});
};
})();
const ioGui = gui.addFolder("Save & Load");
ioGui.add(controls, "exportScene");
ioGui.add(controls, "clearScene");
ioGui.add(controls, "importScene");
ioGui.add(controls, "saveMesh");
ioGui.add(controls, "loadMesh");
ioGui.add(controls, "loadFromJson");
ioGui.add(controls, "loadFromObj");
ioGui.add(controls, "loadFromObjMtl");
ioGui.add(controls, "loadFromCollada");
ioGui.add(controls, "loadFromStl");
ioGui.add(controls, "loadFromVtk");
ioGui.add(controls, "loadFromPdb");
ioGui.add(controls, "loadFromPly");
ioGui.add(controls, "loadFromVrml");
ioGui.add(controls, "loadFromTds");
ioGui.add(controls, "loadFrom3mf");
ioGui.add(controls, "loadFromAmf");
ioGui.add(controls, "loadFromDrc");
ioGui.add(controls, "loadFromGcode");
ioGui.add(controls, "loadFromSvg");
ioGui.add(controls, "loadFromFbx");
const meshGui = gui.addFolder("mesh");
meshGui.add(controls, "radius", 0, 40).onChange(controls.redraw);
meshGui.add(controls, "tube", 0, 40).onChange(controls.redraw);
meshGui.add(controls, "radialSegments", 1, 400).step(1).onChange(controls.redraw);
meshGui.add(controls, "tubularSegments", 1, 20).step(1).onChange(controls.redraw);
meshGui.add(controls, "p", 1, 10).step(1).onChange(controls.redraw);
meshGui.add(controls, "q", 1, 15).step(1).onChange(controls.redraw);
return controls;
}
}
init();
function createMesh(geom) {
const meshMaterial = new THREE.MeshBasicMaterial({
vertexColors: false,
wireframe: true,
wireframeLinewidth: 2,
color: 0xaaaaaa,
});
meshMaterial.side = THREE.DoubleSide;
const mesh = new THREE.Mesh(geom, meshMaterial);
mesh.position.set(20, 0, 0);
return mesh;
}
function computeSize(obj) {
const cbox = new THREE.Box3().setFromObject(obj);
const size = cbox.getSize(new THREE.Vector3());
if (obj instanceof THREE.Scene) {
console.log("scene size", size);
} else {
console.log("obj size", size);
}
}
function generateSprite() {
const canvas = document.createElement("canvas");
canvas.width = 16;
canvas.height = 16;
const context = canvas.getContext("2d");
const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, "rgba(255,255,255,1)");
gradient.addColorStop(0.2, "rgba(0,255,255,1)");
gradient.addColorStop(0.4, "rgba(0,0,64,1)");
gradient.addColorStop(1, "rgba(0,0,0,1)");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
}
</script>加载贴图
<canvas id="mainCanvas"></canvas>
<script type="importmap">
{
"imports": {
"three": "./js/build/three.module.js",
"three/addons/": "./js/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { TrackballControls } from "three/addons/controls/TrackballControls.js";
import { DDSLoader } from "three/addons/loaders/DDSLoader.js";
import { PVRLoader } from "three/addons/loaders/PVRLoader.js";
import { TGALoader } from "three/addons/loaders/TGALoader.js";
import { KTXLoader } from "three/addons/loaders/KTXLoader.js";
import { EXRLoader } from "three/addons/loaders/EXRLoader.js";
import { RGBELoader } from "three/addons/loaders/RGBELoader.js";
import { initRenderer, initPerspectiveCamera, initAmbientLight, initSpotLight, addPlane, addMaterialSettings, addSpecificMaterialSettings } from "./init.js";
function init() {
const gui = new GUI();
const renderer = initRenderer("mainCanvas");
let scene = new THREE.Scene();
const camera = initPerspectiveCamera();
scene.add(camera);
const ambientLight = initAmbientLight();
scene.add(ambientLight);
const spotLight = initSpotLight();
scene.add(spotLight);
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
const trackballControls = new TrackballControls(camera, renderer.domElement);
const groundPlane = addPlane({ width: 200, height: 200 });
groundPlane.position.set(0, -10, 0);
scene.add(groundPlane);
const textureLoader = new THREE.TextureLoader();
let meshs = addGeometrys([
textureLoader.load("./textures/general/metal-rust.jpg"),
textureLoader.load("./textures/general/floor-wood.jpg"),
textureLoader.load("./textures/general/brick-wall.jpg"),
]);
const controls = setupControls();
const clock = new THREE.Clock();
render();
function render() {
trackballControls.update(clock.getDelta());
for (let i in meshs) {
if (i == 0) {
meshs[i].rotation.x += 0.01;
} else if (i == meshs.length - 1) {
meshs[i].rotation.z += 0.01;
} else {
meshs[i].rotation.y += 0.01;
}
}
let cubeCamera = null;
scene.traverse(function (obj) {
if (obj instanceof THREE.CubeCamera) {
cubeCamera = obj;
}
});
if (cubeCamera != null) {
meshs[0].visible = false;
cubeCamera.update(renderer, scene);
meshs[1].visible = true;
}
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function addGeometrys(textures) {
const geoms = [new THREE.IcosahedronGeometry(8, 0), new THREE.SphereGeometry(5, 20, 20), new THREE.BoxGeometry(10, 10, 10)];
const meshs = [];
if (textures.length == 3) {
for (let i in textures) {
//map : Texture 颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。 纹理贴图颜色由漫反射颜色.color调节。
const mat = new THREE.MeshStandardMaterial({
map: textures[i],
metalness: 0.2,
roughness: 0.07,
});
const mesh = new THREE.Mesh(geoms[i], mat);
mesh.castShadow = true;
scene.add(mesh);
meshs.push(mesh);
}
} else if (textures.length == 1) {
for (let i in geoms) {
const mat = new THREE.MeshStandardMaterial({
map: textures[0],
metalness: 0.2,
roughness: 0.07,
});
const mesh = new THREE.Mesh(geoms[i], mat);
mesh.castShadow = true;
scene.add(mesh);
meshs.push(mesh);
}
} else if (textures.length == 0) {
for (let i in geoms) {
const mat = new THREE.MeshStandardMaterial({
color: 0x00ffff,
metalness: 0.2,
roughness: 0.07,
});
const mesh = new THREE.Mesh(geoms[i], mat);
mesh.castShadow = true;
scene.add(mesh);
meshs.push(mesh);
}
}
for (let i in meshs) {
if (i == 0) {
meshs[i].position.x = -20;
} else if (i == meshs.length - 1) {
meshs[i].position.x = 20;
}
}
return meshs;
}
function setupControls() {
const controls = new (function () {
this.clearScene = function () {
scene = new THREE.Scene();
scene.add(ambientLight);
scene.add(spotLight);
scene.add(groundPlane);
};
this.loadDds = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
const textureLoader = new DDSLoader();
const texture = textureLoader.load("./textures/dds/test-dxt1.dds");
meshs = addGeometrys([texture]);
};
this.loadPvr = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
console.log("pvrtc", renderer.extensions.get("WEBGL_compressed_texture_pvrtc"));
const textureLoader = new PVRLoader();
const texture = textureLoader.load("./textures/pvr/tex_base.pvr"); //显示纯黑色，似乎贴图未加载
meshs = addGeometrys([texture]);
};
this.loadTga = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
const textureLoader = new TGALoader();
meshs = addGeometrys([textureLoader.load("./textures/tga/dried_grass.tga"), textureLoader.load("./textures/tga/grass.tga"), textureLoader.load("./textures/tga/moss.tga")]);
};
this.loadKtx = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
const textureLoader = new KTXLoader();
const format = determineFormat();
console.log(format);
let texture;
switch (format) {
case "astc":
texture = textureLoader.load("./textures/ktx/disturb_ASTC4x4.ktx");
break;
case "etc1":
texture = textureLoader.load("./textures/ktx/disturb_ETC1.ktx");
break;
case "s3tc":
texture = textureLoader.load("./textures/ktx/disturb_BC1.ktx");
break;
case "pvrtc":
texture = textureLoader.load("./textures/ktx/disturb_PVR2bpp.ktx");
break;
}
meshs = addGeometrys([texture]);
};
this.loadExr = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
const textureLoader = new EXRLoader();
const texture = textureLoader.load("./textures/exr/Rec709.exr");
meshs = addGeometrys([texture]);
};
this.loadRgbe = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
const textureLoader = new RGBELoader();
textureLoader.load("./textures/hdr/dani_cathedral_oBBC.hdr", function (texture) {
texture.flipY = true;
meshs = addGeometrys([texture]);
});
};
this.loadBumpmap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
// 用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。
// 凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。
// bumpScale : Float 凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。
const texture = textureLoader.load("./textures/stone/stone.jpg");
meshs = addGeometrys([texture]);
meshs[2].material.bumpMap = textureLoader.load("./textures/stone/stone-bump.jpg"); //凸凹贴图
meshs[2].material.bumpScale = 1;
};
this.loadNormalmap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
// 用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。
// 法线贴图不会改变曲面的实际形状，只会改变光照。
// normalScale : Vector2 法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）
const texture = textureLoader.load("./textures/general/plaster.jpg");
meshs = addGeometrys([texture]);
meshs[2].material.normalMap = textureLoader.load("./textures/general/plaster-normal.jpg"); //法线贴图
};
this.loadDisplacementMap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
// 位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象，以及充当真实的几何体。
// 位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。
// displacementScale : Float 位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。
// displacementBias : Float 位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。
const texture = textureLoader.load("./textures/w_c.jpg");
meshs = addGeometrys([texture]);
meshs[1].material.displacementMap = textureLoader.load("./textures/w_d.png"); //位移贴图
};
this.loadAoMap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
// aoMap : Texture 该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。
// aoMapIntensity : Float 环境遮挡效果的强度。默认值为1。零是不遮挡效果。
meshs = addGeometrys([]);
meshs[2].material.aoMap = textureLoader.load("./textures/ambient.png");
meshs[2].material.aoMapIntensity = 1;
};
this.loadLightMap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
// lightMap : Texture 光照贴图。默认值为null。lightMap需要第二组UV。
// lightMapIntensity : Float 烘焙光的强度。默认值为1。
meshs = addGeometrys([]);
meshs[2].material.lightMap = textureLoader.load("./textures/lightmap/lightmap.png");
};
this.loadMetalRoughnessMap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
scene.remove(groundPlane);
const urls = [
"./textures/cubemap/colloseum/right.png",
"./textures/cubemap/colloseum/left.png",
"./textures/cubemap/colloseum/top.png",
"./textures/cubemap/colloseum/bottom.png",
"./textures/cubemap/colloseum/front.png",
"./textures/cubemap/colloseum/back.png",
];
const cubeLoader = new THREE.CubeTextureLoader();
//背景
scene.background = cubeLoader.load(urls);
meshs = addGeometrys([]);
// metalnessMap : Texture 该纹理的蓝色通道用于改变材质的金属度。
meshs[0].material.metalnessMap = textureLoader.load("./textures/engraved/roughness-map.jpg");
// roughnessMap : Texture 该纹理的绿色通道用于改变材质的粗糙度。
meshs[2].material.roughnessMap = textureLoader.load("./textures/engraved/roughness-map.jpg");
};
this.loadAlphaMap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
// alphaMap: Texture alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）
// alphaTest: Float 设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。默认值为0。
meshs = addGeometrys([]);
meshs[0].material.alphaMap = textureLoader.load("./textures/alpha/partial-transparency.png");
meshs[0].material.alphaTest = 0.5;
};
this.loadEmissiveMap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
// emissive : Color 材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。
// emissiveMap : Texture 设置放射（发光）贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。
// emissiveIntensity : Float 放射光强度。调节发光颜色。默认为1。
const material = new THREE.MeshStandardMaterial({
emissive: 0xffffff,
emissiveMap: textureLoader.load("./textures/emissive/lava.png"),
normalMap: textureLoader.load("./textures/emissive/lava-normals.png"),
metalnessMap: textureLoader.load("./textures/emissive/lava-smoothness.png"),
metalness: 1,
roughness: 0.4,
normalScale: new THREE.Vector2(4, 4),
});
meshs = addGeometrys([]);
meshs[0].material = material;
meshs[1].material = material;
};
this.loadSpecularMap = function () {
for (let i in meshs) {
scene.remove(meshs[i]);
}
// specularMap : Texture 镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为null。
const material = new THREE.MeshPhongMaterial({
map: textureLoader.load("./textures/earth/Earth.png"),
normalMap: textureLoader.load("./textures/earth/EarthNormal.png"),
specularMap: textureLoader.load("./textures/earth/EarthSpec.png"),
normalScale: new THREE.Vector2(6, 6),
});
meshs = addGeometrys([]);
meshs[0].material = material;
meshs[1].material = material;
};
})();
gui.add(spotLight, "intensity", 0, 30, 1).name("聚光源强度");
gui.add(controls, "clearScene");
gui.add(controls, "loadDds");
gui.add(controls, "loadPvr");
gui.add(controls, "loadTga");
gui.add(controls, "loadKtx");
gui.add(controls, "loadExr");
gui.add(controls, "loadRgbe");
const obj = {
bumpScale: 1,
normalScaleX: 1,
normalScaleY: 1,
displacementScale: 1,
displacementBias: 0,
aoMapIntensity: 1,
lightMapIntensity: 1,
emissiveIntensity: 1,
};
const gui_map = gui.addFolder("map");
gui_map.add(controls, "loadBumpmap");
gui_map.add(obj, "bumpScale", 0, 1).onChange(function (e) {
meshs[2].material.bumpScale = e;
});
gui_map.add(controls, "loadNormalmap");
gui_map.add(obj, "normalScaleX", -3, 3).onChange(function (e) {
meshs[2].material.normalScale.set(obj.normalScaleX, obj.normalScaleY);
});
gui_map.add(obj, "normalScaleY", -3, 3).onChange(function (e) {
meshs[2].material.normalScale.set(obj.normalScaleX, obj.normalScaleY);
});
gui_map.add(controls, "loadDisplacementMap");
gui_map.add(obj, "displacementScale", -5, 5).onChange(function (e) {
meshs[1].material.displacementScale = e;
});
gui_map.add(obj, "displacementBias", -5, 5).onChange(function (e) {
meshs[1].material.displacementBias = e;
});
gui_map.add(controls, "loadAoMap");
gui_map.add(obj, "aoMapIntensity", 0, 5).onChange(function (e) {
meshs[2].material.aoMapIntensity = e;
});
gui_map.add(controls, "loadLightMap");
gui_map.add(obj, "lightMapIntensity", 0, 5).onChange(function (e) {
meshs[2].material.lightMapIntensity = e;
});
gui_map.add(controls, "loadMetalRoughnessMap");
gui_map.add(controls, "loadAlphaMap");
gui_map.add(controls, "loadEmissiveMap");
gui_map.add(obj, "emissiveIntensity", 0, 5, 0.5).onChange(function (e) {
meshs[0].material.emissiveIntensity = e;
});
gui_map.add(controls, "loadSpecularMap");
return controls;
}
function determineFormat() {
if (renderer.extensions.get("WEBGL_compressed_texture_astc") !== null) return "astc";
if (renderer.extensions.get("WEBGL_compressed_texture_etc1") !== null) return "etc1";
if (renderer.extensions.get("WEBGL_compressed_texture_s3tc") !== null) return "s3tc";
if (renderer.extensions.get("WEBGL_compressed_texture_pvrtc") !== null) return "pvrtc";
}
}
init();
</script>
