开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第4天，点击查看活动详情

前言

今天看了大佬写的一篇文章，里面讲到了前端程序员发展的两条路，一条走全栈，一条走深度。深度方面包含3D、xr、web3d等，其中3D涉及到的就是我们今天要认识的three.js。three.js主要用来创建3D场景，与建模搭配能在网页上展示出非常炫酷的效果，官网的demo绝对让你眼前一亮。接下来我们来学习一下three的基础，认识一下three.js

创建

首先第一步引入three.js，官方给了我们js文件，保存到本地引入到html页面即可运用；或者选择搭建框架利用npm等工具下载three.js。 three.js画物体我们要认识以下对象：

scene(场景):用于包含物体，最终页面显示的也是场景里面的内容。
camera(相机):用于物体的照明，会与物体结合放到场景里面，它代表着我们看物体的视角。
renderer(渲染器):用于将物体设置的场景渲染出来，相关属性能让我们设置渲染尺寸等。

这是基础对象，要想在页面渲染出物体，三者缺一不可，接下来我们看下小demo：

   //1.创建场景
    const scene = new THREE.Scene();
    //2.创建透视摄像机 （视野角度 长宽比 进截面 远截面）
    const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
    );
    //设置相机位置
    camera.position.set(0, 0, 10);
    scene.add(camera);
    //添加物体
    const cubeGeometry = new THREE.BoxGeometry();
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: #FF6633 });
    //根据几何体和材质创建物体
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    //旋转物体
    cube.rotation.set(2, 1, 1);
    //添加材质
    scene.add(cube);
    //初始化渲染器
    const renderer = new THREE.WebGLRenderer();
    //设置渲染的尺寸大小
    renderer.setSize(window.innerWidth, window.innerHeight);
    //将webgl渲染的canvas内容添加到body中
    document.body.appendChild(renderer.domElement);
    //使用渲染器 通过相机将场景渲染出来
    renderer.render(scene, camera);

我们就能在页面上看到一个立方体。

QQ图片20230206234401.png

总结

根据以上代码我们可以总结出创建步骤：

创景场景，用来装物体与相机。
创景相机，添加到场景中。
创景物体，添加到场景中。
创建渲染器，渲染场景与相机。

three基础学习（一）—— 初识three

前言

创建

总结