如何3d模型在web网页显示展示?用啥技术

Posted 2023-05-13

我想做一个产品展示网页 3D模型文件都有。
用three.js好像需要浏览器支持 用flash好像手机不能看.
不需插件 不需特定浏览器的 可以在手机上也可以看的
请问可以实现吗？
需要哪方面的技术 用什么实现。最好有演示。
比如：https://sketchfab.com/

用threejs很容易做到，加载模型到网页上显示出来。要想添加点击效果，再加些代码来判断点击到哪个模型，要弹窗什么东西。

Threejs是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。

不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。

3d模型就是三维的、立体的模型，D是英文Dimensions的缩写。

3D模型也可以说是用三维软件建造的立体模型，包括各种建筑、人物、植被、机械等等，比如一个大楼的3D模型图。3D模型也包括玩具和电脑模型领域。

3D模型也分为：人物，交通运输，建筑装饰，家具电器，机械，动物、怪物、植物，服装，饰品，日常用品，乐器，艺术品等等。

譬如，欧式家具3D模型沙发座椅、床、餐椅、居室灯具、衣柜、电器等。欧式3D模型在室内设计表现风格中常用到，一般常用3D模型欧式沙发类，见图1-欧式沙发3D模型。

发展历史：

互联网的形态一直以来都是2D模式的，但是随着3D技术的不断进步，在未来的5年时间里，将会有越来越多的互联网应用以3D的方式呈现给用户，包括网络视讯、电子阅读、网络游戏、虚拟社区、电子商务、远程教育等等。甚至对于旅游业。

3D互联网也能够起到推动的作用，一些世界名胜、雕塑、古董将在互联网上以3D的形式来让用户体验，这种体验的真实震撼程度要远超的2D环境下的模型。

参考技术A

我用的Three.js做的效果勉强还行啊，这个不需要什么浏览器支持，只是浏览器的内核不一样，IE内核的需要配置一下。但是交互性不好。目前还在研究交互性怎么更好的实现，

这个是效果图，调用OBJLoad库就行了。有问题互相交流

追问

three.js 但是一般的有些用户 根本不会配置阿 还有three.js支持手机浏览么

追答

Threejs不用配置 如果不配置的话 普通浏览器渲染的比较慢 加载比较慢；因为Chrome内核的是比较好的；
你自己用ThreeJS来显示三维模型的时候 只需要在程序开头调用里面的库函数就行，比如
src=“你需要的库函数”。即可。
目前的话我做的是PC端，没有试过手机端，但是显示的问题一般都属于渲染，手机支持的。

追问

我用360 IE 9.0 根本打不开three.js的 而且我不是要做单一几个产品的展示 我想做几百几千个产品的展示 效果还不是重点 重点是比较好转换 比较好套用 比较方便浏览。比如https://sketchfab.com/

追答

是这样的，可能你没有理解或者我表述的有问题，Three.js只是一个帮助三维模型显示的库函数，本身是不能显示的。你在你的代码里Load进去你需要的库函数即可，比如：

这是我在代码中引用的需要的库函数（three.js-dev是在官网下载的Three.js库），一个是显示，一个是导入模型，具体代码你还可以去Three.js库中查看源码。
另一个关于浏览器显示的问题，Chrome的没问题吧，如果你非用IE内核的，那么你在代码里添加浏览器兼容性代码，把IE内核的兼容进去，这样用户就不需要设置什么了啊。
最后一个关于你说的展示问题，这个属于你的布局问题，比如你在整个页面设置div，以及图片排列，一个网页显示多少个，你自己设置，在每个属性里均调用库函数，你写在代码里，这样展示。至于Three.js的展示效果，目前我实现的是悬浮效果，鼠标可以指示操作，还不能旋转操作。就这些。

本回答被提问者采纳 参考技术B 其实直接使用网页平台就可以了，自己编写代码，非常的便利，我推荐两个国内外的平台网站。
国外的推荐Sketchfab,上传之后模型效果非常的不错，但是只能在电脑上观看，还需要有VPN，或者说网速及其的快。
国内的推荐动动三维，上传后跟Sketchfab差不多的模型效果，而且在电脑，平板，手机上都可以观看，平板和手机只需要扫描你发布作品后生成的二维码，发布作品之后可以自动生成二维码。
动动三维，也不局限于3D模型展示，还可以制作很多的交互，然后完成一个3DH5的作品，对于商用挺不错的，我在给客户做东西时，就是用的这个。
具体操作我就不详说了，网站上有操作教程，后续需要自己细细专研了。 参考技术C 你可以先去【绘学霸】网站找“3d建模”板块的【免费】视频教程-【点击进入】完整入门到精通视频教程列表： www.huixueba.net/web/AppWebClient/AllCourseAndResourcePage?type=1&tagid=307&zdhhr-11y04r-1544186043961294467

