👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：threejs gis工程师
文章目录
- 一、🍀前言
- 1.1 ☘️THREE.ColladaLoader DAE模型加载器
- 二、🍀导入CTM格式的模型
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于threejs在三维场景中导入CTM格式的模型，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️THREE.ColladaLoader DAE模型加载器
THREE.ColladaLoader用于加载和处理Collada（.dae）格式3D模型文件的扩展。
CTM三维文件：
- CTM是由openCTM创建的一种文件格式，可以用来以压缩格式存储三维网格的三角形面片。
- OpenCTM 本质上是一种文件格式，用于以紧凑而通用的格式存储 3D
三角形网格。同时为了方便软件开发人员和3D设计人员支持该格式，提供了一个易于使用的软件库，可以读写OpenCTM格式文件。
CTM三维文件特点：
- 开放的数据格式。
- 支持存储每个顶点的法线、UV 坐标和自定义顶点属性。
- 可以存储非常大的几何图形（数十亿个三角形和顶点）。
- 非常紧凑的3D 三角形几何存储，使用高效的熵减少技术，结合最先进的熵编码 (LZMA)。
- 用户可控精度的无损压缩：真正的无损压缩（IEEE 754 32 位浮点），适用于需要
1:1表示数据的情况。需要出色的压缩比时，具有用户可控精度的固定点表示。
二、🍀导入CTM格式的模型
1. ☘️实现思路
- 1、初始化renderer渲染器
- 2、初始化Scene三维场景scene
- 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
- 4、初始化THREE.SpotLight聚光灯光源spotLight，设置spotLight的位置信息，场景scene中添加spotLight。
- 5、加载几何模型：创建THREE.CTMLoader加载器loader，loader调用load方法加载‘auditt_wheel.ctm’轮胎模型。在load回调函数中，创建THREE.MeshLambertMaterial漫反射材质mat，传入回调函数获取的几何体对象geometry和mat参数创建THREE.Mesh网格对象group，设置group的大小，scene中添加group。具体代码参考代码样例。
- 6、加入stats监控器，监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html>
<html>
<head>
<title>导入CTM格式的模型</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/CTMLoader.js"></script>
<script type="text/javascript" src="../libs/ctm.js"></script>
<script type="text/javascript" src="../libs/CTMWorker.js"></script>
<script type="text/javascript" src="../libs/lzma.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body {
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();
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
// 设置相机位置和方向
camera.position.x = 10;
camera.position.y = 10;
camera.position.z = 10;
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 添加聚焦光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(20, 20, 20);
scene.add(spotLight);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
// call the render function
var step = 0;
var group;
var gui = new dat.GUI();
var loader = new THREE.CTMLoader();
var group = new THREE.Object3D();
loader.load("../assets/models/auditt_wheel.ctm", function (geometry) {
var mat = new THREE.MeshLambertMaterial({color: 0xff8888});
group = new THREE.Mesh(geometry, mat);
group.scale.set(20, 20, 20);
scene.add(group);
}, {});
render();
function render() {
stats.update();
if (group) {
group.rotation.y += 0.006;
group.rotation.x += 0.009;
// group.rotation.x+=0.006;
}
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
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>
效果如下：
