(Three.js) 页面展现3D模型

(Three.js) 页面展现3D模型
作者：Neoxone 发表时间： 2012年02月24号，星期五阅读：47,912 次

CSS3的3d-Transform，Canvas，SVG，WebGL等等技术的出现和发展，正将网页的3D化慢慢变得简单友好，但是3D建模毕竟有其很高的专业性，所以如果拥有一个内心强大，接口简洁的库就能使我们得心应手许多。Three.js便是备受推崇的一个，尽管API的变动，简陋的文档会让我们的上手比较困难。

下面我提供一个入门Demo，及一个用Three.js展示通用的3D模型格式的Demo。（注意：确保你使用的浏览器支持了Canvas，及WebGL。拥有一个先进的浏览器，将为你带来更好的上网体验。Test）

下面是入门Demo，加了注释。详细入门教程可以到这里Getting Started with Three.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>立方体</title>
    <script type="text/javascript" charset="utf-8" src="/blog/resource/threejs/three.min.js"></script>
	<style>body{overflow:hidden;}</style>
</head>
<body></body>
	<script>
	/* 场景 */
	var WIDTH = document.documentElement.offsetWidth || 800,
		HEIGHT = document.documentElement.clientHeight || 600;
	var scene = new THREE.Scene();
	/* 摄像头 */
	var VIEW_ANGLE = 75,
		ASPECT = WIDTH / HEIGHT,
		NEAR = 0.1,
		FAR = 10000;
	var	camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); /* 摄像机视角，视口长宽比，近切面，远切面 */
		camera.position.set(0, 0, 1000); //放置位置
		scene.add(camera);
	/* 显示对象 */
	var geometry = new THREE.CubeGeometry( 200, 200, 200 ), //几何属性。代码位于"\src\extras\geometries"
		material = new THREE.MeshLambertMaterial( { color: 0xcccccc} ); //材质属性 "\src\materials"
	var cube = new THREE.Mesh(geometry, material);
		cube.rotation.set(10,20,10); //放置角度
		scene.add(cube);
	/* 灯光 */
	var light = new THREE.DirectionalLight(0xFFFFFF); //直线光,"\src\lights"
		light.position.set(0, 0, 100).normalize();
		scene.add(light);
	/* 渲染器 */
	var	renderer = new THREE.CanvasRenderer(); //有Canvas，WebGL，SVG三种模式
		renderer.setSize(WIDTH , HEIGHT);
		document.body.appendChild(renderer.domElement);
	/* 动画 */
	(function anime(){
		cube.rotation.x += 0.01; //改变立方体角度
		renderer.render(scene, camera); //开始渲染
		return requestAnimationFrame(anime);
	})()
</script>
</html>

考虑到Opera还不支持WebGL，上面使用了Canvas模式渲染。但WebGL的渲染模式要比Canvas快的要多的多。

