因交友不慎,导致肝了一周的3D教室,利用3D建模结合Three.js的技术只为带你们梦回当年。逝世就逝世吧!

·  阅读 32235
因交友不慎,导致肝了一周的3D教室,利用3D建模结合Three.js的技术只为带你们梦回当年。逝世就逝世吧!

我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛

肝了一周的3D教室真的来了,为了弄这个熬了一个星期的夜,只为了你们一个点赞。创作不容易,你们的点赞就是对我的支持。

即上一篇同学录之后文章之后(还没看到可以去看看哦,随便留下你的脚印吧。)这件事还得从我高中同学说起,我同学说:“同学录你都实现了,那怎么不实现一个教室呢?想起当初在学校的日子,总是让人怀念”。当时我还觉得有道理,其实也刚好快到高考了,回想以前自己参加高考的情景,特别紧张。相信掘金里面也有很多小学弟。所以让我们给他们打打气吧,祝所有考生顺利上岸,向理想的大学生活走去。现在觉得真的是坑呀(交友不慎)。但是我们竟然答应了,逝世就逝世吧! 谁让我们是爱倒腾的程序员呢。

3D这块我也不熟,所以就去网上了解了一些情况。花了一天,大概了解到以下这些情况。

  • 第一种:使用WebGL+canvas画布在浏览器上进行3D建模以及渲染。而WebGL涉及到东西很多。比如:OpenGL ESGLSL等等,加大了学习成本,所以果断被我放弃。

  • 第二种:使用three.js进行3D建模以及渲染。它把WebGL通过JS进行了系统性的封装,提供了很多类与方法,可以直接使用,常用的类有Scene(场景)、Camera(相机)、Mesh(网格体)、Light(灯光)等等。但是对我们这种小白来说,一周实现根本不可能。所以也被我放弃了

后面我了解到了可以借用市面的建模软件,来帮我们快速建模。建完模之后就导出能让three.js识别的文件,通过three.js进行渲染。所以就有了我们第三种方法了。

  • 第三种:使用Blender软件+threes.js进行3D建模以及渲染。从而实现我们的3D教室

开发的方案确定了,就可以开始干活了。说一些格外话,我们在开发一个产品的时候,不管是多小多大,什么场景,我都建议大家都先从开发方案研讨开始,这样可以让你后面顺利很多,不会处处碰壁。小小建议,不足挂齿

一 Blender软件建模学习

我是真的对Blender一点都不熟悉。没听过更加没用过,于是我就在B站找学习资料(这里我没有打广告哈,官方不要拉黑我)。还好Blender学习起来不是很难,特别是可视化编辑器界面,有中文版本的,让我这种小白上手更加简单。给大家看一下编辑器页面,以及页面区的功能介绍:

image.png

还有很多内容的,我就不讲了。不然光讲这个我都讲不完,后面我会继续学,学完之后在跟大家从零到一的分享,喜欢的可以关注一下。基本上跟着视频学是可以学会一点基础的东西的。

二 Blender一些简单的技巧

使用Blender开发的过程中其实有很多技巧的。我一开始不知道,后面查了才知道,有了技巧就更加快速啦。我简单的介绍几个常用的。这些技巧我也是从网上学的,分享链接给你们:www.66152.com/answer/2022…

2.1 循环切割“Ctrl + R”

当你进行建模时,你可能会经常想要创建所谓的循环切割。这些类型的切割是围绕对象循环一圈,当您想要为模型引入的细节时,这种切割很有用。您可以使用快捷键“Ctrl + R”执行此操作,也可以使用鼠标滚轮以进行多个均匀间隔的循环切割。执行此操作时,请确保您处于编辑模式。

2.2 调整转换的间距“Shift”

如果您正在处理需要精确度的东西,那么您将需要知道如何进行更精细的转换,包括移动,旋转和缩放。当您正在进行任何这些转换时,只需按住Shift键,就会发现调整间距变得更小。

2.3 倒角

参数主要讲宽度和段数两个。宽度是指倒角的宽度,宽度越大,倒角越大。段数是指倒角的边数,段数越大,倒角效果越精细。

三 成果

我就是一边学,一边搭建3D模型。很多学习细节我在这篇文章就不说了,后面我专门出个栏目讲这个学习的过程,分享给大家。给大家看看我的成果吧。建模的比较丑,大家别骂哈。

先看效果图

image.png

再看看动图

ScreenRecorderProject3.gif

这就是我四天的学习成果,不能说完美吧,但是至少进步。其实之前看别人实现冰墩墩3D建模的时候,我就想学这玩意了,刚好现在有个机会,我会继续往下学的。

有很多人问我干嘛老用这个三年二班。其实这个是有意义的。首先三年二班是我的偶像周杰伦唱的,其次我高三的时候就是读二班的,所以就有了三年二班这个含义了。

建模的工作大概就在这里结束了,第五天的时候我就迫不及待的想要渲染到页面上了,毕竟是我的第一个3D建模。接下来是我使用Three.js进行页面渲染的环节了。

四 下载Three.js渲染Blender模型所需要的库

Three.js渲染Blender模型所需要的库,有很多个,我使用的是将Blender模型到处为FBX类型的模型,然后使用Three.js官方自带的FBXLoader渲染库进行渲染

所需要的五个库

<script src="js/lib/three.min.js"></script>
<script src="js/lib/OrbitControls.js"></script>
<script src="js/lib/FBXLoader.js"></script>
<script src="js/lib/inflate.min.js"></script>
<script src="js/lib/TweenMax.min.js"></script>
复制代码

接下来就是渲染的环节了,代码很简单,我就不多细说了

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

对于这个渲染出来的结果,我也狠意外,这其中踩了很多坑。比如:模型导入的时候,所有的元素都是黑的,没有颜色。还有一点颜色都没有。我也是服了,查资料花了一天,一点点的解决,这就是小白的痛苦,差点就放弃了。现在颜色还是很大的色差,希望掘金的Three.js大佬快来指点我一下,不然我都没动力下去了。

五 总结

目前3D教室就已经基本完成了,后面我还会继续优化下去,毕竟我对3D建模还是狠感兴趣,有没有感兴趣的小伙伴们,我们可以一起学习哦。也希望有大佬可以来指点我一下。这是源码地址:github.com/Yuan-Mr/3DC…

还有,这可是我肝了一周的成果呀,给我来个赞不过分吧!这样我才有动力弄后续,我们一起学习进步,卷到最后!下次我来实现这个可达鸭的模型,给点动力。

BFB39919EB6CE3C4E06546BCECF4FEDF.gif

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改