使用Three.js在浏览器绘制OFF格式的3D文件

已于 2022-06-23 16:45:12 修改
阅读量673 收藏 3
点赞数 4
CC 4.0 BY-SA版权
文章标签： javascript 3d 开发语言
于 2022-06-23 16:43:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Annz_killuan/article/details/125428857
本文介绍如何在web端使用Three.js显示3D模型，特别是OFF文件格式。作者详细讲解了OFF文件的结构，并提供了一段JavaScript代码，用于读取和解析OFF文件的内容，包括点和面的信息。通过创建自定义的OFFTEMP对象，实现了点的渲染和面的三角化，从而在Three.js中展示3D模型。此外，还提供了加载OFF文件并应用材质的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

最近有需求将一系列不同类型的3D文件在web端做出展示，即使从未接触过web端图形编程，three.js会提供很好的帮助，而对应的完成加载模型这些需求显得非常简单，很多格式提供了three的加载器，这些代码在互联网很容易找到，然而部分格式[.off]的加载器暂时没有，笔者在这里简单写了一个

以下javascript代码可以直接复制使用，案例供参考

一、分析OFF文件

OFF
8 9 0
-0.274878 -0.274878 -0.274878
-0.274878 0.274878 -0.274878
0.274878 0.274878 -0.274878
0.274878 -0.274878 -0.274878
-0.274878 -0.274878 0.274878
-0.274878 0.274878 0.274878
0.274878 0.274878 0.274878
0.274878 -0.274878 0.274878
1 0 1 0 0
1 1 1 0 0
1 2 1 0 0
1 3 1 0 0
1 4 1 0 0
1 5 1 0 0
1 6 1 0 0
1 7 1 0 0
1 8 0 1 0

这就是OFF文件的内容。第一行固定为OFF，第二行为3个数字，a,b,c分别表示点的数量，面的数量，边的数量。实际上边的数量比较鸡肋，很多OFF文件边的数量直接填0了。从第二行开始的a行数组表示点的坐标，例如:-0.274878 -0.274878 -0.274878，表示第一个点的坐标为-0.274878 -0.274878 -0.274878。这里有a个点。从第a+1行开始的b行数组表示面的构成信息，第一个数字表示构成面的点的数量，一般为3或者4，后面跟着对应数量的数字，为点的下标。

二、读取OFF文件，将点面信息保存起来

1.创建点面对象

构造一个对象起名OFFTEMP，对象初始化点，面，边数量，同时创建出点数组和边数组，顺便定义一个材质对象，使得该对象在渲染的时候直可以由自己直接传递材质，再定义一个读取OFF源文件的方法，将其点，面读取出来
个人需要，读取文件系统的url，对于文件解析方式不固定，只要能读取出off文件的内容即可

function OFFTEMP(v,f,g)
{
	this.Material = null;
	this.title = "";
	this.Member_V = v;
    this.Member_F =  f;
    this.Member_G = g;
    this.Set=function(x,y,z) {
        this.Member_V = x;
        this.Member_F = y;
        this.Member_G = z;
    };
    this.PointList=[];
    this.Facelist=[];
    this.SetMaterial = function(m)
    {
    	this.Material = m;
    }
  
    this.ReadingOFFFile=function(url){
		   var htmlobj= $.ajax({url:url,async:false});
		   var dataString = htmlobj.responseText;
		   var DataStr = dataString.split('\r\n');
		   let title = DataStr[0];
		   this.Set(parseInt(DataStr[1].split(/\s+/)[0]),parseInt(DataStr[1].split(/\s+/)[1]),parseInt(DataStr[1].split(/\s+/)[2]));
		   var beginline = 2;
		   var endline = 2+this.Member_V;
		   for(let i =2;i<endline;i++)
		   {
		     	let beginindex = 0;
		 	   	var pointitem = {};
			   	var dline = DataStr[i].split(/\s+/);
			   	for(let i =0;i<dline.length;i++)
                {
                	if(dline[i]==""||dline[i]==" "||dline[i]==undefined)
                	{
                		beginindex++;
                	}
                	else
                	{
                		break;
                	}
                }            
			   	pointitem = new THREE.Vector3(dline[0+beginindex],dline[1+beginindex],dline[2+beginindex]);
			   	this.PointList.push(pointitem);
		   }
		   for(let j = endline;j<endline+this.Member_F;j++)
		   {
		     	var faceitem = [];
		     	var dline_vex = DataStr[j].split(/\s+/);
		     	let beginindex = 0;
                for(let i =0;i<dline_vex.length;i++)
                {
                	if(dline_vex[i]==""||dline_vex[i]==" "||dline_vex[i]==undefined)
                	{
                		beginindex++;
                	}
                	else
                	{
                		break;
                	}
                }
		     	var count = parseInt(dline_vex[beginindex]);
		     	for(let x = beginindex+1;x<dline_vex.length;x++)
		     	{
		     		if(dline_vex[x]!='')
		     		{
		     			faceitem.push(parseInt(dline_vex[x]));
		     		}
		     	}
		     	this.Facelist.push(faceitem);
		   }
		   
     }
}

