• three.js r146动态加载fbx文件，非module模式

    模型文件，大家从网上搜索一下直接替换即可，不用询问我要资源的。

    大家直接看正文吧，版本是r146，之前的版本内容不一样。网上有很多现成的例子，大家自行搜索。以下是r146版本的代码，不确认上下兼容多少版本，大家自己可以自行尝试。

    最终效果图如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>Titletitle>
    6. 	<style>
    7. 		html, body{
    8. 			width: 100%;
    9. 			height: 100%;
    10. 			margin: 0;
    11. 			padding: 0;
    12. 			background-color: transparent;
    13. 			font-family: Helvetica;
    14. 		}
    15. 		#stage, video, canvas{
    16. 			position: absolute;
    17. 			top: 0;
    18. 			left: 0;
    19. 			width: 500px;
    20. 			height: 500px;
    21. 		}
    22. 		canvas{
    23. 			z-index: 99;
    24. 		}
    25. 	style>
    26. head>
    27. <body>
    28. <canvas id="scene">canvas>
    29. <div id="stage">div>
    30.  
    31. <script src="./source/three.js">script>
    32. <script src="./source/fflate.min.js">script>
    33. <script src="./source/OrbitControls.js">script>
    34. <script src="./source/FBXLoader.js">script>
    36. <script>
    37. 	// import * as THREE from "./three.module.js";
    38. 	const u = navigator.userAgent;
    39. 	const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
    40. 	const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
    41. 	const isWeiXin = !!u.match(/MicroMessenger/i); // 微信
    42.  
    43. 	let stage = document.querySelector('#stage');
    44. 	let container, scene, camera, renderer, controls;
    45. 	let SCREEN_WIDTH =  window.innerWidth;
    46. 	let SCREEN_HEIGHT = window.innerHeight;
    47. 	const angle = 90;
    48. 	const nearest = 1;
    49. 	const farthest = 1000;
    50. 	let mixers = new Array();
    51. 	let clock = new THREE.Clock();
    52. 	init();
    53.  
    54. 	function init() {
    55. 		const name = window.location.search.split("type=")[1] || "";
    56. 		const fileUrl = `./source/${name}.fbx`;
    57. 		container = document.createElement('div');
    58. 		stage.appendChild(container);
    59. 		// 创建场景
    60. 		scene = new THREE.Scene();
    61. 		// 创建相机
    62. 		camera = new THREE.PerspectiveCamera(angle, SCREEN_WIDTH / SCREEN_HEIGHT, nearest, farthest);
    63. 		camera.position.set(0, 0, 350);
    64. 		// 环境光
    65. 		scene.add(new THREE.AmbientLight(0xFFFFFF));
    66. 		//生成半球光源
    67. 		let hemiLight = new THREE.HemisphereLight(0xFFFFFF, 0xFFFFFF, 1);
    68. 		hemiLight.position.set(0, 0, 0);
    69. 		hemiLight.groundColor = new THREE.Color(0xFFFFFF);//设置地面发出的光线的颜色
    70. 		hemiLight.color = new THREE.Color(0xFFFFFF);//设置天空发出的光线的颜色
    71. 		hemiLight.intensity = 3;
    72. 		scene.add(hemiLight);
    73. 		// 点光源
    74. 		let pointLight = new THREE.PointLight("#FFFFFF");
    75. 		pointLight.position.set(50 , 50, 50);
    76. 		pointLight.intensity = 3;
    77. 		scene.add(pointLight);
    78. 		// 平行光
    79. 		let light = new THREE.DirectionalLight(0xFFFFFF, 1);
    80. 		light.position.set(30 , 50, 50);
    81. 		scene.add(light);
    82. 		// 坐标系 xyz 线条
    83. 		// var axes = new THREE.AxisHelper(30);
    84. 		// scene.add(axes);
    85. 		// 加载提示
    86. 		let manager = new THREE.LoadingManager();
    87. 		manager.onProgress = function(item, loaded, total){
    88. 			console.log(item, loaded, total);
    89. 		};
    90. 		let onProgress = function(xhr) {
    91. 			if(xhr.lengthComputable) {
    92. 				let percentComplete = xhr.loaded / xhr.total * 100;
    93. 				console.log(Math.round(percentComplete, 2) + '% downloaded');
    94. 			}
    95. 		};
    96. 		let onError = function(xhr) {
    97. 			console.error(xhr);
    98. 		};
    99. 		let fbx_loader = new THREE.FBXLoader(manager);
    100. 		// fbx静态模型
    101. 		// fbx_loader.load('666.FBX', function(object){
    102. 		//     object.scale.multiplyScalar(1);
    103.  
    104. 		//     scene.add(object);
    105. 		// }, onProgress, onError);
    106.  
    107. 		// fbx动画
    108. 		fbx_loader.load(fileUrl, function(object) {
    109.  
    110. 			object.mixer = new THREE.AnimationMixer(object);
    111. 			mixers.push(object.mixer);
    112.  
    113. 			let action = object.mixer.clipAction(object.animations[0]);
    114. 			action.play();
    115.  
    116. 			object.scale.multiplyScalar(1);
    117. 			object.position.set(-3, 0, 0);
    118.  
    119. 			scene.add(object);
    120. 		}, onProgress, onError);
    121.  
    122. 		// 创建渲染器
    123. 		renderer = new THREE.WebGLRenderer({
    124. 			antialias: true,    // 平滑效果
    125. 			alpha: true,    // canvas背景透明
    126. 		});
    127. 		renderer.setPixelRatio(window.devicePixelRatio);
    128. 		renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    129. 		renderer.setClearColor("#203864", 1.0);
    130.  
    131. 		container.appendChild(renderer.domElement);
    132. 		// 创建控制器
    133. 		controls = new THREE.OrbitControls(camera, renderer.domElement);
    134. 		controls.target.set(0, 0, 0);
    135.  
    136. 		animate();
    137.  
    138. 		window.addEventListener('resize', onWindowResize, false);
    139. 	}
    140. 	function animate(){
    141. 		requestAnimationFrame(animate);
    142. 		render();
    143. 	}
    144. 	function render(){
    145. 		let delta = clock.getDelta();
    146. 		if (mixers.length > 0) {
    147. 			for (let i = 0; i < mixers.length; i ++) {
    148. 				mixers[i].update(delta);
    149. 			}
    150. 		}
    151. 		controls.update();
    152. 		renderer.render( scene, camera );
    153. 	}
    154.  
    155. 	// 窗口改变重置摄像头
    156. 	function onWindowResize(){
    157. 		SCREEN_WIDTH = window.innerWidth;
    158. 		SCREEN_HEIGHT = window.innerHeight;
    159. 		renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    160. 		camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    161. 		camera.updateProjectionMatrix();
    162. 	}
    163. script>
    164. body>
    165. html>

  • 相关阅读:
    【C++】内联函数的原理及使用
    学习pandas，应该选择哪本书进行学习？
    【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递（9 月 4 日论文合集）
    基于LSTM+FCN处理多变量时间序列问题记录
    还在写增删改查代码?直接一键生成
    毕设 JAVA JSP餐饮管理程序论文
    软件测试面试真题 | TCP为什么要进行三次握手和四次挥手呢？
    【SwiftUI模块】0051、SwiftUI搭建Note笔记应用程序UI，适用于iOS和macOS平台
    软件测试学习-黑马程序员，软件测试学习大纲
    17. 从零开始编写一个类nginx工具, Rust中一些功能的实现
  • 原文地址：https://blog.csdn.net/u011645165/article/details/128189690