想要系统的学习可以考虑报一个网络直播课，推荐CGWANG的网络课。老师讲得细，上完还可以回看，还有同类型录播课可以免费学（赠送终身VIP）。

自制能力相对较弱的话，建议还是去好点的培训机构，实力和规模在国内排名前几的大机构，推荐行业龙头：王氏教育。
王氏教育全国直营校区面授课程试听【复制后面链接在浏览器也可打开】： www.huixueba.com.cn/school/3dmodel?type=2&zdhhr-11y04r-1544186043961294467

在“3d建模”领域的培训机构里，【王氏教育】是国内的老大，且没有加盟分校，都是总部直营的连锁校区。跟很多其它同类型大机构不一样的是：王氏教育每个校区都是实体面授，老师是手把手教，而且有专门的班主任从早盯到晚，爆肝式的学习模式，提升会很快，特别适合基础差的学生。

大家可以先把【绘学霸】APP下载到自己手机，方便碎片时间学习——绘学霸APP下载： www.huixueba.com.cn/Scripts/download.html 参考技术D 可以通过使用three.js实现在网页上显示3D模型，具体操作方法如下：
1、先用proe转成obj格式的文件，再用OBJLoader.js将其载入即可实现。

2、试过转成vtk的格式，在Chrome可以显示，但在ie11没显示。

3、浏览器需Chrome 及 ie11以上。不用装额外插件及flash。

Java全栈web网页技术：16.书城项目实战五：图书的分页显示

一.后台图书管理页面的分页显示

现在我们的图书管理页面是将数据库中所有图书的信息都展示在了页面中，这是非常不合理。我们应该将图书信息进行分页展示。

分页展示的优点：

• 降低服务器的压力
• 提高用户体验

1.实现分析

• 原来该页面只需要从Servlet侧获取到数据库中所有的图书列表，然后使用for循环将数据展示在页面即可。
• 现在要实现分页，则需要展示更多信息了。如下:
  
• 要实现上面的功能，就需要从Servlet侧获取到：①当前页面图书信息的List；②当前页面数；③总页面数；④总记录数。
• 一般我们有两种方式来实现：
  • （1）在该功能的Service代码中，处理相关数据，并通过Servlet传递到页面。这种方式比较简单，但是没有复用性，每一个类似功能，都需要代码进行处理。
  • （2）创建一个PageBean（业务bean），在PageBean中封装相关数据。每次需要实现分页功能时，返回PageBean到页面即可。推荐这种方式

2.PageBean实现

其中：

• List是根据当前页面，及每页需要展示的记录数，从数据库中读取的数据。SELECT id,title,author,price,sales,stock,img_path as imgPath FROM books LIMIT (当前页数-1)*每页显示记录数,每页显示记录数;
• PAGE_SIZE是每页需要显示的记录数。一般可以设置为静态常量
• pageNo：当前页。需要页面传递到后台
• totalPageNo：总页数。通过计算得出
• totalRecord：总记录数。通过数据库查询得出。SELECT COUNT(*) FROM books;

实现：在bean目录下创建Page类

package com.bookstore.bean;

import java.util.List;

public class Page<T> 
    private List<T> list;
    public static final int PAGE_SIZE = 5;
    private int pageNo;
    private int totalPageNo;
    private int totalRecord;

    public Page(List<T> list, int pageNo, int totalPageNo, int totalRecord) 
        this.list = list;
        this.pageNo = pageNo;
        this.totalPageNo = totalPageNo;
        this.totalRecord = totalRecord;
    

    public Page() 
    

    public List<T> getList() 
        return list;
    

    public void setList(List<T> list) 
        this.list = list;
    

    public int getPageNo() 
        return pageNo;
    

    public void setPageNo(int pageNo) 
        this.pageNo = pageNo;
    

    public int getTotalPageNo() 
        return totalPageNo;
    

    public void setTotalPageNo(int totalPageNo) 
        this.totalPageNo = totalPageNo;
    

    public int getTotalRecord() 
        return totalRecord;
    

    public void setTotalRecord(int totalRecord) 
        this.totalRecord = totalRecord;
    

