Three.js入门（涉及如何让平面物体变成立体的、添加坐标辅助系、物体移动）
文章目录
- 一、如何让平面物体变成立体的
- 二、如何添加坐标辅助系
- 三、如何实现3D物体的移动
一、如何让平面物体变成立体的
使用控制器（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让平面物体变成立体的、添加坐标辅助系、物体移动相关内容，也是我今天的学习复盘。大家下期见！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！