Three.js 初阶入门篇（一）

系列文章目录

---

---

学习背景

今天在翻对应的一些图标库的时候发现，选来WebGL可以做一些身临其境的3D效果，感到尤为的震撼。在此之前，我对webGL只是停留在，听别人讲的内容上，等我打开了Threejs的官网，看完里面的一些案例的时候，我发现，这些大概是我稀罕的技术。

快来学习了，快来学习了，3D真的很酷！！！！！！

一、什么是3D（直接看作品吧）？

汽车作品欣赏

看完这种项目，是不是感觉很牛逼！！！！！！！！！

鼠标可以随意转动角度

打开机盖（交互效果）

尾部

3D链接🔗如下（链接打开会有一些慢）

3d汽车欣赏

二、如何创建一个3d的旋转立方体

1.准备Threejs库（创建js文件）

threejs库地址

2.如何创建旋转立方体，步骤如下

第一步：引入three.js的类库

<!-- 第一步，引入three.js -->
<script src="./three/index.js"></script>

第二步：创建【场景，相机，渲染器】

PerspectiveCamera的用法解释如下：

PerspectiveCamera(参数1，参数2，参数3) 第一个参数：视野角度，第二个参数：长宽比，第三四个参数，近截面和远截面

渲染器的解释如下：

第一点 ：我们可以将渲染器宽高设置为浏览器窗口宽高。例如window.innerWidth/2和window.innerHeight/2，
第二点：如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，将updateStyle（第三个参数）设为false。

代码如下：

    //1.创建场景
    const scene = new THREE.Scene()
    
    //2.创建相机 
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    
    //3.渲染器（可以在不同的浏览器中进行降级适配）
    const renderer = new THREE.WebGLRenderer()
   //设置一个渲染器的尺寸(渲染的是整个浏览器) 
   renderer.setSize(window.innerWidth/2,window.innerHeight/2,false) 
   //4.将渲染器添加到页面上
   document.body.appendChild(renderer.domElement) 

第三步：创建立方体的【几何形状，面的样式，存贮的网格】

解释网格的意义

网格包含一个几何体以及作用在此几何体上的材质， 我们可以直接将网格对象放入到我们的场景中， 并让它在场景中自由移动。

代码如下：

    //5.创建一个立方体
    const geometry = new THREE.BoxGeometry(1,1,1) //BoxGeometry 主要是创建了一个几何体（骨架）

    const material =new THREE.MeshBasicMaterial({color:'#FFFFFF'}) //MeshBasicMaterial 主要是给面添加样式

    //创建一个网格去展示 骨架+面 的组合
    const cube = new THREE.Mesh(geometry,material)
     
    //6.将网格上的立方体添加到场景上
    scene.add(cube)
    camera.position.z=2  //这一步是为了调整立方体在页面上距离（必须加）

第四步：设置一个动画效果（此处的rotate一定要添加才会旋转）

解释为什么需要动画

现在，如果将之前写好的代码复制到HTML文件中，你不会在页面中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”

不添加网格的偏移量，结果如下图所示：

代码如下

//8.设置网格循环一次的偏移位置(此处不添加偏移量，只能得到一个平面图形)
    function rotate(){
        cube.rotation.x+=0.01
        cube.rotation.y+=0.01
    }
    //7.展示立方体
    function animate(){
        requestAnimationFrame(animate)
        rotate()
        renderer.render(scene,camera)
    }

    animate()

---

总结

提示：这里对文章进行总结：今天是第一次接触Three.js,还是感觉3D是一项很酷炫的技术！！！！