3.Dao层实现

• 修改BookDao：添加一个分页的方法

  • Page getPageBook(Page page) → 分页查找图书的方法
    • 该方法由BookService调用，传过来一个带有pageNo的Page 类型的page参数，通过该方法从数据库中先获取总的记录数，然后通过page的(pageNo-1)*PAGE_SIZE和PAGE_SIZE获取一个带分页的List集合。给page设置了总的记录数和List后再将page返回。

• 在BookDao接口中，新增方法public Page<Book> getPageBook(Page<Book> page);
  

  /**
   * 获取后台图书管理页面的page
   * @param page
   * @return
   */
  public Page<Book> getPageBook(Page<Book> page);
  

• 在BookDaoImpl实现类中，实现方法getPageBook
  

  @Override
  public Page<Book> getPageBook(Page<Book> page) 
      // 获取总的记录数
      String sql1 = "SELECT COUNT(*) FROM books";
      Object totalRecord = getSingleValue(sql1);
      page.setTotalRecord(Integer.parseInt(String.valueOf(totalRecord)));
      // 获取当前页面需要展示的记录列表
      int pageNo = page.getPageNo(); // 当前页数，该参数需要用户从页面传递过来
      String sql2 = "SELECT id,title,author,price,sales,stock,img_path as imgPath FROM books LIMIT ?,?";
      List<Book> beanList = getBeanList(Book.class, sql2, (pageNo - 1) * Page.PAGE_SIZE, Page.PAGE_SIZE);
      page.setList(beanList);
      // 获取总页数
      int totalPageNo = (int) Math.ceil((double) page.getTotalPageNo() / Page.PAGE_SIZE); // 如果是小数需要向上取整
      page.setTotalPageNo(totalPageNo);
      return page;
  
  

4.Service层实现

• 修改BookService：同样添加一个分页的方法

  • Page getPageBookService(String pageNo) → 分页查找图书的方法
    • 该方法由Servlet调用，接受的请求参数都是String类型的，所以传入的页码pageNo设置为了字符串类型。实现该方法是首先要创建一个Page对象，然后设置pageNo属性，不过这里需要将获取的字符串类型的pageNo转换为int类型。注意：有可能会出现转换异常（例如用户输入的是字符串abc）

• 在BookService接口中，新增方法Page<Book> getPageBookService(String pageNo) → 分页查找图书的方法
  

  /**
   * 后台图书管理页面page业务
   * @param pageNo
   * @return
   */
  public Page<Book> getPageBookService(String pageNo);
  

• 在BookServiceImpl实现类中，实现getPageBookService方法
  

  @Override
  public Page<Book> getPageBookService(String pageNo) 
      // 创建Page对象
      Page<Book> page = new Page<>();
      int resPageNo = Integer.parseInt(pageNo);
      page.setPageNo(resPageNo);
      // 调用BookDao中的方法
      Page<Book> pageBook = getPageBook(page);
      return pageBook;
  
  

5.Servlet层实现

• 在BookManagerServlet中添加getPageBook()方法，用于接收页面参数，并返回Page对象到页面中
  

  protected void getPageBook(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
      // 1.获取请求参数
      String pageNo = request.getParameter("pageNo");
      if (pageNo == null)
          pageNo = "1"; // 如果未传入pageNo，则默认为第一页
      
      // 2.调用service相应方法
      Page<Book> pageBook = service.getPageBookService(pageNo);
      // 3.将数据共享到域中
      request.setAttribute("page",pageBook);
      // 4.路径跳转
      request.getRequestDispatcher("/pages/manager/book_manager.jsp").forward(request,response);
  
  

6.JSP层实现

• 这时我们发现我们原来的bookList()已经没用了，需要讲jsp文件和Servlet中使用了bookList的地方替换为getPageBook，否则导致原来添加图书、修改图书、删除图书出现bug
• 在book_manager.jsp页面中，根据Servlet侧返回的Page，来将数据展示中页面中。并
  完成首页、尾页、上一页、下一页、跳转到xx页的功能