@anov/3d-core
v0.0.38
Published
A 3D engine based on three.js
Downloads
100
Readme
@anov/3d-core
介绍
首先解释一下,anov-3d-core「下面简称core」是基于three的核心扩展封装。它的主要作用是进一步简便threejs的使用
场景初始化
const scene = new SceneControl({
orbitControls: {
use: true,
},
defCameraOps: {
position: new Vector3(0, 5, 10),
far: 1000000,
fov: 45,
},
reset: true,
ambientLight: true,
})
scene.render(document.querySelector('#app')!)
core提供了一个叫做SceneControl的工具类,它内置了threejs 的场景
、渲染器
、相机
、最常用的轨道控制器
、基础灯光
等一系列基础场景需要经常使用的3d控件
本身这些基础控件就是一些模版代码,SceneControl帮我们简化了场景的创建成本
SceneControl提供的其他能力 (文档后期补充)
事件系统
在3D空间要实现一个物体的事件绑定并不一个简单的事情。区别于DOM,3D事件是需要靠射线碰撞来判断物体的交互
这是threejs在一个基础检测是版本代码
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
function onPointerMove( event ) {
// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function render() {
// 通过摄像机和鼠标位置更新射线
raycaster.setFromCamera( pointer, camera );
// 计算物体和射线的焦点
const intersects = raycaster.intersectObjects( scene.children );
for ( let i = 0; i < intersects.length; i ++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
renderer.render( scene, camera );
}
window.addEventListener( 'pointermove', onPointerMove );
window.requestAnimationFrame(render);
可以看到,繁琐且不易使用。我们作为前端工程师更习惯的是使用addEventListener的方式,如下面这行代码
mesh.addEventListener('click',() => { } )
所以在core中,我们优化了3D事件的注册方式,目前你已经开展像注册dom事件那样注册3D物体的事件
const geometry = new BoxGeometry(1, 1, 1)
const material = new MeshBasicMaterial({ color: 0x00FF00 })
const cube = new Mesh(geometry, material)
cube.addEventListener('click', (e) => {
console.log(e)
})
scene.add(cube)