系列文章目录

我今天又来了更新了！！！今天主要还是回顾一下昨天的一内容，在昨天的基础上又重新梳理了一下，创建动态3D正方体的流程！！！！！！

文章目录

• 系列文章目录
• 一、最终的成果图如下所示：
• • 1.图1如下所示（添加了光源的效果）：
  • 2.图2如下所示（绘制了3个旋转的立方体）：
  • • 如下图所示（模糊问题）
    • 解如下所示（解决模糊问题）
• 二、创建一个透光立方体的步骤如下
• • • 第一步：创建DOM，获取DOM，创建renderer渲染器
    • • 代码如下所示
    • 第二步：创建摄像机，设置摄像机
    • • 代码如下所示
    • 第三步：创建场景、几何图形和材质，设置网格
    • • 代码如下所示
    • 第四步：设置渲染render
    • • 代码如下所示
    • 第五步：创建的立方体，结果图如下所示
    • 第六步：给立方体添加灯光效果
    • • 1.实现灯光效果，添加如下代码
      • • 切换材质，设置平行光效果，添加到场景上
        • 代码解释如下图
    • 第七步：添加光源后的结果，如下图所示
• 三、创建三个透光立方体的步骤如下
• • 1.设置一个创建立方体的工厂函数
  • 2.通过循环的形式给每个立方体添加旋转
  • 3.最终效果图如下
• 四、一个立方体的完整代码（CODE、code）
• 五、三个立方体的完整代码（CODE、code）
• 总结

一、最终的成果图如下所示：

1.图1如下所示（添加了光源的效果）：

2.图2如下所示（绘制了3个旋转的立方体）：

如下图所示（模糊问题）

解如下所示（解决模糊问题）

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、创建一个透光立方体的步骤如下

第一步：创建DOM，获取DOM，创建renderer渲染器

代码如下所示

//1,获取元素const canvas3D = document.querySelector('#canvas3D')//2,创建一个webGL的渲染器（将提供的所有数据，渲染到canvas上）const renderer = new THREE.WebGLRenderer({ canvas: canvas3D })

第二步：创建摄像机，设置摄像机

代码如下所示

  //3,需要一个透视摄像机const obj = {fov: 75, //视野范围(垂直方向为75度)aspect: 2, //画布的宽高比 (画布是300x150像素，所以宽高比为300/150或者说2,这里写死会造成拉伸的问题)near: 0.1,//近平面far: 5 //远平面}//(远平面、近平面)：任何距离小于或超过这个范围的物体都将被裁剪掉(不绘制)const camera = new THREE.PerspectiveCamera(obj.fov, obj.aspect, obj.near, obj.far)//4,移动摄像机 camera.position.z = 2

第三步：创建场景、几何图形和材质，设置网格

代码如下所示

    //5.创建一个场景const scene = new THREE.Scene()//6.创建一个立体盒子const boxObj = {width: 1, // 宽height: 1, //高length: 1 //长}const geometry = new THREE.BoxGeometry(boxObj.width, boxObj.length, boxObj.height)//7.创建面的材质（color可以用十六进制）const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }) //MeshBasicMaterial不受灯光影响的材质//8.创建   【几何图形和材质】  的承载体  【网格】 将几何图形和材质添加到网格上生成几何体const cube = new THREE.Mesh(geometry, material)//9.将几何体添加到场景中去scene.add(cube)

第四步：设置渲染render

代码如下所示

    //10.渲染立方体renderer.render(scene, camera)//render函数主要是为了设置旋转动画function render(time) {time *= 0.001cube.rotation.x = timecube.rotation.y = timerenderer.render(scene, camera)requestAnimationFrame(render)}//每一次执行结束的时间传给 render中的timerequestAnimationFrame(render) 

第五步：创建的立方体，结果图如下所示

第六步：给立方体添加灯光效果

1.实现灯光效果，添加如下代码

切换材质，设置平行光效果，添加到场景上

第一步：在创建材质的位置，切换材质，第二步：第8步下面，设置平行光效果；第三步，将平行光添加到场景上

 //7.创建面的材质（color可以用十六进制）// const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }) //MeshBasicMaterial不受灯光影响的材质const material = new THREE.MeshPhongMaterial({ color: 0x44aa88 }) //MeshPhongMaterial受灯光影响的材质//11.灯光效果（更立体，此处要修改第7步骤的材质）const lightObj = {color: 0xFFFFFF,intennsity: 1}const light = new THREE.DirectionalLight(lightObj.color, lightObj.intennsity)light.position.set(-1, 2, 5)//9.将几何体添加到场景中去scene.add(light) scene.add(cube)

代码解释如下图

第七步：添加光源后的结果，如下图所示

三、创建三个透光立方体的步骤如下

1.设置一个创建立方体的工厂函数

  function makeInstance(geometry, color, x) {const material = new THREE.MeshPhongMaterial({ color })const cube = new THREE.Mesh(geometry, material)scene.add(cube) //添加到场景中cube.position.x = xreturn cube}

2.通过循环的形式给每个立方体添加旋转

  //设置立方体数组（方便后续遍历）const cubes = [makeInstance(geometry, 0x44aa88, 0), makeInstance(geometry, 0x8844aa, -1.5), makeInstance(geometry, 0xaa8844, 1.5)]//添加旋转功能cubes.forEach((item, index) => {index++item.rotation.x = index * .1 * timeitem.rotation.y = index * .1 * time})

3.最终效果图如下

四、一个立方体的完整代码（CODE、code）

五、三个立方体的完整代码（CODE、code）

总结

创作不易，谢谢耐心观看！！！！！！：
此处的案例需要，引入js文件 threejs的文件！！！！！！！！！！！！！！！！！！