1、前言

最近闲啊，快闲了两个月了。估计要一直闲到年底去。

最近三个星期吧，都是在学习中。先学了react，等自己搭建起基本的脚手架模型了就不想写了。总感觉写到后面也就和vue差别不大了。

然后学c++，学了个基础，学完了指针和构造函数。发现我学C++暂时没有什么收益。虽然比较受用。而且对方教程很好。但是心中慢慢的觉得我目前而言也就算初级前端吧。学c++，除了增加知识广度之外，对于吃饭的家伙没有什么帮助。而且wasm的发展还有很长的路。

然后就决定flutter和webgl两个中选择吧。

最后觉得webgl虽然远，但是觉得学习方面不要求太深入。就先学webgl了

我个人是找了个视频，跟着走了一遍。感觉有点印象了。先放个第一版。这个过程大概也就两三个文章样子吧。

2、开干

1、准备环境

第一个是这个，未压缩的threeJS：https://threejs.org/build/three.js

还有git地址：https://github.com/mrdoob/three.js/

都能下载到thress.js文件

2、环境目录

demo1
    assets // 图片
    index.html
    index.js
    three.js

html文件内部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo1</title>
  <script src="three.js"></script>
  <!--<link rel="stylesheet" href="index.css">-->
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
</body>
<script src="index.js"></script>
</html>

这个有基础的看看就行，没什么东西。

3、创建场景和摄像机

'use strict';
~function () {
  //1、创建场景和摄像机
  const scence = new THREE.Scene();
  //2、创建摄像机
  /*const camera =
    new THREE.PerspectiveCamera("视角", "指窗口的长宽比例", "表示从摄像机多远的位置开始渲染", "表示距离摄像机多远的位置截止渲染 1000");*/
  const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
  // 3、创建threeJS渲染器
  const renderer = new THREE.WebGLRenderer();
  // 4、设置渲染器场景大小
  renderer.setSize(document.body.clientWidth, document.body.clientHeight);

  //投射到页面中
  document.body.appendChild(renderer.domElement);
}();

注意看注释，这上面的代码之后就会有一个黑色的背景在浏览器上面展示

4、创建几何模型

// 5、创建基础几何模型
//const geometry = new THREE.BoxGeometry("x轴","y轴", "z轴");//就像长宽高
const geometry = new THREE.BoxGeometry(2, 2, 2);
// 创建材质
//const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const material = new THREE.MeshBasicMaterial( { map: texture } );
// 结合材质和几何体
const cube = new THREE.Mesh(geometry, material);
// 添加到场景当中
scence.add(cube);
camera.position.z = 6;

这时候就能看到页面上面有一个正方形，不过大家会好奇怎么不是正方体。继续操作下去就行了

注意这个代码：camera.position.z = 6;

这个是调整你的视线长度。值越大，物体越小。参考现实中看景物。当景物非常近的时候，也就是黑色。看不到

5、添加动画

// requestAnimationFrame创建动画帧
function animate() {
  requestAnimationFrame(animate); // 递归自调用
  // 网格对象自旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 渲染器渲染 场景和相机
  renderer.render(scence, camera); //反复渲染
}
animate();
// 调整视角z的距离，太近看不到
camera.position.z = 6;

这样之后就会让正方体旋转起来

6、自适应屏幕大小

//尺寸响应式
window.addEventListener('resize', () => {
  // 初始化摄像机
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  // 修改渲染场景大小
  renderer.setSize(document.body.clientWidth, document.body.clientHeight);
});

7、不用颜色显示，改用图片

修改上面的代码中

// 创建纹理贴图
const texture = new THREE.TextureLoader().load( "assets/mao1.jpg" );
// 创建材质
//const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const material = new THREE.MeshBasicMaterial( { map: texture } );

这里有一个坑：图片的长宽比要 2的次方：1，也不知道为什么。有大神知道请留言

8、完整代码

'use strict';
~function () {
  //1、创建场景和摄像机
  const scence = new THREE.Scene();
  //2、创建摄像机
  /*const camera =
    new THREE.PerspectiveCamera("视角", "指窗口的长宽比例", "表示从摄像机多远的位置开始渲染", "表示距离摄像机多远的位置截止渲染 1000");*/
  const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
  // 3、创建threeJS渲染器
  const renderer = new THREE.WebGLRenderer({antialias: true});
  // 4、设置渲染器场景大小
  renderer.setSize(document.body.clientWidth, document.body.clientHeight);

  //投射到页面中
  document.body.appendChild(renderer.domElement);

  // 5、创建基础几何模型
  //const geometry = new THREE.BoxGeometry("x轴","y轴", "z轴");
  const geometry = new THREE.BoxGeometry(2, 2, 2);
  // 创建纹理贴图
  const texture = new THREE.TextureLoader().load( "assets/mao1.jpg" );
  // 创建材质
  //const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
  const material = new THREE.MeshBasicMaterial( { map: texture } );
  // 结合材质和几何体
  const cube = new THREE.Mesh(geometry, material);
  // 添加到场景当中
  scence.add(cube);
  // requestAnimationFrame创建动画帧
  function animate() {
    requestAnimationFrame(animate); // 递归自调用
    // 网格对象自旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 渲染器渲染 场景和相机
    renderer.render(scence, camera); //反复渲染
  }
  animate();
  // 调整视角z的距离，太近看不到
  camera.position.z = 6;
  //尺寸响应式
  window.addEventListener('resize', () => {
    // 初始化摄像机
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    // 修改渲染场景大小
    renderer.setSize(document.body.clientWidth, document.body.clientHeight);
  });
}();

三、致谢：

教程来自csdn的视频基础教程

webGL（ThreeJS）入门1