• THREEJS基础入门

     大家好啊，又是长时间没更新，最近在学习threejs，发现很好玩，于是大概学习了一下

    什么是threejs，很简单，你将它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。

    Javascript是运行在网页端的脚本语言，那么毫无疑问Three.js也是运行在浏览器上的。

            先说配置环境吧，如果已经配置过node的，那就直接npm下载吧，如果没有配置过得，或者想快速简单的实操一下，那么推荐下载vscode上的一个插件叫做live server

    yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

     这样就可以正常打开了。

            

            首先，我们要定义threejs中最基础的东西，scene(场景)、camera（相机）和renderer（渲染器)。
            

    1.  //创建3D场景对象Scene
    2.     var scene = new THREE.Scene();
    3.  //创建一个透视摄像机对象
    4.     let width = window.innerWidth
    5.     let height = window.innerHeight
    6.     const camera = new THREE.PerspectiveCamera(45, width / height, 1, 8000)
    7.  //创建一个渲染器对象
    8.     let renderer = new THREE.WebGLRenderer()

    此时，基本步骤已经做好，场景，相机，渲染器都已经new出来了，当然，还没完

    透视相机参数详解

     

     第一个参数就是视场（也就是角度大小），第二个是宽高比，第三个就是近面的距离，第四个就是远面的距离。

    此时，我们要先对渲染器做一些操作，

    1.  //设置渲染器的大小
    2.     renderer.setSize(width, height)
    3.     //咔  渲染操作
    4.     renderer.render(scene, camera)
    5.     //添加到页面中
    6.     document.body.appendChild(renderer.domElement)

    此时，如果你打开的页面是这样的，那么这几步就是没问题的

     但是你会发现有两个下拉框，但是你又不想要，你可以这样，加点css样式就可以

    1.  body {
    2.             margin: 0;
    3.             padding: 0;
    4.             box-sizing: border-box;
    5.             overflow: hidden;
    6.         }

    此时，这两个下拉框就没有了，页面一片黑漆漆的

    这里，我们就要创建几何模型了，我这里创建一个最简单的几何对象

    1.  // 创建一个长方体几何对象Geometry
    2.     var geometry = new THREE.BoxGeometry(100, 100, 100);

    后面三个参数分别对应这长宽高

    此时，我们就需要设置一下相机参数

    1. //设置相机位置
    2.  camera.position.set(200, 200, 200)
    3. //设置相机在哪拍摄
    4.  camera.lookAt(0, 0, 0)

    当然，我们创建几何模型还不够，需要创建一个基础材质对象Material，不需要光照就可以显示的那种

     var material = new THREE.LineBasicMaterial（{}）

    我们可以设置一个颜色，在那个大括号里面可以写入我们的配置项

    1.   //创建一个材质对象Material
    2.     var material = new THREE.LineBasicMaterial({
    3.          color: 'pink',
    4.         // 开启透明
    5.         // transparent: true,
    6.         //透明度
    7.         opacity: 1
    8.  
    9.     });

    此时，我们还需要创建一个网格模型对象Mesh

    将几何模型和材质放进去，并将其添加到场景中

    1.   //创建一个网格模型对象Mesh
    2.     var mesh = new THREE.Mesh(geometry, material);
    3.     scene.add(mesh);

    此时，你就可以看到这样的场景

    那说明你第一个小案例已经成功，

    那我们趁热打铁，，生成121个这样的立方体

    我们只需要一个双层for循环

    1.  for (let i = 0; i <= 10; i++) {
    2.         for (let j = 0; j <= 10; j++) {
    3.             //创建一个网格模型对象Mesh
    4.             var mesh = new THREE.Mesh(geometry, material);
    5.             mesh.position.set(i * 200, 0, j * 200);
    6.             //将网格模型对象添加到场景对象中
    7.             scene.add(mesh);
    8.         }
    9.  
    10.     }

     但是，我们打开网页，发现生成的是这样子的

    此时，我们仅需要把相机参数改一下，因为站得高，才能看得远嘛

    1.     camera.position.set(2000, 2000, 2000)
    2.     camera.lookAt(1000, 0, 1000)

     

     但是这时你想要滑动页面看看剩下的，你却发现滑动不了，别担心，你只需要这样

    首先引入一个小小的控件

    <script src="./three.js-r137/examples/js/controls/OrbitControls.js"></script>

    然后将控件实例化就行

    1.  //创建一个控制器对象
    2.     const controls = new THREE.OrbitControls(camera, renderer.domElement)
    3.     controls.target.set(1000,0,1000)
    4.     controls.update()
    5.     controls.addEventListener('change', function () {
    6.         renderer.render(scene, camera)
    7.     })

    此时，你就可以随意滑动你的页面来欣赏这121个小立方体了

    好了，本篇到此结束，附上源码供大家参考

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         body {
    11.             margin: 0;
    12.             padding: 0;
    13.             box-sizing: border-box;
    14.             overflow: hidden;
    15.         }
    16.     </style>
    17.  
    18. </head>
    19.  
    20. <body>
    21.  
    22. </body>
    23. <script src="./three.js-r137/build/three.js"></script>
    24. <script src="./three.js-r137/examples/js/controls/OrbitControls.js"></script>
    25. <script>
    26.     //创建3D场景对象Scene
    27.     var scene = new THREE.Scene();
    28.     //创建网络模型
    29.     // 创建一个长方体几何对象Geometry
    30.     var geometry = new THREE.BoxGeometry(100, 100, 100);
    31.     //创建一个材质对象Material
    32.     var material = new THREE.LineBasicMaterial({
    33.         color: 'pink',
    34.         // //开启透明
    35.         // transparent: true,
    36.         //透明度
    37.         opacity: 1
    38.  
    39.     });
    40.      //创建一个网格模型对象Mesh
    41.     // var mesh = new THREE.Mesh(geometry, material);
    42.     // scene.add(mesh);
    43.     for (let i = 0; i <= 10; i++) {
    44.         for (let j = 0; j <= 10; j++) {
    45.             //创建一个网格模型对象Mesh
    46.             var mesh = new THREE.Mesh(geometry, material);
    47.             mesh.position.set(i * 200, 0, j * 200);
    48.             //将网格模型对象添加到场景对象中
    49.             scene.add(mesh);
    50.         }
    51.  
    52.     }
    53.  
    54.     
    55.     
    56.     //创建一个透视摄像机对象
    57.     let width = window.innerWidth
    58.     let height = window.innerHeight
    59.     const camera = new THREE.PerspectiveCamera(45, width / height, 1, 8000)
    60.     // camera.position.set(200, 200, 200)
    61.     camera.position.set(2000, 2000, 2000)
    62.     // camera.lookAt(0, 0, 0)
    63.     camera.lookAt(1000, 0, 1000)
    64.  
    65.     //创建一个渲染器对象
    66.     let renderer = new THREE.WebGLRenderer()
    67.     //设置渲染器的大小
    68.     renderer.setSize(width, height)
    69.     //设置背景颜色
    70.     // renderer.setClearColor('gold', 0.5)
    71.     //咔  渲染操作
    72.     renderer.render(scene, camera)
    73.     //添加到页面中
    74.     document.body.appendChild(renderer.domElement)
    75.  
    76.     //创建一个控制器对象
    77.     const controls = new THREE.OrbitControls(camera, renderer.domElement)
    78.     controls.target.set(1000,0,1000)
    79.     controls.update()
    80.     controls.addEventListener('change', function () {
    81.         renderer.render(scene, camera)
    82.     })
    83. </script>
    84.  
    85. </html>

  • 相关阅读:
    【前端精进之路】JS篇：第4期 作用域
    MVC拦截器
    【Flyweight模式】C++设计模式——享元模式
    Docker容器技术
    apache和IIS区别？内网本地服务器项目怎么让外网访问？
    CF1719 --- Codeforces Round #814 (Div. 2)
    ASP.NET Core - 请求管道与中间件
    图表控件LightningChart使用教程：创建2D 热点图图表
    非自交任意多边形与矩形框的交集面积计算方法
    测试架构工程师需要具备哪些能力 ？
  • 原文地址：https://blog.csdn.net/m0_57965131/article/details/125497507