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

最新推荐文章于 2024-08-10 07:42:51 发布

lk5423968

最新推荐文章于 2024-08-10 07:42:51 发布

阅读量3.3k

点赞数

分类专栏： 3D

3D 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

http://www.cnblogs.com/rsail/archive/2012/10/16/2725513.html

第四章使用three.js加载以图片为纹理的模型（上）

在前言中我们介绍过，我们一般不用three.js自带的三维模型创建函数去拼凑我们想要的三维模型，而是使用类似Blender一样的三维建模工具去定制三维模型，然后导出为three.js可以识别的jason格式，加载显示。通过这种方式，我们可以构建较为原始的三维模型在浏览器端显示，比如我们前面看到的马克杯模型。如果单纯依靠三维建模去逼近现实世界中的形体外观是很难的，细节的修缮将给3D建模带来巨大的工作量，同时也会导致模型的加载器计算量巨大，不仅对人还是机器都是巨大的挑战。

好在我们可以另辟蹊径，不去追求模型的精细度，而在模型的纹理上做文章，尤其当我们用真实物体的照片作为模型纹理的时候，3D模型的效果立刻就得到了极大的提高，比如这个箱体模型：

如果不考虑外表图片纹理，它只是一个简单的立方体模型。加上纹理之后，几乎和我们在一些制作精良的3D游戏中见到的箱体所差无几了。下面我们来分析它的代码：

 1 //兼容各种浏览器的animation函数
 2 window.requestAnimFrame = (function(callback){
 3     return window.requestAnimationFrame ||
 4     window.webkitRequestAnimationFrame ||
 5     window.mozRequestAnimationFrame ||
 6     window.oRequestAnimationFrame ||
 7     window.msRequestAnimationFrame ||
 8     function(callback){
 9         window.setTimeout(callback, 1000 / 60);
10     };
11 })();
12 
13 // 实现旋转的动画函数
14 function animate(lastTime, angularSpeed, three){
15     // 动画更新时以时间为基准
16     var date = new Date();
17     var time = date.getTime();
18     var timeDiff = time - lastTime;
19     // 角度以弧度为单位
20     var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
21     three.cube.rotation.y += angleChange;
22     lastTime = time;
23 
24     // 重新渲染
25     three.renderer.render(three.scene, three.camera);
26 
27     // 角度参数在第一次调用时设定
28     requestAnimFrame(function(){
29         animate(lastTime, angularSpeed, three);
30     });
31 }
32 
33 window.onload = function(){
34     var angularSpeed = 0.2;
35     var lastTime = 0;
36 
37     // 渲染器
38     var renderer = new THREE.WebGLRenderer();
39     renderer.setSize(window.innerWidth, window.innerHeight);
40     document.body.appendChild(renderer.domElement);
41 
42     // 摄像机
43     var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
44     camera.position.z = 700;
45 
46     // 场景
47     var scene = new THREE.Scene();
48 
49     // 以图片为纹理的材质，这是关键点
50     var material = new THREE.MeshLambertMaterial({
51         map: THREE.ImageUtils.loadTexture("crate.jpg")
52     });
53 
54     // 立方体模型
55     var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300), material);
56     cube.overdraw = true;
57     scene.add(cube);
58 
59     // 加入环境光
60     var ambientLight = new THREE.AmbientLight(0x555555);
61     scene.add(ambientLight);
62 
63     // 加入方向光
64     var directionalLight = new THREE.DirectionalLight(0xffffff);
65     directionalLight.position.set(1, 1, 1).normalize();
66     scene.add(directionalLight);
67 
68     // 把以上创建3D模型的要素都包装成一个对象
69     var three = {
70         renderer: renderer,
71         camera: camera,
72         scene: scene,
73         cube: cube
74     };
75 
76     // 使用onload回调函数启动动画，这样能保证图片被完全加载后才开始旋转 
77     var textureImg = new Image();
78     textureImg.onload = function(){
79         animate(lastTime, angularSpeed, three, this);
80     };
81     textureImg.src = "crate.jpg";
82 };

与之对应的html代码如下：

 1 <!DOCTYPE HTML>
 2 <html lang="en">
 3     <head>
 4         <style>
 5             body {
 6                 margin: 0px;
 7                 overflow: hidden;
 8             }
 9         </style>
10     </head>
11     <body>
12         <script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
13         <script src="LoadCrate.js"></script>
14     </body>
15 </html>