Javascript is required
1-邂逅Three.js
前端

三大核心组件

  • 场景scene
    • 网络模型Mesh
      • 几何对象
      • 材质对象
    • 光照Light
      • 平行光
      • 环境光
      • 点光源
  • 相机camera
  • 渲染器renderer

开发环境

  • 浏览器Chrome，FireFox
  • VSCode，WebStom

第一个3D场景

步骤

1. 创建场景
2. 创建相机
3. 创建坐标轴
4. 创建光源
5. 创建渲染器
6. 创建几何体
7. 创建渲染函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="box"></div>
</div>


</body>
<!-- 引入库文件 -->
<!--<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>-->
<script src="./dic/build/three.js"></script>
<script>
    // 1. 创建场景对象scene
    var scene = new THREE.Scene();

    // 2. 创建网络模型
    var geometry = new THREE.BoxGeometry(100, 100,100); // 正方体
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  
    /*
    *   光源设置
    * */
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400,200,300);
    scene.add(point);

    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    /**
     *  相机设置
     * */

    var width = 600;
    var height = 400;
    var k = width / height;
    var s = 200;
    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.querySelector(".box").appendChild(renderer.domElement); // 插入HTML
    
    
    renderer.render(scene,camera); // 执行渲染操作 指定场景，相机
</script>
</html>

image-20210301215318066

旋转动画

对上一个例子，修改几行代码

function render(){
        renderer.render(scene,camera); // 执行渲染操作 指定场景，相机
        mesh.rotateY(0.01);
        requestAnimationFrame(render)
    }
render();

每执行一次渲染器对象http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/renderers/WebGLRenderer的渲染方法.render()，浏览器就会渲染出一帧图像并显示在Web页面上，这就是说你按照一定的周期不停地调用渲染方法.render()就可以不停地生成新的图像覆盖原来的图像。这也就是说只要一边旋转立方体，一边执行渲染方法.render()重新渲染，就可以实现立方体的旋转效果。

方案1:

为了实现周期性渲染可以通过浏览器全局对象window对象的一个方法setInterval(),可以通过window对象调用该方法window.setInterval()，也可以直接以函数形式调用setInterval()。

setInterval()是一个周期性函数，就像一个定时器，每隔多少毫秒ms执行一次某个函数。

// 间隔20ms周期性调用函数fun
setInterval("render()",20)

方案2

requestAnimationFrame函数。requestAnimationFrame()和setInterval()一样都是浏览器window对象的方法。

requestAnimationFrame()参数是将要被调用函数的函数名，requestAnimationFrame()调用一个函数不是立即调用而是向浏览器发起一个执行某函数的请求， 什么时候会执行由浏览器决定，一般默认保持60FPS的频率，大约每16.7ms调用一次requestAnimationFrame()方法指定的函数

鼠标操作三维场景

为了使用鼠标操作三维场景，可以借助three.js众多控件之一OrbitControls.js，可以在下载的three.js-master文件中找到(three.js-master\examples\js\controls)。 然后和引入three.js文件一样在html文件中引入控件OrbitControls.js。

<script src="../dic/examples/js/controls/OrbitControls.js"></script>

核心代码

function render() {
  renderer.render(scene,camera);//执行渲染操作
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件

OrbitControls.js控件提供了一个构造函数THREE.OrbitControls()，把一个相机对象作为参数的时候，执行代码new THREE.OrbitControls(camera,renderer.domElement)，浏览器会自动检测鼠标键盘的变化， 并根据鼠标和键盘的变化更新相机对象的参数，比如你拖动鼠标左键，浏览器会检测到鼠标事件，把鼠标平移的距离按照一定算法转化为相机的的旋转角度，你可以联系生活中相机拍照,即使景物没有变化，你的相机拍摄角度发生了变化，自然渲染器渲染出的结果就变化了，通过定义监听事件controls.addEventListener('change', render)，如果你连续操作鼠标，相机的参数不停的变化，同时会不停的调用渲染函数render()进行渲染，这样threejs就会使用相机新的位置或角度数据进行渲染。

执行构造函数THREE.OrbitControls()浏览器会同时干两件事，一是给浏览器定义了一个鼠标、键盘事件，自动检测鼠标键盘的变化，如果变化了就会自动更新相机的数据， 执行该构造函数同时会返回一个对象，可以给该对象添加一个监听事件，只要鼠标或键盘发生了变化，就会触发渲染函数.

  • 缩放：滚动—鼠标中键
  • 旋转：拖动—鼠标左键
  • 平移：拖动—鼠标右键

链接

https://threejs.org/

github链接

https://github.com/mrdoob/three.js

WebGL零基础入门教程

http://www.yanhuangxueyuan.com/WebGL/

Three.js相关开源库

库功能
https://github.com/chandlerprall/PhysijsPhysijs是一款物理引擎，可以协助基于原生WebGL或使用three.js创建模拟物理现象，比如重力下落、物体碰撞等物理现
https://github.com/mrdoob/stats.jsJavaScript性能监控器，同样也可以测试webgl的渲染性能
https://github.com/dataarts/dat.gui轻量级的icon形用户界面框架，可以用来控制Javascript的变量，比如WebGL中一个物体的尺寸、颜色
https://github.com/tweenjs/tween.js/借助tween.js快速创建补间动画，可以非常方便的控制机械、游戏角色运动
https://github.com/sshirokov/ThreeBSP可以作为three.js的插件，完成几何模型的布尔，各类三维建模软件基本都有布尔的概念