HTML5 WebGL Three.js 加载 3D模型文件

本文主要介绍一下如何使用Three.js框架加载本地的3D模型文件，有关于Three.js和WebGL的具体知识请参考http://www.khronos.org/webgl/

在页面中，我们利用WebGL技术来呈现3D模型。

1.首先我们创建一个div，并将其加入到页面中。

1 2 container = document.createElement('div'); document.body.appendChild( container )

2.定义相机。

1 2 3 4 camera =new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight,1, 2000 ); camera.position.z = initalCameraZElem.value; camera.position.x = initalCameraXElem.value; camera.position.y = initalCameraYElem.value

3.定义场景。

1 scene = new THREE.Scene()

4.设置环境光，并将其加入场景。

1 2	varambient = new THREE.AmbientLight( 0x101030); scene.add( ambient );

5.设置平行光，并将其加入场景。

1 2 3

vardirectionalLight = new THREE.DirectionalLight( 0xffeedd ); directionalLight.position.set(0, 0, 1 ).normalize(); scene.add( directionalLight );

6.设置材质。

1 2 3 4 5 6 7 8 9 10

vartexture = new THREE.Texture();   varloader = new THREE.ImageLoader(); loader.addEventListener('load', function ( event ) {       texture.image = event.content;     texture.needsUpdate =true;   } ); loader.load('small.jpg' );

7.加载3D模型。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

varloader = new THREE.OBJLoader();     loader.addEventListener('load', function ( event ) {       varobject = event.content;     _object = object;     console.log(object);     for( var i = 0, l = object.children.length; i < l; i ++ ) {                                   //object.children[ i].material.map = texture;                               }     object.position.y = initalYElem.value;     object.position.x = initalXElem.value;     object.position.z = initalZElem.value;     scene.add( object ); }); loader.load( path );//path为模型的路径

8.渲染场景。

1 2 3

renderer =new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth , window.innerHeight); container.appendChild( renderer.domElement );

模型可以为本地的，也可以为服务器上的。

如果加载的是本地模型，浏览器会报错，原因是浏览器默认不允许加载本地的文件，解决方法是：

以Chrome为例，右击Chrome图标，在目标后面添加如下命令：

--allow-file-access-from-files

即可加载本地的模型文件。