前言
voxel-controls 是一个基于 Three.js 和拓展模块拥有良好互动体验的 3D 编辑器的 npm 包。使用该 npm 包可以快速地创建出一个拥有自由控制面板的 3D 编辑器。
在进行开发时，如何应用该 npm 包可能是一个需要解决的问题。本文将详细介绍 npm 包的使用和开发指导，并提供示例代码供读者参考。
本教程不假设读者已经有 Three.js 基础，但需要读者具有 JavaScript 基础。
安装
环境要求：Node.js、npm、Three.js，可在 index.html 中使用
<body> <script src="https://cdn.jsdelivr.net/npm/three"></script> <script src="https://unpkg.com/voxel-controls"></script> <script src="index.js"></script> </body>
或者在 JavaScript 文件中使用：
import Three from 'three' import Controls from 'voxel-controls'
使用
首先需要初始化场景以及相机。
const scene = new Three.Scene() const camera = new Three.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
然后就可以创建实例并进行配置了。
const controls = new Controls(camera,document.querySelector('canvas'))
controls.setPosition(0,0,120)
controls.zoomSpeed = 2
以上代码就可以创建一个可交互的 3D 编辑器了。
方法和事件
接下来是一些用到的和可能用到的方法以及事件。
setPosition(x,y,z)
设置相机的位置
controls.setPosition(0,0,120)
setTarget(x,y,z)
设置相机的目标的坐标
controls.setTarget(0,0,0)
setRotate(x,y,z)
设置相机的旋转
controls.setRotate(0,0,0)
setRange(min,max)
设置拖拽时的范围
controls.setRange(0,120)
setZoom(min,max)
设置缩放的范围
controls.setZoom(2,20)
event:drag
监听拖拽时相机的位置，返回一个参数为相机位置的回调函数
controls.ondrag = (position) => console.log(position)
event:click
监听点击事件，返回一个参数为点击位置的回调函数
controls.onclick = (point) => console.log(point)
结论
通过上面的代码，我们可以了解到如何使用 voxel-controls 包来快速创建一个有互动体验的 3D 编辑器。不仅快速，也是可定制的。
参考代码
下面是一些参考代码以及对应的效果。
创建一个展示球体并允许拖拽的场景
-- -------------------- ---- ------- ----- ----- - --- ------------- ----- ------ - --- ------------------------------------------------------------------------- ----- -------- - --- --------------------- ---------- ---- -- ----------------------------------- ------------------- ---------------------------------------------- -- ---- ----- -------- - --- ------------------------ --- --- ----- -------- - --- ------------------------- ------ --------- ---------- ---- -- ----- ------ - --- -------------------- --------- ----------------- -- ---- ----- -------- - --- ------------------------------------ ----------------------------- ------------------ - - ---------------- - ------- -- ------------------ -------- --------- - ------------------------------ ---------------------- ------- - ---------
创建一个立方体并允许放大缩小和旋转
-- -------------------- ---- ------- ----- ----- - --- ------------- ----- ------ - --- ------------------------------------------------------------------------- ----- -------- - --- --------------------- ---------- ---- -- ----------------------------------- ------------------- ---------------------------------------------- -- ----- ----- -------- - --- --------------------- --- --- ----- -------- - --- ------------------------- ------ -------- -- ----- ---- - --- -------------------- --------- --------------- -- ---- ----- -------- - --- ------------------------------------ ------------------ - - --------------- - ------- -- --------------------- ------ ---------------- - ------- -- ---------------------- ------ -------- --------- - ------------------------------ ----- --------- - ---------------- -------------------------- ---------------------- ------- - ---------
创建一个控制交互体验
-- -------------------- ---- ------- ----- ----- - --- ------------- ----- ------ - --- --------------------------- ----------------- - ------------------- -- ----- ----------------- - --- ----- -------- - --- --------------------- ----------------------------------- ------------------- ---------------------------------------------- -- ----- ----- ----- - --- ------------- ---------------- ----- -------- - --- ------------------------ --- --- ----- -------- - --- ------------------------- ------ --------- ------------ ---- -- ----- ------ - --- -------------------- --------- ----------------- ----- ----------- - --- --------------------------- --- --- ----- --------- - --- ------------------------- ------ --------- ------------ ---- -- ----- ----- - --- ----------------------- ---------- ----------------------- -- -- ----- --------- - --- ------------------------- ------ --------- ------------ ---- -- ----- ----- - --- ----------------------- ---------- ------------------------ -- -- ---------------- ------ -- ---- ----- -------- - --- ---------------- -------------------- -------------------------- - ---- ------------------ - - -------------------- - --- ----------------- - --- ---------------- - --- -------- --------- - ------------------------------ ---------------------- ------- ----------------- - ---------
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/161809