OFF文件使用大量的空格分割，把握好每行的数据，就能很容易的把点面数据读取出来。

2.尝试渲染点

代码如下（示例）：

 this.CreatGponit=function() {
        	let geometry = new THREE.Geometry();
        	for(let i =0;i<this.PointList.length;i++)
        	{
        	    geometry.vertices.push(this.PointList[i]);
        	}
        	let  material = new THREE.PointsMaterial( {color: 'red', size:1} );
            let  mesh = new THREE.Points( geometry, material );
            return mesh;
    }

在OFFTEMP对象中增加此方法，通过调用此方法来将自己的点形成网格。

            let ot = new OFFTEMP();
			ot.ReadingOFFFile(url1);
			let mesh = ot.CreatGponit();
			mesh.scale.set(12, 12, 12);
			scene.children.push(mesh);
	        mcloud = mesh;

述
根据点的情况，看起来提取数据没有太大的问题，再将面形成，实现三角化。这里可能需要先手写法线计算，3点确定一个平面，通过公式即可正确计算法线

this.GetNomal=function(point1,point2,point3){
     	  let x;
          let y;
          let z;
          x = (point2.y-point1.y)*(point3.z-point1.z) - (point2.z-point1.z)*(point3.y-point1.y);
          y = (point2.z-point1.z)*(point3.x-point1.x) - (point2.x-point1.x)*(point3.z-point1.z);
          z = (point2.x-point1.x)*(point3.y-point1.y) - (point2.y-point1.y)*(point3.x-point1.x);
          return new THREE.Vector3(x,y,z)
     };

然后封装出形成网格的方法

    this.CreatFace=function(){
        	let geometry = new THREE.Geometry();
        	for(let i =0;i<this.PointList.length;i++)
        	{
        	    let thispoint =this.PointList[i];
        	    geometry.vertices.push(thispoint);
        	}
        	var met = []
            let material2 = new THREE.MeshLambertMaterial( {color: 'yellow'} );
        	for(let j =0;j<this.Facelist.length;j++)
        	{
        		if(this.Facelist[j].length==3)
        		{
        	    var v1 = this.Facelist[j][0];
        	    var v2 = this.Facelist[j][1];
        	    var v3 = this.Facelist[j][2];
                let face = new THREE.Face3(v1, v2, v3, this.GetNomal(this.PointList[v1],this.PointList[v2],this.PointList[v3]), new THREE.Color(), 0);
        		geometry.faces.push(face);

        		}
        	}
		    let mesh = new THREE.Mesh( geometry, this.Material);
		    
        	return mesh;
       }

