ThreeJS加载3D模型

最新推荐文章于 2024-08-22 11:23:30 发布

iteye_3742

最新推荐文章于 2024-08-22 11:23:30 发布

阅读量995

点赞数

分类专栏： ThreeJS WebGL 文章标签： WebGL three.js

本文链接：https://blog.csdn.net/iteye_3742/article/details/82612185

版权

WebGL 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

ThreeJS

16 篇文章 0 订阅

订阅专栏

本文介绍如何在WebGL环境中利用Three.js库加载3D模型，通过实例代码展示了加载过程，并提供了相关源码资源，适用于r69版本。

摘要由CSDN通过智能技术生成

效果：

代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Bunny</title>
		<style>body{background:#EEEEEE;margin:0;padding:0;}</style>
		<script src="js/three.min.js"></script>
		<script src="js/loaders/VTKLoader.js"></script>
	</head>
	<body>
		<script>
		var width = window.innerWidth*98/100;		//设置width为窗口显示区域宽度的98%
		var height = window.innerHeight*98/100;		//设置height为窗口显示区域高度的98%
		
		var scene = new THREE.Scene();		//创建场景
		
		var camera = new THREE.PerspectiveCamera(60, width/height, 0.001, 1e10);	//60：视角；width/height：宽高比；0.001：近平面；1e10（即10的十次方）：远平面
		camera.position.z = 0.2;	//设置camera的位置
		scene.add(camera);
		
		var dirLight = new THREE.DirectionalLight(0xffffff);	//白色的方向光
		dirLight.position.set(200,200,1000).normalize();		//设置光源位置
		camera.add(dirLight);		//添加光源到场景中
		camera.add(dirLight.target);
		
		var material = new THREE.MeshLambertMaterial({color:0xffffff,side:THREE.DoubleSide});	//创建材质
		
		var loader = new THREE.VTKLoader();		//创建加载器
		loader.load("models/vtk/bunny.vtk",function(geometry){		//加载模型
			geometry.computeVertexNormals();	//计算顶点法线
			var mesh = new THREE.Mesh(geometry, material);		//创建物体
			mesh.position.setY(-0.09);		//设置物体位置
			scene.add(mesh);		//添加物体到场景中
		});
		
		var renderer = new THREE.WebGLRenderer();	//创建渲染器
		renderer.setSize(width, height);		//设置渲染器大小
		renderer.setClearColor(0xeeeeee);		//设置默认颜色
		document.body.appendChild(renderer.domElement);		//添加渲染器的DOM元素到body中
		
		function render(){
			renderer.render(scene, camera);		//进行渲染
			requestAnimationFrame(render);		//动画帧循环
		}
		render();
		</script>
	</body>
</html>

可以在three.js的源码文件中找到three.min.js和VTKLoader.js，笔者当前使用的版本是r69。

例子完整源码：