npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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