Three.js之引入dae文件类型

最新推荐文章于 2024-12-12 07:30:00 发布
原创 最新推荐文章于 2024-12-12 07:30:00 发布 · 1.4k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#three.js
本文详细介绍如何利用THREE.js库创建3D模型，并实现动画控制和WebGL实时渲染。涉及模型加载、光照设置、动画管理及用户交互，适合初学者和进阶开发者学习三维图形编程。 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				height: 100%;
			}

			canvas {
				display: block;
			}
		</style>
	</head>

	<body onload="draw();">
	</body>
	<script src="https://cdn.bootcss.com/three.js/91/three.min.js"></script>
	<script src="./lib/js/libs/inflate.min.js"></script>
	<script src="./lib/js/loaders/ColladaLoader.js"></script>
	<script src="./lib/js/controls/OrbitControls.js"></script>
	<script src="./lib/js/libs/stats.min.js"></script>
	<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>
	<script src="./lib/js/Detector.js"></script>

	<script>
		var renderer, camera, scene, gui, light, stats, controls, meshHelper, mixer, action;
		var clock = new THREE.Clock(); //时钟对象  一些动画功能往往需要Clock对象获得一些时间数据，比如骨骼动画、变形动画、粒子动画
		// 渲染
		function initRender() {


			// let renderer = new THREE.WebGLRenderer({
			//     antialias: true, // true/false表示是否开启反锯齿
			//     alpha: true, // true/false 表示是否可以设置背景色透明
			//     precision: 'highp', // highp/mediump/lowp 表示着色精度选择
			//     premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
			//     preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
			//     maxLights: 3, // 最大灯光数
			//     stencil: false // false/true 表示是否使用模板字体或图案
			//   });


			renderer = new THREE.WebGLRenderer({
				antialias: true, // true/false表示是否开启反锯齿
				alpha: true, // true/false 表示是否可以设置背景色透明
			});

			// 设置显示比例
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			// renderer.setClearColor(0xd0e2f1);
			renderer.setClearColor(0xd0e2f1);
			renderer.shadowMap.enabled = true;
			//告诉渲染器需要阴影效果
			document.body.appendChild(renderer.domElement);
		}
		// 镜头
		function initCamera() {
			// camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);

			//创建一个一个视角
			camera = new THREE.PerspectiveCamera(45, 1, 2, 30000);
			// console.log("jjj",window.innerWidth , window.innerHeight, window.innerWidth / window.innerHeight)
			camera.position.set(1000, 8000, 2000);
			// //设置视角离原点的位置（眼睛距离模型的距离） 
			// camera.position.z = 700;

		}
		// 场景
		function initScene() {
			scene = new THREE.Scene();
			// 设置场景背景色 
			// scene.background = new THREE.Color( 0xffffff );
			//设置场景对象Scene的雾化属性.fog来模拟生活中雾化效果
			/**
			 * 参数一0xcc0000表示场景中雾的颜色,
			 * 参数二表示受雾化影响的最近距离(以相机位置为准)
			 * 参数三1000表示受雾化影响的最远距离(以相机位置为准)
			 */
			// scene.fog = new THREE.Fog( 0xa0a0a0, 1, 100 );
			// 参数2：0.001默认值是0.00025，改变的是属性.density
			// scene.fog = new THREE.FogExp2(0xcc0000,0.001);
		}

		//初始化dat.GUI简化试验流程
		function initGui() {
			//声明一个保存需求修改的相关数据的对象
			gui = {
				animation: true,
				helper: true //模型辅助线
			};
			var datGui = new dat.GUI();
			//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
			datGui.add(gui, "animation").onChange(function(e) {
				if (e) {
					action.play();
				} else {
					action.stop();
				}
			});

			datGui.add(gui, "helper").onChange(function(e) {
				meshHelper.visible = e;
			})
		}