下面是一个展示机器人MGA-411 Mangusa模型的Demo。
Three.js可以调用以Json格式存储模型信息的js文件来创建模型。模型你可以自己在3D软件上建模完成，或在网上下载。至于模型格式，你可以通过three.js提供的插件在Blender这款开源3D制作软件中将一些3D模型格式，如3ds，obj等，转换成符合three.js标准的js格式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MGA-411 Mangusa</title>
    <script type="text/javascript" charset="utf-8" src="/blog/resource/threejs/three.min.js"></script>
	<style>body{overflow:hidden;background:#000}</style>
</head>
<body>
	<div id="Loading" style="color:#fff">Loading...</div>
</body>
	<script>
	/* 场景 */
	var WIDTH = document.documentElement.offsetWidth || 800,
		HEIGHT = document.documentElement.clientHeight || 600;
	var scene = new THREE.Scene();
	/* 摄像头 */
	var VIEW_ANGLE = 75,
		ASPECT = WIDTH / HEIGHT,
		NEAR = 0.1,
		FAR = 10000;
	var	camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
		camera.position.set(0, 0, 1000);
		scene.add(camera);
	/* 渲染器 */
	var	renderer = new THREE.WebGLRenderer();
		renderer.setSize(WIDTH , HEIGHT);
		document.body.appendChild(renderer.domElement);
	/* 灯光 */
	var light = new THREE.DirectionalLight(0xFFFFFF);
		light.position.set(0, 0, 99).normalize();
		scene.add(light);
	/* 显示对象 */
	var material = new THREE.MeshLambertMaterial({ color: 0xcccccc, wireframe: true }),
		obj;
	var loader = new THREE.JSONLoader(true);
    loader.load("/blog/resource/threejs/model/MGA.js", function ( geometry ) {
		var loading = document.getElementById("Loading");
		loading.parentNode.removeChild(loading);
		obj = new THREE.Mesh(geometry, material);
		obj.position.set(0,1,990);
		scene.add(obj);
		var start = new Date().getTime(),delta;
		(function anime(){
			delta = new Date().getTime() - start;
			obj.rotation.y =   delta / 1000;
			renderer.render(scene, camera);
			return requestAnimationFrame(anime);
		})();
	});
</script>
</html>

标签： 3D, blender, canvas, requestAnimationFrame, threejs, webgl

这篇文章发布于 2012年02月24号，星期五，11:29，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

23 条评论发表在“(Three.js) 页面展现3D模型”上

程说：

2012年04月30日于16:42

博主,看了你的three.js教程后觉得帮助很大.我现在正在利用three.js做毕设,但是有一些地方没有明白,可以向您请教吗?我QQ是170119566

回复
高级豕说：

2012年09月3日于18:10

说的甚有道理，但总觉得有点偏激。

回复
页面3D模型展示（three.js） - 开发者问答说：

2013年04月26日于10:27

[...] http://www.cssass.com/blog/index.php/2012/1266.html [...]
乌鸦说：

2013年05月19日于17:17

lz，我想问下，我按照你写的用Blender这款开源3D制作软件中将一些3D模型格式，如3ds，obj等，转换成符合three.js标准的js格式，但是在网页中显示的模型很粗糙，失真很严重，不会像你的保持本身的样子，你知道原因吗？

回复
ONEBOYS 回复:
五月 19th, 2013 at 19:40
@乌鸦, 不清楚，你可以试试在网上下3ds等模型来转换，排除是你模型本身数据的问题。

回复
张云飞说：

2013年05月23日于20:15

楼主你好，请问如何贴图？鼠标滑轮控制模型放大缩小，以改变摄像机的远近来实现是否合理？

回复
ONEBOYS 回复:
五月 27th, 2013 at 17:46
@张云飞, 我也认同改变摄像的机远近来表现缩放效果。至于贴图，你需要了解Material相关的API，如第二个demo里使用的MeshLambertMaterial方法，可以改变几个参数达到不同的效果。而材质贴图可以用ImageUtils 来引入。官网上有大量的demo涉及到了材质，贴图。

回复
张云飞回复:
五月 27th, 2013 at 22:06
@ONEBOYS 谢谢你的回复，这几天研究了下，对于模型的操作 three自带了TrackballControls.js 提供了滚轮缩放，左键转动，右键移动位置方法。至于贴图，我还需要多研究一下。,

回复
ONEBOYS 回复:
五月 28th, 2013 at 16:10
成品出来了，希望分享给我看看哈

回复
张云飞回复:
五月 31st, 2013 at 14:14
@ONEBOYS，我的QQ 2575723068 你加我QQ 我把服务器开启给你分享一下。,

回复
xiaoli 说：

2013年09月6日于15:01

3D模型导入的代码我在本地要怎么运行啊？

回复
子木回复:
六月 21st, 2016 at 14:35
@xiaoli,

回复
hehe 说：

2013年11月7日于20:15

回复
hehe 回复:
十一月 7th, 2013 at 20:15
@hehe,

回复
hehe 说：

2013年11月7日于20:15

回复
asa 说：

2013年12月24日于23:04

楼主您好，第二个例子显示不出来啊，第一个可以正常显示，求解答，非常感谢

回复
ONEBOYS 回复:
十二月 26th, 2013 at 11:46
第二个例子的模型数据很大，可能网络原因导致下载失败。你可以试试把源代码和模型下载到本地跑跑看

回复
ONEBOYS 回复:
十二月 26th, 2013 at 11:47
或者多换几个浏览器试试，因为第一个用的是canvas，而第二个是webGL

回复
soredsun 说：

2014年03月9日于15:18

楼主你第二个例子一下子让我知道我项目怎么做了，必须顶你

回复
Echo 说：

2014年05月8日于17:30

例子二的模型源码在哪呀怎么下载

回复
ONEBOYS 回复:
五月 9th, 2014 at 10:48
@Echo, http://www.cssass.com/blog/resource/threejs/model/MGA.js

回复
Echo 说：

2014年05月9日于13:40

博主知道怎么直接基于webgl绘制.off文件的3D模型吗

回复
追风少年说：

2016年10月18日于14:36

楼主很棒！有帮助！

回复

CSSASSCSSASS