@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)