three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)

这篇具有很好参考价值的文章主要介绍了three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Three.js是一款开源的主流3D绘图JS引擎,简单点,可以将它理解为three+js就可以了,three表示3D,js表示JavaScript的意思。

结构

three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)

 .glb.gltf文件最好放在服务器上 放在本地容易报找不到的错 .fbx格式文件可以在本地用3d看图(win10自带)打开另存为.glb格式

index.html代码

<html lang="en">
	<head>
		<title>3D模型实时观看</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #fff;
				color: black;
				margin: 0px;
				overflow: hidden;
			}
 
			#modelBorderContainer{
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				width: 100%;
				height: 100%;              
			}
			#modelBorder {
				max-width: 512px;
				width: 100%;
				height: 50%;
			}
            canvas{
                position: absolute;
                top: 0%;
                left: 0%;
            }
		</style>
	</head>
 
	
 
	<body>
		<div id="modelBorderContainer">
			<div id="modelBorder"></div>
		</div>
		<script type="application/javascript">
			var modelUrl = 'https://**********/***.glb'     //定义所使用模型路径最好放服务器本地会找不到的错 js 代码qq1023732997
		</script>
		<script src="js/three.min.js?v=2.0.3"></script>
		<script src="js/OrbitControls.js?v=2.0.3"></script>
		<script src="js/GLTFLoader.js?v=2.0.3"></script>
		<script src="js/WebGL.js?v=2.0.3"></script>
		<script src="js/stats.min.js?v=2.0.3"></script>
		<script src="js/3dmodel.js?v=2.0.3"></script>
	</body>
</html>

js代码

项目案例 可旋转 拖拉推拽

three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)

 

demo演示地址

3D模型实时观看

three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)文章来源地址https://www.toymoban.com/news/detail-514153.html

到了这里,关于three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序3D,使用Three.js在微信小程序中展示gltf模型,使用VisionKit展示AR能力

    本仓库只开源gltf模型展示技术,技术好的朋友有这些代码就能帮助你解决很多问题了 如需要完整项目(基于若依框架开发的后端,AR能力前端)需另外付费赞助, 联系方式:QQ 790002517 微信公众号:时不待我 https://github.com/zzy-life/Wechat3D Three.js Three.js is a JavaScript 3D library. thr

    2024年02月09日
    浏览(44)
  • 压缩gltf/glb模型踩坑与解决 three.js DRACOLoader

    使用前端three.js加载3d模型过程中,往往会出现模型大小过大导致前端加载时间过长,降低用户体验。 本文所记录的是笔者在使用gltf-pipeline压缩3d模型中踩坑DRACOLoader与解决的一个过程。 所采用的three库版本为 ^0.138.2 通过gltf-pipeline可以大幅度压缩gltf/glb模型文件。 并且有如下

    2023年04月08日
    浏览(40)
  • WEB 3D技术 three.js draco解压器 解决 压缩后的gltf/glb报错 Error: THREE.GLTFLoader: No DRACOLoader instance pravid

    通常 我们 glb/gltf里面都是非常大的场景 有些工具 它会因为过大做了压缩 导致 我们开始是用不了的 我们可以官网搜索 draco 如下图选择 这是个解压工具 用在我们各种的3D建模软件中 大部分是通用的 我们先在代码中导入工具 我们在项目根目录中 找到 node_modules下的 three 然后

    2024年04月16日
    浏览(45)
  • 如何把glb格式模型gltf格式模型导入3dmax和C4D,U3D,UE4这些主流软件中

    咱有时候去glbxz.com添加链接描述 官网下载免费glb格式模型,gltf模型下载时候是没有通用格式,例如fbx,obj,这个时候3dmax和C4D直接打开导入是不行的,也可以制作glb模型,扣扣:424081801 这个时候,咱们用 glbxz.com 平台在线编辑功能,先导入glb 导入进来看看glb格式模型或者g

    2024年02月12日
    浏览(58)
  • Three.js加载FBX模型并解析骨骼动画

    通过Threejs先加载一个.FBX格式的三维模型文件,然后解析该文件中的骨骼动画信息。  FBX 加载器 FBXLoader.js 加载fbx模型文件 加载模型文件,加载完成后,如果模型显示位置不符合要求,可以通过Threejs程序进行平移、缩放等操作。 查看FBX模型帧动画数据 stl、obj都是静态模型,

    2024年02月07日
    浏览(77)
  • 推荐:vue-3d-loader支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json,并支持同一个场景导入多个不同3D模型,支持mtl材质以及jpg/png等图片纹理

    vue-3d-loader是vueJS + threeJS整合的一个3d展示组件。 支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json,并支持同一个场景导入多个不同3D模型,支持mtl材质以及jpg/png等图片纹理 vue3请安装 2.0.0 及以上版本࿰

    2024年02月10日
    浏览(53)
  • cesium加载glb格式的3d模型

    官方示例: Cesium Sandcastle https://sandcastle.cesium.com/?src=3D%20Models.htmllabel=Tutorials glb模型下载:https://sandcastle.cesium.com/SampleData/models/CesiumAir/Cesium_Air.glb   

    2024年02月11日
    浏览(34)
  • vue-3d-model js在线预览obj,dae,ply,json,fbx,stl,gltf格式的3D文件

    在线预览地址vue-3d-model js在线预览obj,dae,ply,json,fbx,stl,gltf格式的3D文件 效果: 例子使用了.obj 3D文件格式,自带了截图和旋转功能,其他的3D格式只需要切换一个vue的模板标签即可。具体标签格式如下: 可支持obj,dae,ply,json,fbx,stl,gltf等格式的3D文件格式显示。只需要单页面html即

    2024年02月12日
    浏览(52)
  • Three.js--》实现3d字体模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理 加载字体模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项

    2024年02月07日
    浏览(70)
  • Three.js--》实现3d踢球模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理加载模型 使用Cannon-es实现物理世界 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用

    2024年02月11日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包