ThreeJs导入外部3D模型

baker_zhuang

已于 2024-05-22 14:13:51 修改

阅读量1.5k

点赞数

分类专栏： ThreeJs 文章标签： ThreeJs

于 2023-09-16 12:26:23 首次发布

本文链接：https://blog.csdn.net/qq_26881073/article/details/132917085

版权

ThreeJs 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

这节讲ThreeJs如何导入外部3D模型，在制作数字孪生或者模拟一些显示场景的时候，场景中的很多物体结构会比较复杂，所以需要的模型也比较复杂，很难用ThreeJs提供的文档实现，会否会花费大量的时间，针对复杂的模型的需要，ThreeJs提供导入3D模型的方式来实现一些复杂的模型显示。这样可以在方便快捷的3D软件中绘制好3D模型后（如果不会做 3D模型可以到一些网站上找一些自己需要的模型，比如Sketchfab），导入到ThreeJs中展示或添加一些动画效果来模拟现实中的物体，ThreeJs支持多种3D模型的导入，比如GLTF，FBX，OBJ等，加载3D模型钱需要引入对应的模型加载器才可以读取3D模型的文件数据，下面就来展示下如何通过ThreeJs导入一个GLTF的模型文件并展示到页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入three.js，这是使用three必须的js文件，此处引入的是外网提供的three文件，如果引入有问题可以到官网下载three文件后引入本地的theee.js文件-->
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
	<script src="./ThreeJs/js/OrbitControls.js"></script>

<body>
<script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * 相机设置
     */
    //窗口宽度
    var width = window.innerWidth;
    //窗口高度
    var height = window.innerHeight;
    //窗口宽高比
    var k = width / height;
    //三维场景显示范围控制系数，系数越大，显示的范围越大
    var s = 100;
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    //设置相机位置
    camera.position.set(10, 15, 10);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);

    /**
     * 光源设置
     */
        //新建点光源（常用光源分为点光源和环境光，点光源的效果类似灯泡，环境光的效果类似白天的太阳光）
    var point = new THREE.PointLight(0xffffff);
    //设置点光源的位置
    point.position.set(400, 200, 300);
    //将点光源添加到场景中
    scene.add(point);
	
    /**
     * ---导入3D模，文件需要自己去下载---
     */
	let loader = new THREE.GLTFLoader();
	// 加载模型文件
    loader.load('./model/knife/scene.gltf', function(gltf) {
		scene.add(gltf.scene);
    }, undefined, function(error) {
		console.error(error);
    });

    /**
     * 创建渲染器对象
     */
    //创建渲染器对象（渲染要等所有东西都加进去再渲染场景，创建和3D模型和光源没有先后顺序）
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    //设置渲染区域尺寸（设置的是整个屏幕的长度和宽度
    renderer.setSize(width, height);
    //设置渲染的背景色
    renderer.setClearColor(0xb9d3ff, 1);
    //body元素中插入canvas对象，也可以在页面中添加div，并加上id，通过id指定在某个div中渲染
    document.body.appendChild(renderer.domElement);
	
	//循环渲染
	function render() {
		//执行渲染操作   指定场景、相机作为参数
		renderer.render(scene, camera);
		// 使用 requestAnimationFrame 函数安排下一次渲染
		requestAnimationFrame(render);
		//修改正方体网格的x轴旋转角度
	}
	//执行渲染
	render()
	
	//创建鼠标控制器	
	let controls = new THREE.OrbitControls(camera, renderer.domElement );
	//监听控制器，每次拖动后重新渲染画面
	controls.addEventListener('change', function () {
		renderer.render(scene, camera); //执行渲染操作
	});
	
</script>
</body>
</html>

有的时候导入模型但是没有贴图，这需要再3D制作软件那边做好模型，同时要记得先引入加载器

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>

因为引入了外部模型，文件无法通过双击文件从浏览器打开，要部署到web服务器上打开，比如nginx，或者node等，如果不会配置可以评论里留言

baker_zhuang

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
2
评论
ThreeJs导入外部3D模型

这节讲ThreeJs如何导入外部3D模型，在制作数字孪生或者模拟一些显示场景的时候，场景中的很多物体结构会比较复杂，所以需要的模型也比较复杂，很难用ThreeJs提供的文档实现，会否会花费大量的时间，针对复杂的模型的需要，ThreeJs提供导入3D模型的方式来实现一些复杂的模型显示。这样可以在方便快捷的3D软件中绘制好3D模型后（如果不会做 3D模型可以到一些网站上找一些自己需要的模型，比如。有的时候导入模型但是没有贴图，这需要再3D制作软件那边做好模型，同时要记得先引入加载器。
复制链接

扫一扫