WEB 3D 技术，通过node环境创建一个three案例

news2024/11/24 18:33:30

好文章前端3D Three.js 在本地搭建一个官方网站中我们搭建了一个Three的官网

现在呢我们就来创建第一个ThreeJs的资源
这里呢我们还是选择一个脚手架的开发模式因为现在基本所有的前端都在使用这样的开发方式
这里我们创建一个文件夹目录作为我们项目的存放目录
在这里插入图片描述
我们在这个目录下打开终端输入

npm init vite@latest

然后就会开始对话项目名字我这里叫 dom01吧其实命名用什么 1 什么 2的这种数字其实是很捞的但我们学习就没什么了
在这里插入图片描述
按下回车后第二个问题问我们要用什么框架第一个是不用任何框架
然后 vue和react应都是老朋友了
这里我们先选择第一个后面 vue和react的我也都会说
已经 Three 也是可以ts改造的
这里我们先选择第一个按回车暂时不需要任何框架
在这里插入图片描述
然后这里他会问你要 ts还是js 这里我们js先吧开始就不要搞的很复杂了

然后回车确定我们的项目就创建好啦
然后用编辑器打开我们的项目

然后这里我们安装一下依赖终端输入

npm install

运行结束后我们项目的依赖就都安装好啦
在这里插入图片描述

通过 package.json 我们可以看到启动命令是 dev
我们终端执行

npm run dev

在这里插入图片描述
然后我们浏览器访问终端提供给我们的项目运行地址
这就是我们最基本的一个项目运行环境

好然后我们打开项目看到入口文件 main.js 才会发现内容其实都是innerHTML写进来的

这里我们除了引入style.css之外的代码全部不需要直接干掉
在这里插入图片描述
然后我们来改一下这个 style.css
参考代码如下

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

首先我们设置全局样式不要内外边距然后 canvas 是我们一个画布的名称元素
我们先写他全屏大小
在这里插入图片描述
好那么现在我们就需要安装 three.js了
我们终端先终止项目运行然后输入

npm install three

在这里插入图片描述
然后我们直接在入口文件 main.js
编写代码如下

import './style.css'
import * as THREE from "three";

//创建场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角 视角越大  能看到的范围就越大
    window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
    0.1,  //近平面  相机能看到最近的距离
    1000  //远平面  相机能看到最远的距离
);

//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//创建一个几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//创建材质
const material = new THREE.MeshBasicMaterial({ color:0x08ffe });
//创建网格
const cube = new THREE.Mesh(geometry, material);
//将网格添加到场景中
scene.add(cube);
//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);

这里我觉得自己注释写的还是比较清晰的就不多解释了
然后相机这个概念就是相当于我们是通过一个相机去看这个图像的
看完注释你在看这句话就完全明白了
然后我们界面效果就是这样的
在这里插入图片描述
这的确是个立方体但是我们知道很多 3D图像界面是可以拖动的可以从不同角度去看的但我们这个好像是个死啊
完全动不了

这里我们可以写一个转动函数
我这里直接叫 animate 吧
参考代码如下

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();