如何在反应原生中操作 3D 模型的单个骨骼?

Question

我想使用 React Native 显示骨骼(人体(的 3D 模型。

然后，如果我想设置人体特定骨骼的位置，我想调用一个函数，例如：

setPosition(3dmodelObject,boneId,yaw,pitch roll);

或

setPosition(3dmodelObject,boneId,w,x,y,z); // If using quaternion

例：

setPosition(myHumanSkeleton,foreArmId,30,45,70);
setPosition(myDogSkeleton,tailId,12,40,40);

有人可以指出我正确的方向，以便我开始吗？

我注意到有许多库(例如：Three.js(，但我似乎无法判断它们中的任何一个是否允许我选择 3D 模型的单个骨骼，并使用欧拉角或四元数设置其方向。

Answer 1

Three.js 是传统的基于 JS 的 3D 渲染引擎(自 2010 年首次亮相以来(。它的文档显示它支持欧拉角和四元数。

以下是在 React 应用程序中使用的两者的可运行示例：

class App extends React.Component {
componentDidMount() {
const eulerForGreenCube = new THREE.Euler(1, 2, 3, 'XYZ');
const quaternionForBlueCube = new THREE.Quaternion(.5, .2, .7, .5);
// Scene Setup:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
this.mount.appendChild(renderer.domElement);
camera.position.z = 12;
// Shapes:
{
const cubeSize = 4;
const cubeGeometry = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
const cubeMaterial = new THREE.MeshPhongMaterial({
color: 'green'
});
const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
mesh.position.set(5, 5, 0);
mesh.setRotationFromEuler(eulerForGreenCube);
scene.add(mesh);
} {
const cubeSize = 4;
const cubeGeometry = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
const cubeMaterial = new THREE.MeshPhongMaterial({
color: 'blue'
});
const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
mesh.position.set(-2, 0, 0);
mesh.setRotationFromQuaternion(quaternionForBlueCube);
scene.add(mesh);
}
// Lights:
{
const light1 = new THREE.PointLight('white', 2, 20, 2);
scene.add(light1);
} {
const light2 = new THREE.HemisphereLight('white', 'red', 1);
scene.add(light2);
}
renderer.render(scene, camera);
}
render() {
return <div ref = {
ref => (this.mount = ref)
}
/>;
}
}
//const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

如果你正在寻找一个很好的替代品来替代Three.js它仍然是纯基于JS的，巴比伦.js是我知道的另一个选择。它于 2013 年首次发布，最近在许多圈子中获得了青睐。例如，这个用户首选选项的倾斜列表显示巴比伦.js牢牢地位居榜首。巴比伦.js的文档还表明它同时支持欧拉角和四元数。

如果你不介意在JS之外构建3D模型并将其导入为GLTF2或OBJ模型，第三个选择是Facebook自己的React 360库。值得注意的是，React 360实际上"依赖于Three.js进行一些渲染工作"。React 360 的文档展示了如何使用它来处理 3D 对象。您可以在"平面"部分中查看设置欧拉角度的示例。此页面还提到您可以"传入相机的四元数以将表面重新居中在用户的视口上"，但没有具体说明您是否可以使用四元数设置对象角度。