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

cannon-es-cn

v1.0.1

Published

> 这是一个使用 Three.js 和 CANNON.js 物理引擎创建模拟场景的代码。以下是代码解释:

Downloads

2

Readme

这是一个使用 Three.js 和 CANNON.js 物理引擎创建模拟场景的代码。以下是代码解释:

首先,定义了一些变量和物理引擎实例,然后创建了一个名为 MainScene 的异步函数。该函数首先调用了物理引擎实例的 loadGLTF 方法加载了一个 glTF 文件,并在指定位置、旋转和缩放下添加了一个刚体对象。接着,该函数创建了一个平面和两个盒子,并将它们与对应的刚体对象对应起来,以及创建了一个球体并将其与对应的刚体对象对应起来。然后,该函数将物理引擎中的物体的位置信息同步到 Three.js 场景中的模型上。最后,该函数设置了 updateAnimation 函数,在更新动画时将物体的位置信息从物理引擎中同步到 Three.js 场景中的模型上。

接下来,定义了三个用于创建不同形状模型的函数,这些函数根据物理引擎中的刚体对象创建 Three.js 中的 Mesh 对象,并设置了一些材质属性和位置信息。同时,还定义了一个用于同步模型位置信息的函数。

最后,定义了三个事件处理函数:start,stop 和 update。其中,start 函数创建并显示性能监视器,stop 函数移除性能监视器,update 函数则在每个帧上更新物理引擎中的状态,并调用 updateAnimation 函数更新模型的位置信息。

es 加载方式

import * as THREE from 'https://cdn.bootcdn.net/ajax/libs/three.js/0.151.2/three.module.min.js';
import * as CANNON from 'https://unpkg.com/cannon-es/dist/cannon-es.js';
import { PhysicsEngine } from 'https://unpkg.com/cannon-es-cn/src/PhysicsEngine.js';

DEMO 代码

在线预览 https://www.cnbbx.com/360/cannon-es-cn/

// 创建一个初始值为null的stats变量
let stats = null;

// 定义网络模型加载类型
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath(
    "https://unpkg.com/three/examples/jsm/libs/draco/gltf/"
);
loader.setDRACOLoader(dracoLoader);

// 创建物理引擎实例并开启调试模式
const physicsEngine = new PhysicsEngine(scene);
physicsEngine.debug(true);

// 创建updateAnimation函数并初始化为null
let updateAnimation = null;

// 定义MainScene异步函数
const MainScene = async () => {

  // 加载一个glTF文件并在指定位置、旋转和缩放下添加刚体对象
  await physicsEngine.loadGLTF(loader, '冰墩墩.glb', new CANNON.Vec3(-1, 2, 0), new CANNON.Quaternion(), 3, 5, 50, 0, "BOX").then((res) => { });

  // 创建平面和两个盒子
  const planeBody = physicsEngine.addPlane(
    new CANNON.Vec3(0, 0, 0),
    new CANNON.Quaternion().setFromEuler(-Math.PI / 2, 0, 0)
  );
  const box1Body = physicsEngine.addBox(
    [0.5, 0.5, 0.5],
    new CANNON.Vec3(0, 10, 0),
    new CANNON.Quaternion(),
    1
  );
  const box2Body = physicsEngine.addBox(
    [0.5, 0.5, 0.5],
    new CANNON.Vec3(2, 10, 0),
    new CANNON.Quaternion(),
    1
  );

  // 将Three.js场景中的平面、盒子模型与CANNON.js物理引擎中的刚体对象对应
  const planeMesh = createPlaneMesh(planeBody);
  const box1Mesh = createBoxMesh(box1Body);
  const box2Mesh = createBoxMesh(box2Body);
  scene.add(planeMesh);
  scene.add(box1Mesh);
  scene.add(box2Mesh);

  // 创建一个球体并将其与CANNON.js物理引擎中的刚体对象对应
  const sphereBody = physicsEngine.addSphere(
    0.5,
    new CANNON.Vec3(-2, 50, 0),
    new CANNON.Quaternion(),
    1,
    0.3,
    0
  );

  // 将Three.js场景中的球体模型与CANNON.js物理引擎中的刚体对象对应
  const sphereMesh = createSphereMesh(sphereBody);
  scene.add(sphereMesh);

  // 设置updateAnimation函数,在更新动画时将模型位置信息从物理引擎中同步到Three.js场景中
  updateAnimation = () => {
    updateMeshPosition(box1Body, box1Mesh);
    updateMeshPosition(box2Body, box2Mesh);
    updateMeshPosition(sphereBody, sphereMesh);
  }

}

// 调用MainScene函数
MainScene();

// 创建一个用于创建平面模型的函数,并将其位置和旋转信息从物理引擎中同步到Three.js场景中
function createPlaneMesh(planeBody) {
  const planeGeometry = new THREE.PlaneGeometry(100, 100);
  const planeMaterial = new THREE.MeshStandardMaterial({
    color: "#ffffff",
    side: THREE.DoubleSide,
  });
  const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
  planeMesh.position.set(planeBody.position.x, planeBody.position.y, planeBody.position.z);
  planeMesh.quaternion.copy(planeBody.quaternion);
  planeMesh.receiveShadow = true;
  return planeMesh;
}

// 创建一个用于创建盒子模型的函数,并将其位置和旋转信息从物理引擎中同步到Three.js场景中
function createBoxMesh(boxBody) {
const boxGeometry = new THREE.BoxGeometry(...boxBody.shapes[0].halfExtents.scale(2).toArray());
  const boxMaterial = new THREE.MeshStandardMaterial({
    color: "#ff0000",
  });
  const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
  boxMesh.position.set(boxBody.position.x, boxBody.position.y, boxBody.position.z);
  boxMesh.quaternion.copy(boxBody.quaternion);
  boxMesh.castShadow = true;
  boxMesh.receiveShadow = true;
  return boxMesh;
}

// 创建一个用于创建球体模型的函数,并将其位置和旋转信息从物理引擎中同步到Three.js场景中
function createSphereMesh(sphereBody) {
  const sphereGeometry = new THREE.SphereGeometry(sphereBody.shapes[0].radius, 32, 32);
  const sphereMaterial = new THREE.MeshPhysicalMaterial({
    color: "#0000ff",
    metalness: 1,
    roughness: 0,
    clearcoat: 1,
    transmission: 0.9,
    transparent: true,
    opacity: 0.8,
  });
  const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphereMesh.position.set(sphereBody.position.x, sphereBody.position.y, sphereBody.position.z);
  sphereMesh.quaternion.copy(sphereBody.quaternion);
  sphereMesh.castShadow = true;
  sphereMesh.receiveShadow = true;
  return sphereMesh;
}

// 将模型位置与物理引擎中的刚体同步
function updateMeshPosition(body, mesh) {
  mesh.position.copy(body.position);
  mesh.quaternion.copy(body.quaternion);
}

// 定义update事件处理函数,更新物理引擎状态并调用updateAnimation函数
function update(event) {
  physicsEngine.update();
  if (updateAnimation) updateAnimation.call(this);
  if (stats) stats.update(); // 更新性能监视器
}

// 定义start事件处理函数,创建并显示性能监视器
function start(event) {
  stats = new Stats();
  document.body.appendChild(stats.dom);
}

// 定义stop事件处理函数,移除性能监视器
function stop(event) {
  if (stats) stats.dom.remove();
}

以上代码使用了 Three.js 和 CANNON.js 的 API 来创建物理模拟场景,并将模型位置信息从物理引擎中同步到 Three.js 场景中。同时,还使用了 Stats.js 插件来创建性能监视器并在场景中显示。