再将这些方法集中一下，提供好材质，直接加入场景。没有很大的材质效果需求，用matcap是非常省时省力的。这里再封装一个填入材质生成网格的方法。

   this.CreatMeshWithMaterial = function(m)
     {
     	let geometry = new THREE.Geometry();
        	for(let i =0;i<this.PointList.length;i++)
        	{
        	    let thispoint = this.PointList[i];
        	    geometry.vertices.push(thispoint);
        	}
        	var met = []
            let material2 = new THREE.MeshLambertMaterial( {color: 'yellow'} );
        	for(let j =0;j<this.Facelist.length;j++)
        	{
        		if(this.Facelist[j].length==3)
        		{
        	    var v1 = this.Facelist[j][0];
        	    var v2 = this.Facelist[j][1];
        	    var v3 = this.Facelist[j][2];
                let face = new THREE.Face3(v1, v2, v3, this.GetNomal(this.PointList[v1],this.PointList[v2],this.PointList[v3]), new THREE.Color(), 0);
        		geometry.faces.push(face);

        		}
        	}
		    let mesh = new THREE.Mesh( geometry, m);
		    
        	return mesh;
     }
           
     this.LoadOFFobject = function(url,m)
     {
     	this.ReadingOFFFile(url);
        return this.CreatMeshWithMaterial(m);
     }

一般来说材质设置 side: THREE.DoubleSide,，我这里使用的模型是封闭面的，所以看不出什么区别。最终效果如下
二面渲染效果，里面的背面也是蓝的
单面渲染效果，里面的背面是没有的
在这里插入图片描述

