Three.js入门（涉及如何让平面物体变成立体的、添加坐标辅助系、物体移动）

---

一、如何让平面物体变成立体的

使用控制器（controls）。

创建main01.js，复制main.js的内容。

1.在最开始导入轨道控制器：

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

2.创建轨道控制器：

const controls = new OrbitControls(camera,renderer.domElement)
//这里监听的对象是canvas画布

OrbitControls( object : Camera, domElement : HTMLDOMElement )

​ object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。

		domElement: 用于事件监听的HTML元素。 	

由于浏览器是不断刷新的，我们应该手动反复渲染，因此调用如下函数，并使用方法**requestAnimationFrame()**请求动画帧：

function render(){
  renderer.render(scene, camera);
requestAnimationFrame(render)
  //将渲染函数render传进来，在下一帧就会执行该函数
}

render();

二、如何添加坐标辅助系

使用AxesHelper。

AxesHelper( size : Number )

​ size：(可选的) 表示代表轴的线段长度，默认为 1。

const axesHelper = new THREE.AxesHelper(5);
//添加坐标轴辅助器
scene.add(axesHelper)

三、如何实现3D物体的移动

第一种方法-使用set()：

cube.position.set(5,0,0)

第二种方法-使用position.x()直接修改x的值：

cube.position.x = 3

three.js是一款基于webgl的三位引擎。

那么如何实现自动移动？

function render(){
  cube.position.x+=0.01;
  if(cube.position.x>5){
  cube.position.x=0
  }
  renderer.render(scene, camera);
requestAnimationFrame(render)
  //将渲染函数render传进来，在下一帧就会执行该函数
}

render();

---

以上就是本篇文章的全部内容。本篇文章简单介绍了如何应用three.js让平面物体变成立体的、添加坐标辅助系、物体移动相关内容，也是我今天的学习复盘。大家下期见！