乐趣区

关于three.js:关于Threejs的基本使用和概念场景相机渲染器等

jiezi

这是一个底层基于 WebGL 开发的 3D 渲染引擎（当然，后续是否会正式公布基于 WebGPU 的版本，也是可能的）。

和间接应用 WebGL 相比，比方着色器，大部分状况下你无需本人开发，不过，状况并不总是这样，如果你的需要太过非凡，咱们仍旧能够用更靠近原生的形式来绘制，这是一个十分敌对的设计。

绘制流程

个别最通用的绘制流程大抵如下：

筹备好场景 → 筹备好相机 → 应用渲染器渲染进去

你能够提前看看咱们最终要绘制的成果：

这是一个旋转的立方体。

你能够点击此处进行查看运行成果。

场景

所谓的场景，也就是空间的属性，就是以后空间外面有什么货色；比方：有什么物体（物体的材质、形态、尺寸）、有没有光（点光源还是环境光、或者平行光）等。

对咱们这里而言，很显著，空间里有一个正六面体，而且，如同还有光照在下面。

那么，咱们首先创立好场景，后续再补充场景中的内容：

var scene = new THREE.Scene();

网格模型

当初，咱们来创立一个立方体:

var geometry = new THREE.BoxGeometry(100, 100, 100);

立方体是红色的，所以，还须要创立一个材质对象：

var material = new THREE.MeshLambertMaterial({color: "red"});

而后，把立方体和材质对象关联起来，就取得了示意这个残缺立方体信息的模型对象了：

var mesh = new THREE.Mesh(geometry, material);

最初，把这个立方体放到之前创立的空间中去：

scene.add(mesh);

光照

光个别有多种，比方环境光，其实咱们就能够认为是漫反射，在原生代码中，咱们须要本人设计光叠加的算法，而在这里，你只须要调用 api 设置参数即可：

var ambient = new THREE.AmbientLight("green");

同样的，也须要被增加到以后空间中去：

scene.add(ambient);

别的类型的光也相似，只是设置的参数不一样，这里就不再赘述了。

相机

其实就相当于你的眼睛的可视区域。空间中有什么，不代表你就应该看见什么，通过相机来确定你看的地位、方向、范畴等。

还有一点须要特地阐明，因为你看见的其实是立体，空间自身是 3D 的，那就存在一个投影算法，不同的投影算法最终你空间的内容也是不一样的（咱们这里抉择的是正射投影），整体来说比拟好了解，间接看代码：

var width = window.innerWidth; // 窗口宽度
var height = window.innerHeight; // 窗口高度
var k = width / height; // 窗口宽高比
var s = 100; // 三维场景显示范畴管制系数，系数越大，显示的范畴越大

var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

camera.position.set(200, 300, 200); // 设置相机地位
camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)

渲染器

好了，空间筹备好了，相机也筹备好了，接下来就是渲染进去了。

首先，创立好渲染器：

var renderer = new THREE.WebGLRenderer();

而后，设置好参数：

renderer.setSize(width, height);// 设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); // 设置背景色彩

最终渲染的内容在哪里显示？以后是页面了，所以渲染器须要关联到页面中：

document.body.appendChild(renderer.domElement);

所有准备就绪，渲染即可：

renderer.render(scene, camera);

变换

相比最终的成果，咱们绘制进去的是一个静止的，怎么办？

你能够批改相机的地位、角度等，或者扭转物体的地位。比方这里，咱们扭转物体的地位：

mesh.rotateY(0.01);

同样的，扭转结束后，从新应用渲染器渲染即可。

更多

更多简单的场景，也是在下面每步的调整，比方空间中有什么，不是只有下面的写法，你也能够应用顶点来自定义示意，只不过，下面的一个大体的思路，后续更丰盛的学习，有了下面的大的架子，会更容易了解。

始终记住一点：难的绝不是 3D 自身，而是其背地一系列的算法和数学知识。不过，置信聪慧的你，肯定会轻松把握这所有。

残缺代码

原文地址

<!DOCTYPE html>
<html lang="zh-cn">

<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">
    <script src="https://unpkg.com/three@0"></script>
    <style>
        body {margin: 0;}
    </style>
</head>

<body>
    <script>

        //【1】创立场景对象 Scene
        var scene = new THREE.Scene();

        // 创立网格模型

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

        // 材质对象 Material
        var material = new THREE.MeshLambertMaterial({color: "red"});

        // 网格模型对象 Mesh
        var mesh = new THREE.Mesh(geometry, material);

        // 网格模型增加到场景中
        scene.add(mesh);

        // 光源设置

        // 点光源
        var point = new THREE.PointLight("white");
        point.position.set(400, 200, 300); // 点光源地位
        scene.add(point); // 点光源增加到场景中

        // 环境光
        var ambient = new THREE.AmbientLight("green");
        scene.add(ambient);

        //【2】相机设置

        var width = window.innerWidth; // 窗口宽度
        var height = window.innerHeight; // 窗口高度
        var k = width / height; // 窗口宽高比
        var s = 100; // 三维场景显示范畴管制系数，系数越大，显示的范畴越大

        // 创立相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

        camera.position.set(200, 300, 200); // 设置相机地位
        camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)

        //【3】创立渲染器对象

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(width, height);// 设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); // 设置背景色彩
        document.body.appendChild(renderer.domElement); //body 元素中插入 canvas 对象

        function render() {

            // 执行渲染操作   指定场景、相机作为参数
            renderer.render(scene, camera);

            mesh.rotateY(0.01);// 每次绕 y 轴旋转 0.01 弧度
            requestAnimationFrame(render);// 申请再次执行渲染函数 render

        }

        render();

    </script>
</body>

</html>
退出移动版