three.js读取选择的电脑中文件模型 glb

1 github下载three.js源码

2 源码目录随便创建一个html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>three.js webgl - glTF 2.0 - compressed</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
<input type="file" id="files" />

<script type="module">
	import {GLTFLoader} from './examples/jsm/loaders/GLTFLoader.js';
	document.getElementById("files").addEventListener("change",event=>{
		const loader = new GLTFLoader();
		var reader = new FileReader();
		reader.readAsArrayBuffer(event.currentTarget.files[0]);
		reader.onload = function () {
			loader.parse(this.result,"",function ( gltf ) {
				console.log(gltf)
			},function ( err ){
				console.log(err)
			})
			console.log(this.result);
		}

	})



</script>

</body>
</html>

3 启动three.js 模型读取成功后参照官方教程添加到页面

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在three.js引入本地的glb模型文件,可以使用THREE.GLTFLoader()加载器。首先,确保你已经将glb文件放在了你的项目,并且知道了文件的路径。 下面是一个示例代码: ```javascript // 创建一个场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 加载器 var loader = new THREE.GLTFLoader(); // 加载模型 loader.load( // 模型路径 'path/to/your/model.glb', // 成功回调函数 function (gltf) { // 获取模型 var model = gltf.scene; // 添加模型到场景 scene.add(model); }, // 进度回调函数 function (xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, // 错误回调函数 function (error) { console.log('An error happened'); } ); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 在这个示例代码,我们创建了一个场景、相机和渲染器。然后,我们使用THREE.GLTFLoader()加载器来加载glb文件。在成功回调函数,我们获取了模型对象,并将其添加到场景。最后,我们使用requestAnimationFrame()方法和渲染器来渲染场景。 注意,在加载glb文件时,我们需要处理成功、进度和错误回调函数。成功回调函数将在模型成功加载时被调用,进度回调函数将在加载过程被调用,以提供加载进度信息,而错误回调函数将在加载失败时被调用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值