文章目录一 开发环境配置二 新建项目1 新建项目2 创建项目结构3 清理项目4安装three5第一个程序一 开发环境配置安装Node.jsnode用来管理js的工具包不是必须的但是应该安装因为需要他来管理js资源包安装 vs和riderrider自带js开发环境二 新建项目1 新建项目不要使用rider新建项目rider只能创建需要后端的项目正确的做法是直接新建一个空文件夹然后用rider打开2 创建项目结构使用vite创建项目结构vite是一个脚手架可以快速创建项目目录在控制台输入指令node将会下载一个临时vite并使用他创建项目目录npminit vitelast这将启动vite会让我们选择然后选择启动服务器此时点击地址可以打开默认的网页也可以手动启动npmrun dev3 清理项目清空项目的css文件把这些放进去防止有浏览器自带的边缘把css文件移动到public /css/下*{margin:0;padding:0;}canvas{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;}main.js 清空尤其是引入csscss已经被移动了位置不清理会报错index.html修改!doctypehtmlhtmllangenheadmetacharsetUTF-8/linkrelicontypeimage/svgxmlhref/favicon.svg/metanameviewportcontentwidthdevice-width, initial-scale1.0/titlethreejslearn1/titlelinkrelstylesheethref/css/style.css!--引入css--/headbodydividapp/divscripttypemodulesrc/src/main.js/script/body/html4安装three使用指令npminstallthree安装成功可以在package.json里看到模块5第一个程序//导入jsimport*asTHREEfromthree;//将threejs的内容实例化为名为THREE的对象//创建场景constscenenewTHREE.Scene();//创建透视相机constcameranewTHREE.PerspectiveCamera(45,//fovwindow.innerWidth/window.innerHeight,//宽高比0.1,//近裁剪面和远裁剪面1000)//创建渲染器constrenderernewTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);//把画布添加到div容器里//创建一个立方体constgeometrynewTHREE.BoxGeometry(1,1,1);//创建材质constmaterialnewTHREE.MeshBasicMaterial({color:0x00ff00});//创建网格constcubenewTHREE.Mesh(geometry,material);//将网格添加到场景中scene.add(cube);//设置相机的位置camera.position.z5;camera.lookAt(0,0,0);//相机看向原点//定义一个动画functionanimate(){requestAnimationFrame(animate);//标记下一帧继续执行这个函数实现每帧刷新cube.rotation.x0.01;//渲染场景renderer.render(scene,camera);}animate();网页效果
文章目录一 开发环境配置二 新建项目1 新建项目2 创建项目结构3 清理项目4安装three5第一个程序一 开发环境配置安装Node.jsnode用来管理js的工具包不是必须的但是应该安装因为需要他来管理js资源包安装 vs和riderrider自带js开发环境二 新建项目1 新建项目不要使用rider新建项目rider只能创建需要后端的项目正确的做法是直接新建一个空文件夹然后用rider打开2 创建项目结构使用vite创建项目结构vite是一个脚手架可以快速创建项目目录在控制台输入指令node将会下载一个临时vite并使用他创建项目目录npminit vitelast这将启动vite会让我们选择然后选择启动服务器此时点击地址可以打开默认的网页也可以手动启动npmrun dev3 清理项目清空项目的css文件把这些放进去防止有浏览器自带的边缘把css文件移动到public /css/下*{margin:0;padding:0;}canvas{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;}main.js 清空尤其是引入csscss已经被移动了位置不清理会报错index.html修改!doctypehtmlhtmllangenheadmetacharsetUTF-8/linkrelicontypeimage/svgxmlhref/favicon.svg/metanameviewportcontentwidthdevice-width, initial-scale1.0/titlethreejslearn1/titlelinkrelstylesheethref/css/style.css!--引入css--/headbodydividapp/divscripttypemodulesrc/src/main.js/script/body/html4安装three使用指令npminstallthree安装成功可以在package.json里看到模块5第一个程序//导入jsimport*asTHREEfromthree;//将threejs的内容实例化为名为THREE的对象//创建场景constscenenewTHREE.Scene();//创建透视相机constcameranewTHREE.PerspectiveCamera(45,//fovwindow.innerWidth/window.innerHeight,//宽高比0.1,//近裁剪面和远裁剪面1000)//创建渲染器constrenderernewTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);//把画布添加到div容器里//创建一个立方体constgeometrynewTHREE.BoxGeometry(1,1,1);//创建材质constmaterialnewTHREE.MeshBasicMaterial({color:0x00ff00});//创建网格constcubenewTHREE.Mesh(geometry,material);//将网格添加到场景中scene.add(cube);//设置相机的位置camera.position.z5;camera.lookAt(0,0,0);//相机看向原点//定义一个动画functionanimate(){requestAnimationFrame(animate);//标记下一帧继续执行这个函数实现每帧刷新cube.rotation.x0.01;//渲染场景renderer.render(scene,camera);}animate();网页效果
