--- theme: vue-pro highlight: monokai --- 我正在参加「初夏创意投稿大赛」详情请看：[初夏创意投稿大赛](https://juejin.cn/post/7099648833667203103 "https://juejin.cn/post/7099648833667203103") > 肝了一周的3D教室真的来了，为了弄这个熬了一个星期的夜，只为了你们一个点赞。创作不容易，你们的点赞就是对我的支持。 [即上一篇同学录之后文章之后（还没看到可以去看看哦，随便留下你的脚印吧。）](https://juejin.cn/post/7102276934335201288)这件事还得从我高中同学说起，我同学说：“同学录你都实现了，那怎么不实现一个教室呢？想起当初在学校的日子，总是让人怀念”。当时我还觉得有道理，其实也刚好快到高考了，回想以前自己参加高考的情景，特别紧张。相信掘金里面也有很多小学弟。所以让我们给他们打打气吧，祝所有考生顺利上岸，向理想的大学生活走去。现在觉得真的是坑呀（交友不慎）。但是我们竟然答应了，**逝世就逝世吧！** 谁让我们是爱倒腾的程序员呢。 3D这块我也不熟，所以就去网上了解了一些情况。花了一天，大概了解到以下这些情况。 - 第一种：使用WebGL+canvas画布在浏览器上进行3D建模以及渲染。而WebGL涉及到东西很多。比如：`OpenGL ES`、`GLSL`等等，加大了学习成本，所以果断被我放弃。 - 第二种：使用three.js进行3D建模以及渲染。它把WebGL通过JS进行了系统性的封装，提供了很多类与方法，可以直接使用，常用的类有`Scene`（场景）、`Camera`（相机）、`Mesh`（网格体）、`Light`（灯光）等等。但是对我们这种小白来说，一周实现根本不可能。所以也被我放弃了后面我了解到了可以借用市面的建模软件，来帮我们快速建模。建完模之后就导出能让three.js识别的文件，通过three.js进行渲染。所以就有了我们第三种方法了。 - 第三种：使用Blender软件+threes.js进行3D建模以及渲染。从而实现我们的3D教室开发的方案确定了，就可以开始干活了。`说一些格外话，我们在开发一个产品的时候，不管是多小多大，什么场景，我都建议大家都先从开发方案研讨开始，这样可以让你后面顺利很多，不会处处碰壁。小小建议，不足挂齿` ### 一 Blender软件建模学习我是真的对`Blender`一点都不熟悉。没听过更加没用过，于是我就在B站找学习资料（这里我没有打广告哈，官方不要拉黑我）。还好`Blender`学习起来不是很难，特别是可视化编辑器界面，有中文版本的，让我这种小白上手更加简单。给大家看一下编辑器页面，以及页面区的功能介绍： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f273baf096404df98e050a3708ccafe6~tplv-k3u1fbpfcp-watermark.image?) 还有很多内容的，我就不讲了。不然光讲这个我都讲不完，后面我会继续学，学完之后在跟大家从零到一的分享，喜欢的可以关注一下。基本上跟着视频学是可以学会一点基础的东西的。 ### 二 Blender一些简单的技巧使用`Blender`开发的过程中其实有很多技巧的。我一开始不知道，后面查了才知道，有了技巧就更加快速啦。我简单的介绍几个常用的。这些技巧我也是从网上学的，分享链接给你们：https://www.66152.com/answer/202202/499652.html #### 2.1 循环切割“Ctrl + R” 当你进行建模时，你可能会经常想要创建所谓的循环切割。这些类型的切割是围绕对象循环一圈，当您想要为模型引入的细节时，这种切割很有用。您可以使用快捷键“Ctrl + R”执行此操作，也可以使用鼠标滚轮以进行多个均匀间隔的循环切割。执行此操作时，请确保您处于编辑模式。 #### 2.2 调整转换的间距“Shift” 如果您正在处理需要精确度的东西，那么您将需要知道如何进行更精细的转换，包括移动，旋转和缩放。当您正在进行任何这些转换时，只需按住Shift键，就会发现调整间距变得更小。 #### 2.3 倒角参数主要讲宽度和段数两个。宽度是指倒角的宽度，宽度越大，倒角越大。段数是指倒角的边数，段数越大，倒角效果越精细。 ### 三成果我就是一边学，一边搭建3D模型。很多学习细节我在这篇文章就不说了，后面我专门出个栏目讲这个学习的过程，分享给大家。给大家看看我的成果吧。建模的比较丑，大家别骂哈。先看效果图 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7abfcf3470a242c681bd0e1dbf0053c9~tplv-k3u1fbpfcp-watermark.image?) 再看看动图 ![ScreenRecorderProject3.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf29628daaf945d1916d76067ab3349b~tplv-k3u1fbpfcp-watermark.image?) > 这就是我四天的学习成果，不能说完美吧，但是至少进步。其实之前看别人实现冰墩墩3D建模的时候，我就想学这玩意了，刚好现在有个机会，我会继续往下学的。 **有很多人问我干嘛老用这个三年二班。其实这个是有意义的。首先三年二班是我的偶像周杰伦唱的，其次我高三的时候就是读二班的，所以就有了三年二班这个含义了。** 建模的工作大概就在这里结束了，第五天的时候我就迫不及待的想要渲染到页面上了，毕竟是我的第一个3D建模。接下来是我使用Three.js进行页面渲染的环节了。 ### 四下载Three.js渲染`Blender`模型所需要的库 Three.js渲染`Blender`模型所需要的库，有很多个，我使用的是将`Blender`模型到处为FBX类型的模型，然后使用Three.js官方自带的`FBXLoader`渲染库进行渲染所需要的五个库 ```js ``` 接下来就是渲染的环节了，代码很简单，我就不多细说了 ```js var container, stats, controls, camera, scene, renderer, light; // 创建实例 container = document.createElement('div'); document.body.appendChild(container); // 创建相机 camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(12, 13, 12); camera.lookAt( new THREE.Vector3(0, 0, 0)); scene.add(camera); // 创建画布 scene = new THREE.Scene(); scene.background = new THREE.Color( 0xf0f0f0 ); // 创建灯光相关的 light = new THREE.DirectionalLight( 0xffffff, 1 ); light.position.set( 5, 10, -1000 ).normalize(); light.intensity=0.2;//强度 scene.add(light); // 渲染建模 var loader = new THREE.FBXLoader(); loader.load('assets/models/教室.fbx', function (object) { undefined object.traverse(function (child) { undefined if (child.isMesh) { undefined child.castShadow = true; child.receiveShadow = true; } }); object.rotation.y = Math.PI / 2; //object.rotation.x = -Math.PI/2 - Math.PI/12; object.position.set(0, -0.15, 0.3); console.log(object.position); object.scale.set(.003, .003, .003); scene.add(object); }); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild(renderer.domElement); controls = new THREE.OrbitControls(camera, renderer.domElement); controls.target.set(0, 0, 0); controls.update(); window.addEventListener('resize', onWindowResize, false); // stats stats = new Stats(); container.appendChild(stats.dom); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } ``` 大家看看效果，别打我哈！😂😂 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18ac9076b7754a42a523085d0f0f5083~tplv-k3u1fbpfcp-watermark.image?) > 对于这个渲染出来的结果，我也狠意外，这其中踩了很多坑。比如：模型导入的时候，所有的元素都是黑的，没有颜色。还有一点颜色都没有。我也是服了，查资料花了一天，一点点的解决，这就是小白的痛苦，差点就放弃了。现在颜色还是很大的色差，希望掘金的Three.js大佬快来指点我一下，不然我都没动力下去了。 ### 五总结目前3D教室就已经基本完成了，后面我还会继续优化下去，毕竟我对3D建模还是狠感兴趣，有没有感兴趣的小伙伴们，我们可以一起学习哦。也希望有大佬可以来指点我一下。这是源码地址：https://github.com/Yuan-Mr/3DClassroom 还有，这可是我肝了一周的成果呀，给我来个赞不过分吧！这样我才有动力弄后续，我们一起学习进步，卷到最后！下次我来实现这个可达鸭的模型，给点动力。 ![BFB39919EB6CE3C4E06546BCECF4FEDF.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d944ee0802354377bf6d1ee0eabaee10~tplv-k3u1fbpfcp-watermark.image?)