THREEJS基础入门

最新推荐文章于 2024-05-11 10:02:37 发布

Ss、、帅海

最新推荐文章于 2024-05-11 10:02:37 发布

阅读量1.2k

点赞数 3

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_57965131/article/details/125497507

版权

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

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

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

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

yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=

这样就可以正常打开了。

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

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

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

透视相机参数详解

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

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

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

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

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

 body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden;
        }

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

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

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

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

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

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

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

 var material = new THREE.LineBasicMaterial（{}）

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

  //创建一个材质对象Material
    var material = new THREE.LineBasicMaterial({
         color: 'pink',
        // 开启透明
        // transparent: true,
        //透明度
        opacity: 1

    });

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

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

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

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

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

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

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

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

    }

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

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

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

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

首先引入一个小小的控件

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

然后将控件实例化就行

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

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

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

<!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>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden;
        }
    </style>

</head>

<body>

</body>
<script src="./three.js-r137/build/three.js"></script>
<script src="./three.js-r137/examples/js/controls/OrbitControls.js"></script>
<script>
    //创建3D场景对象Scene
    var scene = new THREE.Scene();
    //创建网络模型
    // 创建一个长方体几何对象Geometry
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    //创建一个材质对象Material
    var material = new THREE.LineBasicMaterial({
        color: 'pink',
        // //开启透明
        // transparent: true,
        //透明度
        opacity: 1

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

    }

    
    
    //创建一个透视摄像机对象
    let width = window.innerWidth
    let height = window.innerHeight
    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 8000)
    // camera.position.set(200, 200, 200)
    camera.position.set(2000, 2000, 2000)
    // camera.lookAt(0, 0, 0)
    camera.lookAt(1000, 0, 1000)

    //创建一个渲染器对象
    let renderer = new THREE.WebGLRenderer()
    //设置渲染器的大小
    renderer.setSize(width, height)
    //设置背景颜色
    // renderer.setClearColor('gold', 0.5)
    //咔  渲染操作
    renderer.render(scene, camera)
    //添加到页面中
    document.body.appendChild(renderer.domElement)

    //创建一个控制器对象
    const controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.target.set(1000,0,1000)
    controls.update()
    controls.addEventListener('change', function () {
        renderer.render(scene, camera)
    })
</script>

</html>

Ss、、帅海

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
THREEJS基础入门

什么是threejs，很简单，你将它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。Javascript是运行在网页端的脚本语言，那么毫无疑问Three.js也是运行在浏览器上的。先说配置环境吧，如果已经配置过node的，那就直接npm下载吧，如果没有配置过得，或者想快速简单的实操一...
复制链接

扫一扫