我需要一些 java 脚本或 jQuery 吗？我只是问，因为我需要这样的东西http://examples.x3dom.org/cadViewer/slimViewerConrod/index.html。 正如您所看到的，您可以使用相同的鼠标事件来旋转主对象（主场景）和轴（辅助场景）。我对 X3DOM 比较陌生，我只是想问一下，因为我不知道它是如何工作的。如果有帮助的话，我的 X3D 场景是：
<X3D id="x3dElement">
<Scene id='scene'>
<Viewpoint id="part7" position=" 0.028793486820279934 0.06097637432245687 -0.009845212995355457" description="camera"></Viewpoint>
<Group id='alles' children='gr1 gr2 gr3' render='true'>
<Group id='gr1' children='gr2 gr3' render='true'>
<transform translation='0 0 0' rotation='0 0 0 0'>
<Inline nameSpaceName="case" mapDEFToID="true" url="case1.x3d"/>
</transform>
<transform translation='0 0.02 0.031' Rotation='0.86603 0 0 0'>
<transform Rotation='0 0 0 0'>
<Inline nameSpaceName="switch" mapDEFToID="true" url="switch1.x3d"/>
<Inline id="b_sauele" nameSpaceName="inline" mapDEFToID="true" url="inlineSrc/bSauele/bolt1.x3d" onload="init()" ></Inline>
</transform>
</transform>
<transform translation='-0.03 -0.0155 0.024' rotation='0 1 0 1.5708'>
<transform rotation='1 0 0 3.1416'>
<Inline nameSpaceName="socket" mapDEFToID="true" url="socket2.x3d"/>
</transform>
</transform>
<transform translation='-0.03 -0.0155 -0.024' rotation='1 0 0 3.1416'>
<transform rotation='0 1 0 1.5708'>
<Inline nameSpaceName="socket" mapDEFToID="true" url="socket2.x3d"/>
</transform>
</transform>
<transform translation='0.03 -0.0155 -0.024' rotation='1 0 0 3.1416'>
<transform rotation='0 1 0 1.5708'>
<Inline nameSpaceName="socket" mapDEFToID="true" url="socket2.x3d"/>
</transform>
</transform>
<transform translation='0.03 -0.0155 0.024' rotation='1 0 0 3.1416'>
<transform rotation='0 1 0 1.5708'>
<Inline nameSpaceName="socket" mapDEFToID="true" url="socket2.x3d"/>
</transform>
</transform>
</Group>
<Group id='gr2' children='gr3' render='true'>
<transform translation='0 -0.018 -0.01988' Rotation='0 0 0 0'>
<Inline nameSpaceName="head" mapDEFToID="true" url="head1.x3d"/>
</transform>
</Group>
<Group id='gr3' render='true'>
<transform translation='0 -0.05 -0.0275' Rotation='0 0 0 0'>
<Inline nameSpaceName="shaft" mapDEFToID="true" url="shaft2.x3d"/>
</transform>
<transform translation='0.0129 0.0129 -0.009' Rotation='0 1 0 3.1416'>
<Inline nameSpaceName="bolt" mapDEFToID="true" url="bolt1.x3d"/>
</transform>
<transform translation='-0.0129 0.0129 0.009' Rotation='0 1 0 3.1416'>
<Inline nameSpaceName="bolt" mapDEFToID="true" url="bolt1.x3d"/>
</transform>
</Group>
</Group>
</Scene>
</x3d>
<X3D id='CoordinateAxes' showStat='false' showLog='false'>
<scene id="helper_scene">
<viewpoint id="coordinateAxesViewpoint" centerOfRotation='0 0 0' position='0 0 3'></viewpoint>
<Inline mapDEFToID="true" nameSpaceName="CoordinateAxes" url="data/CoordinateAxes.x3d"></Inline>
</scene>
</X3D>'>
我个人是这样解决的：
X3DomAdapter.syncViews = function(firstView, secondView) {
function sync(firstView, SecondView) {
var firstViewarea = $('#' + firstView)[0].runtime.canvas.doc._viewarea;
var secondViewarea = $('#' + SecondView)[0].runtime.canvas.doc._viewarea;
if (sync.firstViewmatrix === undefined || sync.secondViewmatrix ===
undefined) {
sync.firstViewmatrix = firstViewarea.getViewMatrix();
sync.secondViewmatrix = secondViewarea.getViewMatrix();
sync.firstChanged = false;
sync.secondChanged = false;
return;
}
sync.firstChanged = !(firstViewarea.getViewMatrix().equals(sync.firstViewmatrix));
sync.secondChanged = !(secondViewarea.getViewMatrix().equals(sync.secondViewmatrix));
if (sync.firstChanged && InputProcessor.active_view === firstView) {
secondViewarea.animateTo(firstViewarea.getViewMatrix(),
secondViewarea._scene.getViewpoint(), 0);
sync.firstViewmatrix = firstViewarea.getViewMatrix();
sync.secondViewmatrix = secondViewarea.getViewMatrix();
} else if (sync.secondChanged && InputProcessor.active_view ===
secondView) {
firstViewarea.animateTo(secondViewarea.getViewMatrix(),
firstViewarea._scene.getViewpoint(), 0);
sync.firstViewmatrix = firstViewarea.getViewMatrix();
sync.secondViewmatrix = secondViewarea.getViewMatrix();
}
}
return setInterval(function() {
sync(firstView, secondView);
}, 50);
};
应用于您的示例，您应该能够调用
X3DomAdapter.syncViews("scene", "helper_scene");
您可能想要替换 jQuery 调用并直接通过函数传入 DOM 节点，并使其成为一个存储状态的干净类。在我的用例中，我只想同步两个 x3dom 视图（分屏模式），然后忘记它。
似乎没有办法在不使用 JavaScript 的情况下同步两个视点。您不需要使用 jQuery - 只需添加一个处理程序来侦听主
viewpointChangedviewpointlet part7VP = document.getElementById("part7");
let axesVP = document.getElementById("coordinateAxesViewpoint");
part7VP.onviewpointChanged = function(event) {
axesVP.orientation = event.orientation;
axesVP.position = event.position;
}
这会不断更新轴视点以匹配主视点。请注意，如果您还想要相反的情况（即始终更新主视点以匹配轴视点），则需要添加第二个事件处理程序。
这是 MWE：https://codepen.io/jburkhart/pen/abgbYMJ?editors=1011