`
18211103738
  • 浏览: 81077 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

ThreeJS加载3D模型

WebGLthree.js 
阅读更多

效果：


  代码：

<!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。

例子完整源码：

分享到：
| ThreeJS创建3D的基本步骤及相关知识
评论
2 楼 wxw520zdh 2018-04-03  
msdghs 写道
楼主，我下载了demo跑不起来，是哪里没设置正确么；


停止本地文件限制在试下
1 楼 msdghs 2017-05-08  
楼主，我下载了demo跑不起来，是哪里没设置正确么；
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics