使用Three.js + Blender构建在浏览器端显示的3D模型（3）

最新推荐文章于 2024-03-19 08:27:54 发布

lk5423968

最新推荐文章于 2024-03-19 08:27:54 发布

阅读量6.8k

点赞数

分类专栏： 3D

3D 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

http://www.cnblogs.com/rsail/archive/2012/10/11/2719251.html

第三章使用three.js加载blender生成的马克杯模型

先看看效果图，这是在firefox里面加载的

代码如下：

 1 var SCREEN_WIDTH = window.innerWidth,
 2     SCREEN_HEIGHT = window.innerHeight,
 3     windowHalfX = window.innerWidth / 2,
 4     windowHalfY = window.innerHeight / 2,
 5     container, camera, scene, loaded,
 6     renderer, mouseX = 0, mouseY = 0;
 7 
 8 //记录鼠标位置在动画中使用
 9 document.addEventListener( 'mousemove', function (event) {
10     mouseX = ( event.clientX - windowHalfX );
11     mouseY = ( event.clientY - windowHalfY );
12 }, false );
13 
14 init();
15 
16 function init() {
17     container = document.createElement( 'div' );
18     document.body.appendChild( container );
19 
20     //使用WebGL去渲染，如果用Canvas渲染，浏览器会不堪重负
21     renderer = new THREE.WebGLRenderer();
22     renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
23     renderer.domElement.style.position = "relative";
24     container.appendChild( renderer.domElement );
25 
26     //使用场景加载，就能够利用blender建模时设置的相机和光源等，无需我们再定义
27     var loader = new THREE.SceneLoader();
28     loader.load( "./cup.js", function( result ) {
29         loaded = result;
30 
31         camera = loaded.currentCamera;
32         camera.aspect = window.innerWidth / window.innerHeight;
33         camera.updateProjectionMatrix();
34         scene = loaded.scene;
35         renderer.setClearColor( loaded.bgColor, loaded.bgAlpha );
36         animate();
37     });
38 }
39 
40 //通过实时改变相机的位置达到动画效果
41 function animate() {
42     requestAnimationFrame( animate );
43     camera.position.x += ( mouseX - camera.position.x ) * 0.001;
44     camera.position.y += ( - mouseY - camera.position.y ) * 0.002;
45     camera.lookAt( scene.position );
46     renderer.render( scene, camera );
47 }

与之对应的html代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <title>three.js webgl - io - scene loader [blender]</title>
 5         <meta charset="utf-8">
 6         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 7         <script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
 8     </head>
 9 
10     <body>
11         <script>
12         ......
13         ......
14         </script>
15     </body>
16 </html>

其中cup.js是按照第一节所述，从blender中导出的js文件。这里我们需要加以注意的是，我们这里导出的文件是scen文件，包括摄像机、光源等参数的，点击“Export/Three.js(.js)”后出现的面板上，需要注意这部分：

默认情况下“Scene”，“Lights”和“Cameras”是没有勾选的，我们把它们都勾选上。

另外，请选用FireFox浏览器加载我们的html文件。因为这里使用了WebGl的render，而webGL默认是不能跨域访问的，所以在Chrome里面如果没做任何配置是不能加载本地的模型文件加以显示的。当然来自服务器的文件是可以的。使用FireFox则不受这个限制。

至此教程完成了基本的3D模型的制作以及在浏览器端的加载。代码来自于Three.js的例程，但特地做了极度的简化，整个js代码不到50行。在后续的教程中，我们将以此为基础，针对不同的任务需求，结合Three.js的API来完成。

lk5423968

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用Three.js + Blender构建在浏览器端显示的3D模型（3）

http://www.cnblogs.com/rsail/archive/2012/10/11/2719251.html第三章使用three.js加载blender生成的马克杯模型先看看效果图，这是在firefox里面加载的代码如下： 1 var SCREEN_WIDTH = window.innerWidth, 2 SCREEN_H
复制链接

扫一扫