第一天学习threejs

threejs下载地址：

https://github.com/mrdoob/three.js/releases/tag/r169

引入方法

<script type="module">
   import * as THREE from '../three.js-master/build/three.module.js'
 </script>

Scene：

场景对象

创建场景

var scene = new THREE.Scene()

Camera:

摄像机对象

摄像机分为很多种，例如 远景相机正交相机

摄像机参数：(fov,aspect ratio,near,far)

可视角度，宽高比，近截面，远截面

创建摄像机

var camera=new Three.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000)

renderer:

渲染器对象

创建webGL渲染器

var renderer=new WebGLRenderer()

创建完成之后，会存储在renderer的domElement中

向body中插入渲染器

document.body.appendChild(domElement)

然后设置渲染器的画布大小

renderer.setSize(window.innerWidth,window.innerHeight)

创建一个立方体

var geometry=new THREE.BoxGeometry(1,1,1)
//宽 高 深度

创建一个材质

var material=new THREE.MeshBasicMaterial({color:0x00ff00})

将立方体和材质放在一个网格内

创建网格

var cube =new THREE.Mesh(geomerty,material)

在画布内添加这个已经组合起来的立方体

scene.add(cube)

现在立方体和摄像机贴在了一起，将摄像机的z轴调整，距离立方体远点

Camera.position.z=1

然后渲染器渲染(场景，摄像机)

renderer.render(scene,camera)

最后设置立方体旋转

这里利用到了window全局对象上挂载的requestAnimationFrame(callback)函数，

他会在浏览器切换页面时自动暂停动画，并且动画是按照显示器的帧率来的

function animate(){
  requestAnimation(animate)
  cube.position.x+=0.01
  cube.position.y+=0.01
  renderer.render(scene,camera)
}
animate()

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script type="module">
    import * as THREE from '../three.js-master/build/three.module.js';
    window.THREE = THREE;
    const three = THREE;
    var scene = new three.Scene();
    // 创建相机 远景相机 正交相机
    var camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    var renderer = new three.WebGLRenderer();
    document.body.appendChild(renderer.domElement);

    renderer.setSize(window.innerWidth, window.innerHeight);

    var geometry = new three.BoxGeometry(1, 1, 1); //立方体
    var material = new three.MeshBasicMaterial({ color: 0x00ff00 }); //材质
    var cube = new three.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
    renderer.render(scene, camera)

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate()
  </script>
  <script>

  </script>
</body>

</html>