👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：threejs gis工程师
一、🍀前言
本文详细介绍如何基于threejs在三维场景中实现dds格式图片文件贴图，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️dds 图片
DDS是由NVIDIA公司开发一种图片格式。DDS的全称是DirectDraw Surface。它是DirectX纹理压缩（DirectX Texture Compression，简称DXTC）的产物。通常用于3D游戏引擎贴图，也可以制作法线贴图。
打开方式：
- Visual Studio，微软的开发工具。
- PhotoShop，需要安装dds插件。
- 看图软件，国内常见的看图软件就支持dds图片格式。
- 九雷dds转换器，转换成常见格式。
二、🍀dds格式图片文件贴图
1. ☘️实现思路
- 1、初始化renderer渲染器。
- 2、初始化Scene三维场景scene。
- 3、初始化camera相机，设置相机位置 camera.position，设置相机方向camera.lookAt。
- 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，scene添加平行光源。
- 5、加载几何模型：定义createMesh方法，用于创建THREE.Mesh网格对象mesh，该方法中mesh使用‘seafloor.dds’图片进行贴图。调用createMesh方法，生成二十面几何体网格对象polyhedron，生成立方体网格对象cube，球体网格对象sphere，分别设置生成的网格对象位置，场景scene加入生成的网格对象。定义render方法，实现几何体渲染和旋转动画，执行render方法。具体代码参考下面代码样例。
- 6、加入stats监控器，监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html>
<html>
<head>
<title>dds格式图片文件贴图</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/DDSLoader.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
var polyhedron = createMesh(new THREE.IcosahedronGeometry(5, 0));
polyhedron.position.x = 12;
scene.add(polyhedron);
var sphere = createMesh(new THREE.SphereGeometry(5, 20, 20));
scene.add(sphere);
var cube = createMesh(new THREE.BoxGeometry(5, 5, 5));
cube.position.x = -12;
scene.add(cube);
console.log(cube.geometry.faceVertexUvs);
// position and point the camera to the center of the scene
camera.position.x = 00;
camera.position.y = 12;
camera.position.z = 28;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var ambiLight = new THREE.AmbientLight(0x141414);
scene.add(ambiLight);
var light = new THREE.DirectionalLight();
light.position.set(0, 30, 20);
scene.add(light);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
// call the render function
var step = 0;
// setup the control gui
var controls = new function () {
};
var gui = new dat.GUI();
render();
function createMesh(geom, imageFile) {
var loader = new THREE.DDSLoader();
var texture = loader.load('../assets/textures/seafloor.dds');
var mat = new THREE.MeshPhongMaterial();
mat.map = texture;
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
function render() {
stats.update();
polyhedron.rotation.y = step += 0.01;
polyhedron.rotation.x = step;
cube.rotation.y = step;
cube.rotation.x = step;
sphere.rotation.y = step;
sphere.rotation.x = step;
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
</script>
</body>
</html>
效果如下：
