如何10分钟零基础实现Web3D（在线3D模型可视化）

2024-05-24 10:03:16

安装 http-server

第一步:点击链接

https://nodejs.org/dist/latest-v10.x/node-v10.17.0-x86.msi

下载 nodejs 并安装

第二步:打开终端( 即命令提示符，在开始菜单搜索框中输入 cmd，并打开)，输入 node -v，如显示版本号，代表安装成功;

第三步:npm 默认是国外源，修改为淘宝源，在终端输入下述命令

npm config set registry https://registry.npm.taobao.org/

第四步:终端窗口进行全局安装 http-server，在终端窗口输入下述命令

npm install http-server -g

安装成功后显示如下:

创建 index.html

第一步:在桌面上创建文件夹 demo，然后打开 demo 并新建一个文本文档，windows 可点击右键新建文本文档，需要显示文件扩展名。

第二步:将新建的文件名修改为 index.html

第三步:将 3D 文件拷贝到 demo 目录下:

第四步:使用文本编辑器( 使用记事本即可)打开 index.html ，将下述内容拷贝到文件内，并保存关闭。

请注意!请将下述内容中的 Propeller.stl 替换为你放到 demo 目录的 3D 文件名称 + 扩展名

<!doctype html>
<html><head><meta charset='utf8'><script src='https://evercraft.co/lib/everxyz-1.0.8.js'></script><style>#hello{width: 600px;height: 600px;}</style></head><body><div id="hello"></div><script>const options = { showProgress: true,}  // 配置工具条配置信息，详情可参考功能配置板块evercad.render3d('#hello', [{path: '/Propeller.stl',  // 该地址为当前html文件的同级目录文件name: 'Propeller.stl'}], options);</script></body>
</html>

启动服务

使用 http-server 搭建一个简单的服务器第一步:在当前目录窗口的地址栏输入 cmd，按回车，然后输入下述命令，按回车，终端进入 demo 目录

第二步:在当前打开的窗口输入以下命令:

http-server -p 9999

出现下述截图代表服务启动成功

显示模型

正式加载文件，在浏览器地址栏中输入 127.0.0.1:9999/index ，显示成功

如何10分钟零基础实现Web3D（在线3D模型可视化）相关推荐

【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
10分钟零基础带你入门Ribbon小项目-啥？小白都能看懂？
文章目录一.前置说明及其框架搭建 1.思路详解 2.框架搭建二.代码编写 1.编写五个pom文件 1.1.父pom文件 1.2.子模块pom 2.编写启动类 3.application.yml文件 ...
零基础，该选3D手绘低模还是次世代高模呢？
一.什么是3D低模手绘? 3D美术设计师根据原画设计师的构思,将二维的东西在3D软件里面制作出来,最终得到的东西是模型(3Dmax)和贴图(软件PS.Bodypaint),模型是物体的主要构架,贴图是 ...
零基础如何学习游戏3D建模，要学些什么内容？学多久？
一.什么是游戏3D建模在大型的游戏研发公司,3D建模是一个非常大的职能,分为4个岗位:3D角色低模手绘,3D场景低模手绘,次世代角色高模,次世代场景高模.通常我们所说的3D建模是指低模手绘. 二.零基 ...
zbrush新手教程：女性人物角色雕刻/上色零基础雕刻全流程-3D人物建模教程
zbrush新手教程:女性人物角色雕刻/上色零基础雕刻全流程-3D人物建模教程 zbrush新手教程:女性人物角色雕刻/上色零基础雕刻全流程-3D人物建模教程
元宇宙里的虚拟数字人：十几分钟就能制作出人体3D模型
元宇宙是虚拟世界与现实社会的交互平台,在虚拟世界里都有一个现实世界的复制品,包括真人模型,也就是元宇宙里的虚拟数字人,数字人的概念就出来了. 数字人就是逼真的人体3D模型.就是利用技术创造出来的虚拟人 ...
云开发平台开箱，3分钟零基础搭建个人Hexo博客
简介:Hexo是一款基于Node.js的博客框架,可以将Markdown格式的文本渲染为HTML代码.所以,博客基本就是纯静态,维护相对方便.但是缺点也很明显--经常换编写环境使用不便,因为它的所有渲 ...
php一篇文零基础到制作在线图片编辑网站赚钱（gif压缩、九宫格裁剪、等比裁剪、大小变换）【php华为云实战】
注意本篇文适用于: 零基础小白想要了解一下php开发或者网站开发的同学(但是注意,零基础你可以通过本篇完成,但是由于是速成会有一些难度,本篇内容由于是速成,有一些额外知识点,不会可以来问我1_bit) ...
这10本零基础学UI设计必读的书，你还差几本？
随着移动互联网的普及和用户人机使用习惯的变迁,越来越多的人离不开手机,移动APP设计成为互联网宠儿.在这种情况下,UI设计就显得尤为重要了.因此,越来越来越多的人选择转行来做UI设计. 近期有不少人都 ...

最新文章

热门文章