完整代码,可以直接使用对象调用。

  function OFFTEMP(v,f,g)
  {
	this.Material = null;
	this.title = "";
	this.Member_V = v;
    this.Member_F =  f;
    this.Member_G = g;
    this.Set=function(x,y,z) {
        this.Member_V = x;
        this.Member_F = y;
        this.Member_G = z;
    };
    this.PointList=[];
    this.Facelist=[];
    
    this.ReadingOFFFile=function(url){
		   var htmlobj= $.ajax({url:url,async:false});
		   var dataString = htmlobj.responseText;
		   var DataStr = dataString.split('\r\n');
		   let title = DataStr[0];
		   this.Set(parseInt(DataStr[1].split(/\s+/)[0]),parseInt(DataStr[1].split(/\s+/)[1]),parseInt(DataStr[1].split(/\s+/)[2]));
		   var beginline = 2;
		   var endline = 2+this.Member_V;
		   for(let i =2;i<endline;i++)
		   {
		     	let beginindex = 0;
		 	   	var pointitem = {};
			   	var dline = DataStr[i].split(/\s+/);
			   	for(let i =0;i<dline.length;i++)
                {
                	if(dline[i]==""||dline[i]==" "||dline[i]==undefined)
                	{
                		beginindex++;
                	}
                	else
                	{
                		break;
                	}
                }            
			   	pointitem = new THREE.Vector3(dline[0+beginindex],dline[1+beginindex],dline[2+beginindex]);
			   	this.PointList.push(pointitem);
		   }
		   for(let j = endline;j<endline+this.Member_F;j++)
		   {
		     	var faceitem = [];
		     	var dline_vex = DataStr[j].split(/\s+/);
		     	let beginindex = 0;
                for(let i =0;i<dline_vex.length;i++)
                {
                	if(dline_vex[i]==""||dline_vex[i]==" "||dline_vex[i]==undefined)
                	{
                		beginindex++;
                	}
                	else
                	{
                		break;
                	}
                }
		     	var count = parseInt(dline_vex[beginindex]);
		     	for(let x = beginindex+1;x<dline_vex.length;x++)
		     	{
		     		if(dline_vex[x]!='')
		     		{
		     			faceitem.push(parseInt(dline_vex[x]));
		     		}
		     	}
		     	this.Facelist.push(faceitem);
		   }
		   
     }
    
    this.CreatGponit=function() {
        	let geometry = new THREE.Geometry();
        	for(let i =0;i<this.PointList.length;i++)
        	{
        	    geometry.vertices.push(this.PointList[i]);
        	}
        	let  material = new THREE.PointsMaterial( {color: 'red', size:1} );
            let  mesh = new THREE.Points( geometry, material );
            return mesh;
    }
    
    this.CreatGponit_c=function() {
        	let geometry = new THREE.Geometry();
        	for(let i =0;i<this.PointList.length;i++)
        	{
        		this.PointList[i].x+=20;
        		this.PointList[i].y+=20;
        		this.PointList[i].z+=20;
        	    geometry.vertices.push(this.PointList[i]);
        	}
        	let  material = new THREE.PointsMaterial( {color: 'red', size:1} );
            let  mesh = new THREE.Points( geometry, material );
            return mesh;
    }
    
    this.SetMaterial = function(m)
    {
    	this.Material = m;
    }
    
    this.CreatFace=function(){
        	let geometry = new THREE.Geometry();
        	for(let i =0;i<this.PointList.length;i++)
        	{
        	    let thispoint =this.PointList[i];
        	    geometry.vertices.push(thispoint);
        	}
        	var met = []
            let material2 = new THREE.MeshLambertMaterial( {color: 'yellow'} );
        	for(let j =0;j<this.Facelist.length;j++)
        	{
        		if(this.Facelist[j].length==3)
        		{
        	    var v1 = this.Facelist[j][0];
        	    var v2 = this.Facelist[j][1];
        	    var v3 = this.Facelist[j][2];
                let face = new THREE.Face3(v1, v2, v3, this.GetNomal(this.PointList[v1],this.PointList[v2],this.PointList[v3]), new THREE.Color(), 0);
        		geometry.faces.push(face);

        		}
        	}
		    let mesh = new THREE.Mesh( geometry, this.Material);
		    
        	return mesh;
       }
     
     this.CreatMeshWithMaterial = function(m)
     {
     	let geometry = new THREE.Geometry();
        	for(let i =0;i<this.PointList.length;i++)
        	{
        	    let thispoint = this.PointList[i];
        	    geometry.vertices.push(thispoint);
        	}
        	var met = []
            let material2 = new THREE.MeshLambertMaterial( {color: 'yellow'} );
        	for(let j =0;j<this.Facelist.length;j++)
        	{
        		if(this.Facelist[j].length==3)
        		{
        	    var v1 = this.Facelist[j][0];
        	    var v2 = this.Facelist[j][1];
        	    var v3 = this.Facelist[j][2];
                let face = new THREE.Face3(v1, v2, v3, this.GetNomal(this.PointList[v1],this.PointList[v2],this.PointList[v3]), new THREE.Color(), 0);
        		geometry.faces.push(face);

        		}
        	}
		    let mesh = new THREE.Mesh( geometry, m);
		    
        	return mesh;
     }
     
                
     this.GetNomal=function(point1,point2,point3){
     	  let x;
          let y;
          let z;
          x = (point2.y-point1.y)*(point3.z-point1.z) - (point2.z-point1.z)*(point3.y-point1.y);
          y = (point2.z-point1.z)*(point3.x-point1.x) - (point2.x-point1.x)*(point3.z-point1.z);
          z = (point2.x-point1.x)*(point3.y-point1.y) - (point2.y-point1.y)*(point3.x-point1.x);
          return new THREE.Vector3(x,y,z)
     };
     
     this.LoadOFFobject = function(url,m)
     {
     	this.ReadingOFFFile(url);
        return this.CreatMeshWithMaterial(m);
     }
}

可以正常运行，有问题找。