//光源
		function initLight() {
			
		/**
		 * 环境光（AmbientLight会它的颜色会添加到整个场景和所有对象的当前颜色上），　它能将灯光均匀地照射在场景中每个物体上面，一般情况下用来弱化阴影或者添加一些颜色到环境中，
	　　　　点光源（PointLight空间中的一点，朝所有的方向发射光线），
	　　　　聚光灯光源（SpotLight这种光源有聚光的效果，类似于台灯，吊灯，手电筒），
	　　　　方向光（DirectionalLight也称无限光，从这种光源发出的光线可以看作是平行的，例如太阳光）
	　　　	特殊光源有3种(这三种我们后面再详述)
	　　　　半球光光源（HemisphereLight，可以为室内场景创建更加自然的光照效果，模拟反光面和光线微弱的天气）
	　　　　面光源（AreaLight使用这种光源可以指定散发光线的平面，而不是空间的一个点）
	　　　　镜头炫光（LensFlare这不是一种光源，但是通过该炫光可以为场景中的光源添加炫目的效果）
			https://www.cnblogs.com/amy2011/p/5761174.html
			https://www.cnblogs.com/yhhzxcvbnm/p/8250608.html
		 */
			
			
			var ambientLight = new THREE.AmbientLight(0x9e9e9e);
			scene.add(ambientLight); //环境光源  对象上
			// ambientLight.color = new THREE.Color("#eeeeee");

			light = new THREE.DirectionalLight(0xffffff); //点光源  日光
			light.position.set(0, 20, 0);//光从上到下发光

			light.castShadow = false;//设置为true,灯光将投下动态的阴影，代价比较高
			light.shadow.camera.top = 10;
			light.shadow.camera.bottom = -10;
			light.shadow.camera.left = -10;
			light.shadow.camera.right = 10;

			//告诉平行光需要开启阴影投射
			light.castShadow = false;

			scene.add(light);
		}

		function initModel() {

			//辅助工具
			// var helper = new THREE.AxesHelper(50);
			// scene.add(helper);

			// // 地板
			// var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 10000 ), new THREE.MeshPhongMaterial( { color: 0x009688, depthWrite: false } ) );
			// mesh.rotation.x = - Math.PI / 2;
			// mesh.receiveShadow = true;
			// scene.add( mesh );

			// //添加地板割线
			// var grid = new THREE.GridHelper( 2000, 1000, 0x000000, 0x000000 );
			// grid.material.opacity = 0.1;
			// grid.material.transparent = true;
			// scene.add( grid );

			//加载模型
			var loader = new THREE.ColladaLoader();
			// loader.load("./lib/models/collada/stormtrooper/stormtrooper.dae", function (mesh) {
			loader.load("./assets/untitled.dae", function(mesh) {
				console.log(mesh);

				var obj = mesh.scene; //获取到模型对象

				//添加骨骼辅助
				// meshHelper = new THREE.SkeletonHelper(obj);
				// scene.add(meshHelper);

				// //设置模型的每个部位都可以投影
				// obj.traverse( function ( child ) {
				//     if ( child.isMesh ) {
				//         child.castShadow = true;
				//         child.receiveShadow = true;
				//     }
				// } );

				//AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixer
				// mixer = obj.mixer = new THREE.AnimationMixer(obj);

				//mixer.clipAction 返回一个可以控制动画的AnimationAction对象  参数需要一个AnimationClip 对象
				//AnimationAction.setDuration 设置一个循环所需要的时间，当前设置了一秒
				//告诉AnimationAction启动该动作
				// action = mixer.clipAction(mesh.animations[0]);
				// action.play();

				// obj.rotation.z += Math.PI;

				scene.add(obj);
			});
		}

		//初始化性能插件
		function initStats() {
			stats = new Stats();
			document.body.appendChild(stats.dom);
		}

		//控制器
		function initControls() {
			//控制器
			controls = new THREE.OrbitControls(camera, renderer.domElement);
			//设置控制器的中心点
			// controls.target.set(0, 100, 0);
			// 如果使用animate方法时，将此函数删除
			//controls.addEventListener( 'change', render );
			// 使动画循环使用时阻尼或自转 意思是否有惯性
			controls.enableDamping = true;
			//动态阻尼系数 就是鼠标拖拽旋转灵敏度
			//controls.dampingFactor = 0.25;
			//是否可以缩放
			controls.enableZoom = true;
			//是否自动旋转
			controls.autoRotate = false;
			//设置旋转速度
			controls.autoRotateSpeed = 0.1;
			//设置相机距离原点的最远距离
			// controls.minDistance = 5000;
			controls.maxDistance = 20000;
			//是否开启右键拖拽
			controls.enablePan = false;
		}

		function render() {
			var time = clock.getDelta();
			if (mixer) {
				mixer.update(time);
			}
			controls.update();
		}

		//窗口变动触发的函数
		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);

		}

		function animate() {
			//更新控制器
			render();

			//更新性能插件
			stats.update();

			renderer.render(scene, camera);

			requestAnimationFrame(animate);
		}

		function draw() {
			//兼容性判断
			if (!Detector.webgl) Detector.addGetWebGLMessage();

			// initGui();
			initRender();
			initScene();
			initCamera();
			initLight();
			initModel();
			initControls();
			initStats();

			animate();
			window.onresize = onWindowResize;
		}
	</script>
