【Threejs】01创建我的第一个threejs项目

默认大家已经创建好threejs的工程文件，打开main.js文件

引入threejs

// 导入threejs
import * as THREE from "three";

创建一个场景

const scene = new THREE.Scene();

创建一个相机

1. 第一个参数是相机的视角，是我们在显示器中能看到的场景范围，是角度制（注意与弧度制区分开来）；
2. 第二个参数是长宽比；
3. 第三个参数和第四个参数定义了我们能够看到场景的远近范围，也就是说小于0.1或大于1000的场景我们是看不到的。

const camera = new THREE.PerspectiveCamera(

    45,//视角

    window.innerWidth/window.innerHeight,//宽高比

    0.1,//近平面

    1000//远平面

);

对场景进行渲染

1. setSize是指我们渲染器的尺寸，第一个参数指渲染范围宽度，第二个参数指渲染范围高度，下述代码将渲染器设置成浏览器宽高大小。
2. 然后需要将renderer（渲染器）的dom元素追加到HTML文档中，这样我们才能在显示器中看到设定的各种元素。

// 创建渲染器

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

添加立方体

有了相机，有了场景，接下来需要设置一个物体，以立方体为例。

1. 创建一个BoxGeometry立方体对象，这个立方体的长宽高均为1
2. 创建立方体的材质，这采用MeshBasicMaterial,并设置其color属性，值为0x00ff00(绿色)
3. 创建一个Mesh网格，网格可以包含几何体及其材质
4. 将网格放入到场景中

//创建几何体
const geometry = new THREE.BoxGeometry(1,1,1);
//创建材质
const material = new THREE.MeshBasicMaterial({color:0x00ff00});
// 创建网格
const cube = new THREE.Mesh(geometry,material);
// 将网格添加到场景中
scene.add(cube);

 

渲染场景

需要将我们刚刚设定好的元素渲染到场景中，这样我们才能够在显示器中看到。

// 渲染函数

function animate() {

    controls.update();//不断更新

    requestAnimationFrame(animate);//不断请求下一帧

    // 旋转

    cube.rotation.x +=0.01;

    cube.rotation.y +=0.01;

    // 渲染

    renderer.render(scene,camera);

    // sxesHelper.axesHelper(camera,sxesHelper)

}
animate();