企业官网建设流程全解析

一 开发环境配置

安装Node.js
node用来管理js的工具包，不是必须的，但是应该安装
因为需要他来管理js资源包

安装 vs和rider
rider自带js开发环境

二 新建项目

1 新建项目

不要使用rider新建项目，rider只能创建需要后端的项目
正确的做法是直接新建一个空文件夹，然后用rider打开

2 创建项目结构

使用vite创建项目结构
vite是一个脚手架，可以快速创建项目目录
在控制台输入指令，node将会下载一个临时vite，并使用他创建项目目录

npminit vite@last

这将启动vite
会让我们选择

然后选择启动服务器，此时点击地址，可以打开默认的网页
也可以手动启动

npmrun dev

3 清理项目

清空项目的css文件，把这些放进去，防止有浏览器自带的边缘
把css文件移动到public /css/下

*{margin:0;padding:0;}canvas{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;}

main.js 清空，尤其是引入css，css已经被移动了位置，不清理会报错

index.html修改

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><linkrel="icon"type="image/svg+xml"href="/favicon.svg"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>threejslearn1</title><linkrel="stylesheet"href="/css/style.css"><!--引入css--></head><body><divid="app"></div><scripttype="module"src="/src/main.js"></script></body></html>

4安装three

使用指令

npminstallthree

安装成功可以在package.json里看到模块

5第一个程序

//导入jsimport*asTHREEfrom"three";//将threejs的内容实例化为名为THREE的对象//创建场景constscene=newTHREE.Scene();//创建透视相机constcamera=newTHREE.PerspectiveCamera(45,//fovwindow.innerWidth/window.innerHeight,//宽高比0.1,//近裁剪面和远裁剪面1000)//创建渲染器constrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);//把画布添加到div容器里//创建一个立方体constgeometry=newTHREE.BoxGeometry(1,1,1);//创建材质constmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});//创建网格constcube=newTHREE.Mesh(geometry,material);//将网格添加到场景中scene.add(cube);//设置相机的位置camera.position.z=5;camera.lookAt(0,0,0);//相机看向原点//定义一个动画functionanimate(){requestAnimationFrame(animate);//标记下一帧继续执行这个函数，实现每帧刷新cube.rotation.x+=0.01;//渲染场景renderer.render(scene,camera);}animate();

网页效果