</html>

参考

xiaomomi
关注
three.js加载COLLADA(.dae)格式模型(vue中使用three.js53)
点燃火柴的博客
02-02 2369
加载COLLADA格式模型1.demo效果2.实现要点2.1 COLLADA模型放置路径2.2 加载COLLADA模型3.demo代码 1.demo效果 如上图，该demo通过ColladaLoader加载了COLLADA格式的模型，将卡车呈现在页面中 2.实现要点 2.1 COLLADA模型放置路径 vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPath，此变量的值是vue中的环境变量process.env.BASE_URL
three.js 载入 3D 模型的方法
w418856的博客
05-09 4324
三维模型的加载器ColladaLoader模型加载器。GLTFLoader模型加载器。OBJLoader模型加载器。FBXLoader模型加载器。
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
逆境清醒的博客
11-29 5380
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）：案例运行效果，Three.js代码正常运行显示条件，关键代码解释（1）、Threejs绘图思路（2）、构建一个三维空间场景（3）、选择一个观察点(a)、three.js的右手坐标系图解(b)、three.js中的正交投影和透视投影原理图解(c)、实例中所使用的透视投影代码语法解释（4）、添加供观察的物体（5）、场景渲染
Threejs实现机械臂运动，机械臂dae格式模型，模型下载
左本Web3D
05-10 2833
1，介绍 该示例使用的是 r95版本Three.js库。 主要实现功能：引入机械臂dae格式模型，模拟机械臂运动。效果图如下： 2，动画主要说明 1，引入机械臂模型，附模型下载地址如下 2，使用Tween.js模拟实现动画 // 添加坊的模型 function initFang() { var loader = new THREE.ColladaLoader(); loader.load('assets/models/abb_irb52_7_120.dae', functio.
three.js加载3d模型_Blender体验3D建模UV贴图导入至ThreeJS
weixin_39951112的博客
11-24 1987
回想起2017年初识Blender，被他的开源所吸引，而且Blender每发布一个新版本都会随之放出一段影片，用于测试新版本功能。上个月Blender发布2.8Beta版，最为明显的是用户界面的改变。迫不及待上手新版blender3D建模与UV贴图。上面这个卫星3D模型是我在2017年期间为某项目制作的，当时就是使用Blender做的建模和贴图。这个模型将和THREEJS配合用于在Web端呈现。上...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）
逆境清醒的博客
12-07 2130
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）五、完整构建整个[旋转的精灵女孩]实例（1）、新建、启动webGL工程空间（2）、构建项目的目录层次结构（3）下载【旋转的精灵女孩】资源包（2.4）完整构建好实例需要的目录层次结构 六、运行webGL工程项目 （1）、打开集成终端 （2）、初始化webGL工程运行环境 （3）、安装live-server服务的依赖 （4）、启动服务的方法 ——
69 Three.js 导入Collada(.dae)格式的模型
现在学习也不晚
03-20 8805
简介 Collada是一种用基于XML的格式定义数字内容的格式。这也是一种被广泛使用的格式，差不多所有的三维软件和渲染引擎都支持这种格式。 Collada模型中不仅定义了几何体，也定义了材质，甚至还可以定义光源。 实现案例 案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-20/129.html 首先，引入script加载器 &l...
dae 格式详解，javascript加载导出dae文件示例
最新发布
大剑师兰特的GIS世界
12-12 1635
是一种强大的3D文件格式，适用于不同3D软件间的资产交换。加载Collada文件可以通过three.js提供的实现，相对简单直接。导出Collada文件在浏览器环境中并不常见，通常是在3D建模软件中完成。如果需要在web应用中实现类似的功能，考虑使用其他方法或工具来进行格式转换。
Three.js基础入门系列（九）--导入3D模型
热门推荐
技术专家
03-25 1万+
先来学习今天的知识——Three.js导入3D模型 复杂的3D模型（比如制作一个飞机模型）一般都是用第三方建模工具生成，然后加载到Three.js中。 01 常用建模制作工具 3Dmax 链接地址：https://www.autodesk.com.cn/products/3ds-max/overview?referrer=%2Fproducts%2F3ds-max%2Foverview 最常见的3D建模软件，广泛应用于广告、影视、工业设计、建筑设计、三维动画、多媒体制作、
89 Three.js 导入dae格式的骨骼绑定动画模型
现在学习也不晚
04-24 3449
简介 上一节，我们导入了一个官方的FBX格式的骨骼模型，实现了动画效果。这一节，更换了dae格式的模型导入，主要是这个模型返回的数据和FBX的返回格式有一些区别，下面我们将在案例中解析中间的区别。 实现案例 案例查看地址：http://www.wjceo.com/blog/threejs/2018-04-24/152.html 查看上面的案例图片会发现一个跳舞的帝国士兵，同样，这个...
Three导入dae格式模型实例
lqiqil的博客
11-13 1447
FBX最大的用途是用在诸如在 Max、Maya、Softimage 等软件间进行模型、材质、动作和摄影机信息的互导，这样就可以发挥 Max 和 Maya 等软件的优势。这是一个商业的格式，但也开放给了第三方软件，但总是感觉除了他自己的软件之外或多或少的都有解决不完的问题。设置控件的target属性，会改变相机的lookAt视点，但是修改相机的lookAt是不会影响THREE.OrbitControls的target的，原因是控件的默认目标并不是相机的聚焦点。控制器的焦点，.object的轨道围绕它运行。
threejs + vue 倒入ade文件实现动画效果
CodingNoob
05-20 868
threejs + vue 倒入ade文件实现动画效果 <template> <div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> <button @click="save">保存</button> <button @cl.
ThreeJs+vue3.0 加载obj/dae3D模型
Huang_wf
01-20 3196
3D模型下载地址 https://www.3dxy.com/3dmodel/pt-7.html <template> <div> <div id="container"></div> </div> </template> <script> import * as Three from 'Three' import { OrbitControls } from 'three/examples/jsm/c.
学习threejs，导入COLLADA(.DAE)格式的模型
我哎GIS博客
11-04 1745
本文详细介绍如何基于threejs在三维场景中导入COLLADA(.DAE)格式的模型，亲测可用。希望能帮助到您。一起学习，加油！加油！
vue2+three.js实现页面引入3d模型并进行简单模型控制
weixin_42477308的博客
05-13 5242
创建材质代码段解释：此时的方法是将一个图片转换为一个材质，并将该材质贴到3d电脑模型的屏幕上，（具体怎么精确贴到模型屏幕上，下面代码做有解释）例2：控制模型某一部位（如vr模型驾驶，点击车门，车门打开，进入查看驾驶室）可以在控制台打印出模型位置name，一般建模时会声明出来模型位置name。当拿到模型某一位置名字时，可以直接进行更换此位置颜色。此时就将上面所转换的图片精准的贴在模型的屏幕上。上面仅为自身理解，如有错误请大佬指正！七、渲染模型之后想进行控制模型的某一位置。五、创建场景、相机、地面、材质。
Vue使用three.js的GLTFLoader导入外部模型绘制边界
zhaoyan_love的博客
04-27 2455
threeJs渲染外部模型并画线
vue-three.js基础篇（一）——引入
不确定因素的博客
07-12 2935
Three官网Three.js是基于原生WebGL封装运行的三维引擎，是一款运行在浏览器中的 3D 引擎，说到数字化与可视化，就得说到数字孪生，而3D模型在浏览器展示就是其中的一环，就是数字模型设计。使用CAD工具开发出满足技术规格的产品虚拟原型，精确记录产品的各种物理参数，以可视化的方式展示出来，并通过一系列验证手段来检验设计的精准程度。这边3D建模使用的是3DMAX，主要支持转化能在three中展示的类型有fbx、3ds、obj、stl、dae。 three的使用需要安装以下内容 创......
Threejs 加载 DAE 模型遇到关题汇总
太阳火神的美丽人生
08-02 1万+
Threejs 加载 DAE 模型遇到关题汇总
threejs加载3D模型
qinliuming的专栏
03-03 3471
加载3D模型 首先要引入ColladaLoader加载器，Collada是一个3D模型交换方案，即不同的3D模型可以通过Collada进行相互转换，言外之意，threejs可以使用Collada将3D模型的数据转换成自己支持的格式，从而在浏览器上渲染出来。引入ColladaLoader如下： <script src="http://threejs.outsidelook.cn/r89/so...
Three.js 单模型，组合模型加载
qq_45853174的博客
11-24 2725
three.js 基础模型加载可查看 https://threejs.org/ 上面涵盖各种模型的加载器及加载方式，在此不再赘述。本文主要介绍如何使用vue配合three.js 库实现各种格式3d 模型文件的加载，组合式模型文件的加载，以及如何去更新相机的设置，调整模型的大小缩放去达到最适合观察的角度与大小。既然选择了远方，便只顾风雨兼程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值