21金维他
关注
three.ar.js_我们如何通过AR.js使产品吉祥物栩栩如生
07-28 1041
three.ar.jsby Mateusz Tarnaski 由Mateusz Tarnaski 我们如何通过AR.js使产品吉祥物栩栩如生 (How we brought our product mascot to life with AR.js) Short answer: using a browser-based Augmented Reality (AR) application. ...
ThreeJs学习笔记——ObjLoader加载以及渲染分析
weixin_34268610的博客
12-11 6443
一、前言 这篇文章主要学习 ThreeJs 中的 demo loader/obj2，主要是分析一下 obj 是如何加载的，纹理以及材质是如何加载的，3d camera 以及 camera controller 这些是如何实现的等。那么，先来 2 个 gif 图震撼一下吧。 二、代码分析 1.html 部分 &lt;div id="glFullscreen"&gt; &lt;!-- 渲染...
off格式三维模型
04-02
本文件包含了 兔子 马 猫 龙 圆形 等各种形状的off格式模型
浏览器中实现3D全景浏览
weixin_34026276的博客
09-17 1446
如果你用过网页版的百度地图，你大概3D全景图浏览是一种怎样的酷炫体验：在一个点可以360度环顾周围的建筑、景色，当然也可以四周移动，就像身临其境。 科普 全景图共分为三种： ①球面全景图 利用一张全景图围成一个球，自身位置位于球体内。由于图片是矩形，所以最上和最下的缝合处很明显就能够看得出来。 球面全景图是最接近人眼的构建模式，若利用多个立面构建，拼接方法繁琐，性能...
vue3使用three.js引入3D模型文件
m0_56023096的博客
01-16 9314
模糊原因：原因是设备的物理像素分辨率与CSS像素分辨率的比值的问题，我们的canvas绘制出来后图片因为高清屏设备的影响，导致图片变大，然而我们在浏览器的渲染窗口并没有变大，因此图片会挤压缩放使得canvas画布会变得模糊。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。PerspectiveCamera(透视摄像机): 模拟人眼所看到的景象，物体的大小会受远近距离的影响，它是3D场景的渲染中使用得最普遍的投影模式。下载好后，解压，放进项目文件的public目录。
图形学实验 绘制off文件_前端图形学(三十)——从源码去看threejs中的光照模型...
weixin_39603476的博客
11-23 242
欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。上章节回顾熟悉了threejs中内置的几何图形的渲染原理就是通过顶点渲染传入自定义顶点渲染自定义的几何图形本章目标光照的基本原理顶点法向量的概念和应用上一小节我们实现了一个自定义的两个三角面，如下图。但是，大家很容易看出来，两个三角面之间相邻的地方没有棱角的感觉，所有的都是一个颜色。如果没有辅助线，仿佛看不出来是一个3...
山东大学计算机图形学实验三（读取off文件并进行光顺）
06-08
实验三 题目：三维网格模型光顺 【教学目标和要求】 （1）掌握Obj或off文件的读入； （2）利用给定的数据结构类，建立读入网格模型数据结构； （3）利用OpenGL类库，对三维模型进行绘制，增加光照明等效果； （4）利用OpenGL类库，增加采用鼠标交互方式对三维模型进行旋转、放缩、平移等操作； （5）实现Laplacian算子对网格进行光顺方法，并观察曲面光顺过程；
bpmn.js-基础篇
最新发布
m0_51429350的博客
07-04 1005
如果你只是展示流程图→ 用BpmnViewer如果你需要编辑流程图→ 用社区和示例社区讨论：GitHub Issues 和 Discussions 是解决问题的好地方。你可以通过插件机制自定义或隐藏 Palette：‌1.通过additionalModules覆盖默认模块paletteProvider: ['value', null] // 禁用默认palette模块});2‌.使用自定义空模块覆盖// 自定义空palette模块modules: [}));
javascript 建模_如何用JavaScript编写3D建模应用程序
cunhan4654的博客
08-25 2950
javascript 建模Download source code - 18.1 MB 下载源代码-18.1 MB 介绍 (Introduction) Modeling in Subsurfer is based on cubes, and every model starts as a cube. The buttons at the top select the current tool. ...
基于WebGL的3D可视化告警系统关键技术解析 ThingJS
ThingJS的博客
12-04 1736
#三维可视化# #3D开发# WebGL 3D技术 新一代3D框架-ThingJS 3D可视化告警系统案例 基于ThingJS的通用架构设计 WebGL 3D技术 WebGL是一种在网页浏览器中渲染3D图形的 JavaScript API，无需加装插件，只需编写网页代码即可实现3D图形的展示。WebGL技术相较于传统的Web3D技术有两大优点：第一，通过JavaScript脚本语言实现网络交互式三维动画制作，无需依赖任何浏览器插件；第二，WebGL基于底层的 OpenGL接口实现，具有底层图形硬件(G
3D-Sculptor:生成.OFF文件的C ++程序
04-09
C ++中的3D雕刻家 1.简介 该项目包括创建一个交互式3D雕塑家，该雕塑家基于多维数据集生成人物，并创建类似于游戏* minecraft *中所看到的实体。 该项目的代码完全使用主要面向对象编程风格（OOP）的C ++开发。 除了C ++编程语言外，还必须使用其他工具来可视化生成的图形，建议使用geomview或meshlab 。 选择了前面提到的软件，因为它们具有读取和表示.OFF类型的文件的能力，该文件是用于存储程序在C ++中生成的实体的文件的类型。 .OFF文件类型对此项目非常重要，因为它是可以标准化方式编写的文件，以便能够表示3D实体。 该项目的开发将包括两个阶段，分别是： 步骤1-开发3D设计工具。 第2步-创建交互式工具。 2.结构 该代码分为两个主目录和一个代码“ main.cpp”。 目录负责存储C ++头文件和类。 在主目录中，我们可以使用目录“ incl
java解析DWG文件为json使用superMap
06-23
java使用superMap解析DWG文件为json输出，本地通过，附件中为word操方式按照步骤可以导入数据集
threejs 3d
weixin_45044818的博客
10-07 710
threejs 3d效果
0基础，手把手。在three.js中导入3D模型
haofeng___的博客
07-08 2097
vue脚手架，引用three.js调用3D模型
初识 three.js
肖的博客
11-15 551
认识 three.js 官方文档 安装 yarn add three 引入 import * as THREE from 'three' 使用 threeAnimation() { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.in...
图形学实验 绘制off文件_纯文本输入，就能绘制精美数学图表：CMU绘图工具登GitHub热榜...
weixin_39785600的博客
11-24 173
鱼羊 发自 凹非寺量子位 报道 | 公众号 QbitAI画数学插图令人头秃？现在，CMU的研究人员们开发出了一款实用工具Penrose：以纯文本的方式输入，根据语言描述，就能自动生成数学图表。集合论：几何：线性代数：光线追踪：都不在话下。整个过程，不需要手动进行繁琐调整，只需在软件中用编程语言的方式，描述数学表达式。并且，这些表达式不仅限于基本功能，而是可以表达任何数学领域的复杂关系。这一研究成果...
【OFF三维显示】通过MATLAB读取off文件生成三视图 提取轮廓线
FPGA/MATLAB学习教程/源码/项目合作开发
03-29 2896
1.软件版本 MATLAB2021a 2.本算法理论知识 里共提供了100个OFF文件，用来验证不同三维物体的效果. 整个系统分为两个部分：off文件的获取以及不同视角的物体显示和轮廓显示。 其中OFF文件的读取如下所示： %读取模型中的第一条线条 header = fgetl(fid); if ~strcmp(upper(header),'OFF'), disp('Warning, wrong format, however, we will go on') end; %读取..
用Three.js做一个简单的3D场景
weixin_58837343的博客
07-02 3002
用Three.js做一个简单的3D场景
利用three.js 实际开发的一个实例
热门推荐
你的才华撑不起野心时，静下心学习；你的能力驾驭不了目标时，沉下心努力
07-30 3万+
首个threejs项目-前端填坑指南 第一次使用threejs到实际项目中，开始的时候心情有点小激动，毕竟是第一次嘛，然而做着做着就感受到这玩意水好深，满满的都是坑，填都填不过来。经过老板20天惨无人道的摧残，终于小有成就。 因为第一次搞这玩意，相对的遇到的问题也是大把的，让我来一一诉说一路上遇到的各种问题。 开发使用： C4D、Blender2.75、[threejs-r72](http:/...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值