@anov/3d-core

介绍

首先解释一下，anov-3d-core「下面简称core」是基于three的核心扩展封装。它的主要作用是进一步简便threejs的使用

$3

``js
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提供的其他能力 (文档后期补充)




$3

在3D空间要实现一个物体的事件绑定并不一个简单的事情。区别于DOM，3D事件是需要靠射线碰撞来判断物体的交互

这是threejs在一个基础检测是版本代码

`js
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的方式，如下面这行代码


`js
mesh.addEventListener('click',() => { } )
`

所以在core中，我们优化了3D事件的注册方式，目前你已经开展像注册dom事件那样注册3D物体的事件

`js
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)
``