Three.js 初阶基础篇（二）

于 2023-02-01 17:37:35 发布
阅读量777 收藏
点赞数
分类专栏： Threejs进阶大佬的初阶之路 文章标签： javascript Threejs webGL canvas画布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46022934/article/details/128836337
版权

系列文章目录

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

文章目录

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

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

在这里插入图片描述

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

如下图所示（模糊问题）

在这里插入图片描述

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

在这里插入图片描述

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

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

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

代码如下所示

	<body>
	    <canvas id="canvas3D"></canvas>
	</body>

    //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.001
        cube.rotation.x = time
        cube.rotation.y = time
        renderer.render(scene, camera)
        requestAnimationFrame(render)

    }
    //每一次执行结束的时间传给 render中的time
    requestAnimationFrame(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 = x
        return 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 * time
      item.rotation.y = index * .1 * time

   })

3.最终效果图如下

在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas3D"></canvas>
</body>
<script src="../three/index.js"></script>

<script>
    //1,获取元素
    const canvas3D = document.querySelector('#canvas3D')
    //2,创建一个webGL的渲染器（将提供的所有数据，渲染到canvas上）
    const renderer = new THREE.WebGLRenderer({ canvas: canvas3D })
    renderer.setSize(window.innerWidth, window.innerHeight)
    //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.MeshPhongMaterial({ color: 0x44aa88 }) //MeshPhongMaterial受灯光影响的材质


    //8.创建   【几何图形和材质】  的承载体  【网格】 将几何图形和材质添加到网格上生成几何体
    const cube = new THREE.Mesh(geometry, material)

    //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) // 11步骤添加的灯光
    scene.add(cube)


    //10.渲染立方体
    renderer.render(scene, camera)
    function render(time) {
        time *= 0.001
        cube.rotation.x = time
        cube.rotation.y = time
        renderer.render(scene, camera)
        requestAnimationFrame(render)

    }
    requestAnimationFrame(render)


</script>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas3D"></canvas>
</body>
<script src="../three/index.js"></script>

<script>
    //1,获取元素
    const canvas3D = document.querySelector('#canvas3D')
    //2,创建一个webGL的渲染器（将提供的所有数据，渲染到canvas上）
    const renderer = new THREE.WebGLRenderer({ canvas: canvas3D })
    renderer.setSize(window.innerWidth, window.innerHeight)
    //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.MeshPhongMaterial({ color: 0x44aa88 }) //MeshPhongMaterial受灯光影响的材质


    //8.创建   【几何图形和材质】  的承载体  【网格】 将几何图形和材质添加到网格上生成几何体
    const cube = new THREE.Mesh(geometry, material)

    //11.灯光效果（更立体，此处要修改第7步骤的材质）
    const lightObj = {
        color: 0xFFFFFF,
        intennsity: 1
    }
    const light = new THREE.DirectionalLight(lightObj.color, lightObj.intennsity)
    light.position.set(-1, 2, 5)

    //12.创建一个 立方体工厂
    function makeInstance(geometry, color, x) {
        const material = new THREE.MeshPhongMaterial({ color })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)
        cube.position.x = x
        return cube
    }


    //9.将几何体添加到场景中去
    const cubes = [makeInstance(geometry, 0x44aa88, 0), makeInstance(geometry, 0x8844aa, -1.5), makeInstance(geometry, 0xaa8844, 1.5)]
    scene.add(light)


    //10.渲染立方体
    renderer.render(scene, camera)
    function render(time) {
        time *= 0.001
        //13.通过编辑旋转
        cubes.forEach((item, index) => {
            index++
            item.rotation.x = index * .1 * time
            item.rotation.y = index * .1 * time

        })
        renderer.render(scene, camera)
        requestAnimationFrame(render)

    }
    requestAnimationFrame(render)


</script>

</html>

总结

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

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

满脑子技术的前端工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值