Three.js模拟书架选书显示书名--Apple的学习笔记

昨天学习了Three.js的入门教程，然后就想做个小项目练手，首先想到的就是以前在网页上看的模拟故宫，觉得好漂亮呀!感觉在电脑的web上浏览就像进入了真的故宫一样。那么我的小项目受到此启发，我要做一个模拟书架。因为我家书很多，然后放书的位置也很多，包括书架，小书架，3个小柜子，桌子上，箱子中。所以导致我找书很麻烦，这次五一我就想整理下一，给每本书贴个标签排序。当然我可以用表格记录每个标号的书名称及位置。但是关于位置记录不可能描述的很到位，基本上就是书架或者小柜子等。

快速学习了Three.js后，我觉得我可以做一个模拟书架，这样用鼠标单击某本书就会弹出它的位置和书名。这样位置信息就很详细，比如书架第一行，也很直观。比用文字描述来的有趣。

有了想法(项目需求)后，我要分解下任务。通过入门教程如下些内容我还没有尝试过。所以做为小的专攻主题，一一解决了。（关于blender我制作时用了多个贴图，但是three.js如何导入多个贴图不清楚，贴图特效是在Three.js中直接做的）

1. 会用webstorm调试(我之前python都是用pycharm，它们一脉相承，所以瞬间学会)
2. threejs对象拾取。
3. 创建文字--最后学习了ccs，用此方法。
4. 随机创建创建多个长方形对象。
5. blender绘制材质及贴图后导出。
6. Three.js导入obj模型及贴图。
7. 导入Json数据。（所有书籍信息，暂时还没有完善信息）
   这些主题学习的过程中，我感觉到了经验的迁移， 以前学的各种知识点和技能都派上用处了。但是我发现js的代码要是定义一个结构体数组都不太方便，另外js代码有错误也不提示，必须通过调试看出来，还好一开始我就选择了webstorm。还是它的函数function{}中的内容不是按顺序来执行的，我暂时还没搞清楚。明天需要专门补下js的课程，这样可以系统的了解js，而不仅仅是学习Three.js。

最后动态效果(单击某本书会移出书架到左边显示，并且显示书名，单击书架则书名无显示)今天只实现了一个书架，将来还会添加小柜子，桌子，箱子等。另外，背景等需要美化，若之后不继续精益求精，还不如看表格了哈，花费的时间只能算是js初学者练手，不能算正式的制作工具。

books.gif

静态效果

image.png

blender2.81原始渲染的书架（我也只是入门水平）

image.png

我未经过优化的源码(对js的函数及调用顺序不太清楚，先顺序着写了)

    
        
        
        
        
    
    
        

        

            文件名：未选择书籍
        
        
        
        
        
        
        
        
        

  

2020-06-11更新：网友找我要demo，应网友要求，源码及模型已经上传gitee
https://gitee.com/applecai/mybookshelf_js
此demo中已添加了补间动画，参考我的blog
书架选书Tween补间动画应用--Apple的学习笔记