Three.js 初阶基础篇（二）

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

系列文章目录

我今天又来了更新了今天主要还是回顾一下昨天的一内容在昨天的基础上又重新梳理了一下创建动态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的文件

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：基于Android的校园资产管理系统

下一篇：什么是公网IP？公网IP和内网IP的区别

“Three.js 初阶基础篇（二）” 的相关文章

如何实现报表集成？（二）——用户同步和单点登录1年前 (2023-02-02)
WPF 已知问题 dotnet 6 设置 InvariantGlobalization 之后将丢失默认绑定转换导致 XAML 抛出异常1年前 (2023-02-02)
深入学习IO多路复用 select/poll/epoll 实现原理1年前 (2023-02-02)
你可能不知道的20个Git命令，但真的很实用1年前 (2023-02-02)
Linux驱动入门1年前 (2023-02-02)
windows11预览版装WSA心得1年前 (2023-02-02)
后端跨域问题导致java.io.IOException: UT010029: Stream is closed解决办法1年前 (2023-02-02)
springboot~logback按level添加不同的颜色1年前 (2023-02-02)
AI+OCR赋能古彝文数字化—让经典重新跳动1年前 (2023-02-02)
使用 Python 进行网页抓取1年前 (2023-02-02)

阿里云国际版