当前位置：首页 > news >正文

学习threejs，导入wrl格式的模型

news 2025/6/27 23:32:24

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.VRMLLoader wrl模型加载器
二、🍀导入wrl格式的模型
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中导入wrl格式的模型，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.VRMLLoader wrl模型加载器

THREE.VRMLLoader用于加载和处理wrl格式3D模型文件的扩展。

wrl：
WRL是一种三维模型的格式，全称为Virtual Reality Modeling Language（虚拟现实建模语言）的标准格式，用于描述三维场景和物体。

特性：

WRL文件是一种细分的表面网格，这意味着它可以通过描述物体表面的细节来创建高度逼真的三维模型‌。
大型三维软件通常都支持WRL格式，这使得它在三维建模领域具有广泛的兼容性‌

编辑与查看：

可以使用VrmlPad等编辑器来编辑WRL文件‌3。
Solidworks等大型三维设计软件也可以打开和编辑WRL文件，但需要注意的是，在Solidworks中打开WRL文件后，可能不会以3D形式直接显示模型‌。
KiCad的自带3D查看器也支持WRL格式，用于在电子设计领域中的三维查看‌

应用场景‌：
除了在虚拟现实和渲染图中广泛应用外，WRL格式还可以用于三维建模、地形生成（如通过3Dmax导入WRL生成地形）‌等领域.

二、🍀导入wrl格式的模型

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景scene
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
4、创建三个THREE.DirectionalLight平行光源dir1、dir2、dir3，设置平行光源的位置，scene中添加dir1、dir2、dir3。创建THREE.SpotLight聚光灯光源spotLight，设置spotLight的位置信息，场景scene中添加spotLight。
5、加载几何模型：创建THREE.VRMLLoader加载器loader，loader调用load方法加载‘tree.wrl’模型。在load回调函数中，回调函数获取网格对象model，设置model的范围大小，场景scene中添加model。具体代码参考代码样例。
6、加入THREE.OrbitControls鼠标交互控件，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>导入wrl格式的模型</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/VRMLLoader.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/OrbitControls.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<div id="WebGL-output">
</div><!-- Js代码 -->
<script type="text/javascript">// 初始化方法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 = 30;camera.position.y = 30;camera.position.z = 30;camera.lookAt(new THREE.Vector3(0, 0, 0));var orbit = new THREE.OrbitControls(camera);var dir1 = new THREE.DirectionalLight(0.4);dir1.position.set(-30, 30, -30);scene.add(dir1);var dir2 = new THREE.DirectionalLight(0.4);dir2.position.set(-30, 30, 30);scene.add(dir2);var dir3 = new THREE.DirectionalLight(0.4);dir3.position.set(30, 30, -30);scene.add(dir3);// 添加聚光灯光源，设置光源位置var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(30, 30, 30);scene.add(spotLight);// 渲染器绑定页面元素document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var controls = new function () {};var group;var gui = new dat.GUI();var loader = new THREE.VRMLLoader();var group = new THREE.Object3D();loader.load("../assets/models/vrml/tree.wrl", function (model) {model.traverse(function (child) {if (child instanceof THREE.Mesh) {console.log(child.geometry);}});model.scale.set(10, 10, 10);scene.add(model);});render();function render() {stats.update();orbit.update();if (group) {group.rotation.y += 0.006;}requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);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>