为x3d场景添加x3dom或x_ite中的HTML？
为x3d场景添加x3dom或x_ite中的HTML？
提问于 2018-01-05 10:26:27
假设我有文件test.x3d (包括下面)，从搅拌机导出。然后，我可以使用x3dom或ITE X3D浏览器 JS库将其加载到HTML页面中。下面还包括了每个例子，load_test_x3dom.html和load_test_x_ite.html。我得到的渲染如下：
我觉得这太暗了，所以我想增加周围的光线(或添加环境光，或任何类型的光到现场)-然而，我不想以任何方式修改test.x3d。
由于我是从外部加载模型的，我所拥有的只是<inline url="test.x3d">或<X3DCanvas src="test.x3d">，所以我不太清楚在哪里可以添加语句来额外控制场景的光线。
因此，我的问题是:在不改变.x3d模型本身的情况下，是否有可能控制x3dom/x中加载的.x3d模型的照明？
load_test_x3dom.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta charset="utf-8">
<title>X3DOM load test</title>
<link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/1.5/x3dom.css'>
<style>
html, body { height: 100%; }
x3d { width: 90%; height: 90%; margin-right:10px; margin-bottom:10px; }
</style>
</head>
<body>
<div class="content" style="width: 100%; height: 100%;">
<p>X3DOM load test</p>
<x3d>
<scene>
<inline url="test.x3d"> </inline>
</scene>
</x3d>
</div>
<script type="text/javascript" src="https://www.x3dom.org/download/1.5/x3dom.js"></script>
</body>
</html>load_test_x_ite.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta charset="utf-8">
<title>X_ITE load test</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/create3000/x_ite/master/dist/x_ite.css"/>
<script type="text/javascript" src="https://rawgit.com/create3000/x_ite/master/dist/x_ite.min.js"></script>
<style>
html, body { height: 100%; }
X3DCanvas { width: 90%; height: 90%; margin-right:10px; margin-bottom:10px; }
</style>
</head>
<body>
<div class="content">
<p>X_ITE load test</p>
</div>
<!-- X3DCanvas must not be enclosed in a div to load properly! -->
<X3DCanvas src="test.x3d">
<p>Your browser may not support all features required by X_ITE!</p>
</X3DCanvas>
</body>
</html>test.x3d
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN" "http://www.web3d.org/specifications/x3d-3.0.dtd">
<X3D version="3.0" profile="Immersive" xmlns:xsd="http://www.w3.org/2001/XMLSchema-instance" xsd:noNamespaceSchemaLocation="http://www.web3d.org/specifications/x3d-3.0.xsd">
<head>
<meta name="filename" content="test.x3d" />
<meta name="generator" content="Blender 2.79 (sub 0)" />
</head>
<Scene>
<NavigationInfo headlight="false"
visibilityLimit="0.0"
type='"EXAMINE", "ANY"'
avatarSize="0.25, 1.75, 0.75"
/>
<Background DEF="WO_World"
groundColor="0.051 0.051 0.051"
skyColor="0.051 0.051 0.051"
/>
<Transform DEF="Icosphere_TRANSFORM"
translation="0.000000 0.000000 0.000000"
scale="1.000000 1.000000 1.000000"
rotation="0.000000 0.707107 0.707107 3.141593"
>
<Transform DEF="Icosphere_ifs_TRANSFORM"
translation="0.000000 0.000000 0.000000"
scale="1.000000 1.000000 1.000000"
rotation="1.000000 0.000000 0.000000 0.000000"
>
<Group DEF="group_ME_Icosphere">
<Shape>
<Appearance>
<Material DEF="MA_Material_001"
diffuseColor="0.085 0.036 0.800"
specularColor="0.401 0.115 0.104"
emissiveColor="0.000 0.000 0.000"
ambientIntensity="0.333"
shininess="0.098"
transparency="0.0"
/>
</Appearance>
<IndexedFaceSet solid="true"
coordIndex="2 3 0 -1 0 3 7 -1 0 7 4 -1 7 6 1 -1 8 7 1 -1 6 8 1 -1 4 7 8 -1 3 6 7 -1 5 8 6 -1 5 4 8 -1 3 5 6 -1 2 5 3 -1 4 2 0 -1 2 4 5 -1 "
>
<Coordinate DEF="coords_ME_Icosphere"
point="0.209504 0.802371 -0.717194 -0.178166 0.129444 1.060728 0.178166 -0.129444 -1.060728 -1.005028 0.000000 -0.502516 1.035628 -0.125637 -0.271637 0.200539 -1.023765 -0.271638 -0.505344 -0.760048 0.740536 -0.134035 1.087594 0.305579 0.850254 0.000000 0.671351 "
/>
</IndexedFaceSet>
</Shape>
</Group>
</Transform>
</Transform>
<Transform DEF="Lamp_TRANSFORM"
translation="-4.076245 5.903862 1.005454"
scale="1.000000 1.000000 1.000000"
rotation="-0.498084 -0.762016 -0.413815 1.513875"
>
<PointLight DEF="LA_Lamp"
ambientIntensity="0.0000"
color="1.0000 1.0000 1.0000"
intensity="0.5714"
radius="30.0000"
location="-0.0000 -0.0000 0.0000"
/>
</Transform>
<Transform DEF="Camera_TRANSFORM"
translation="-7.481132 5.343665 -6.507640"
scale="1.000000 1.000000 1.000000"
rotation="-0.098233 -0.968789 -0.227591 2.349487"
>
<Viewpoint DEF="CA_Camera"
centerOfRotation="0 0 0"
position="-0.00 -0.00 0.00"
orientation="-0.00 -0.47 -0.88 0.00"
fieldOfView="0.858"
/>
</Transform>
</Scene>
</X3D>回答 1
Stack Overflow用户
发布于 2018-01-05 21:01:39
对-我成功地用X_ITE做到了这一点，这是一个痛苦，因为它似乎没有被记录在任何地方，所以在大多数情况下，我不得不乏味地检查浏览器控制台中的变量。
无论如何，首先，在X_ITE中，可以在JavaScript中执行访问外部浏览器；然后，通过一个额外的JS库dom来实现X3D浏览器XHTML集成。
另外，当我尝试在HTML中添加灯光，并且我也尝试内联.x3d文件时，会发现有些地方出错了，什么也没有呈现。因此，我必须像在OP中那样通过<X3DCanvas src="test.x3d">加载，然后遍历它的根节点。似乎混合器导出了大约五个根节点："NavigationInfo { }“、”背景{ }“和3x "Transform { }"；为了照亮一切，可以使用NavigationInfo根节点的.headlight；还可以通过背景根节点的.groundColor和.skyColor来操作背景色。
剩下的唯一问题是，加载后，检查模式不能完全工作(即视图不会围绕对象旋转)；必须先双击对象，然后才能进行旋转浏览。不幸的是，我找不到如何在页面加载时“双击”对象。这就是为什么我在代码中留下了大部分的遗漏作为注释。
以下是更改后的load_test_x_ite.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta charset="utf-8">
<title>X_ITE load test</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/create3000/x_ite/master/dist/x_ite.css"/>
<!-- <script type="text/javascript" src="https://rawgit.com/create3000/x_ite/master/dist/x_ite.min.js"></script> -->
<script type="text/javascript" src="https://rawgit.com/create3000/x_ite/master/dist/x_ite.js"></script>
<!-- see: http://create3000.de/x_ite/xhtml-dom-integration/: -->
<script type="text/javascript" src="https://rawgit.com/andreasplesch/x_ite_dom/master/latest/x_ite_dom.js"></script>
<style>
html, body { height: 100%; }
X3DCanvas { width: 90%; height: 90%; margin-right:10px; margin-bottom:10px; }
</style>
</head>
<body>
<div class="content">
<p>X_ITE load test</p>
</div>
<!-- X3DCanvas must not be enclosed in a div to load properly! -->
<X3DCanvas id="browser" src="test.x3d">
<p>Your browser may not support all features required by X_ITE!</p>
</X3DCanvas>
<!-- <X3DCanvas>
<Scene>
<!-- <Background DEF="WO_World" <!-- NOTE: this prevents the inline model from showing! -- >
groundColor="0.8 0.8 0.8"
skyColor="0.1 0.1 0.8"
/> -- >
<!--Viewpoint></Viewpoint-- >
<!--NavigationInfo type='"FLY", "ANY"'></NavigationInfo-- >
<!-- <NavigationInfo headlight='true' /> <!-- NOTE: this prevents the inline model from showing! -- >
<!-- <PointLight color='0.99, 0.99, 0.99' /> <!-- NOTE: this prevents the inline model from showing! -- >
<Inline DEF='myStuff' url='"test.x3d"' />
<Transform translation='0 0 0'>
<Inline USE='myStuff' />
</Transform>
<Transform translation='0 0 30'>
<PointLight color='0.99, 0.1, 0.1' /> <!-- NOTE: this allows showing of the inline model, but no light effect is visible ! -- >
</Transform>
</Scene>
<p class="fallback">
Your browser may not support all features required by Cobweb! You can use Firefox, <br/>
because this is currently the choice of the choice. We will continuously keep you informed <br/>
on technical developments and as soon as Cobweb is running in other browser too.
</p>
</X3DCanvas> -->
<script>
window.addEventListener("load", function(){
console.log("Window load"); // fires way before .x3d is fully loaded; first
//~ alert("Window load");
});
function printnodes(node) {
console.log(node);
if (typeof node.childNodes !== "undefined"){
var childNodes = node.childNodes;
for (var i = 0; i < childNodes.length; i++) {
printnodes(childNodes[i]);
}
}
}
function x_ite_callback (){ // (el) { el here is undefined
console.log("x_ite_callback"); // this one fires after the .x3d is loaded in FF57, but ONLY if it is as attribute src; if it is inline, it fires way before model is loaded!
var tbrowser = X3D.getBrowser("X3DCanvas#browser");
console.log("Browser", tbrowser); // <unavailable> in Ctrl-Shift-J Browser Console of FF57, but visible in F12 Console of FF57 (visible in both in FF43)
//~ var protoScene = document.querySelector('[DEF="myStuff"] Scene');
//~ var protoScene = document.querySelector('Scene'); // undefined
printnodes(tbrowser.element[0]); // this is not the X3D nodes
// tbrowser.currentScene.namedNodes has all 3D nodes; transforms, shapes, groups etc - but not Viewpoint or NavigationInfo
// tbrowser.currentScene.rootNodes.length can be 5 for a Blender .x3d
// tbrowser.currentScene.rootNodes[0].getId() -> could be 425, 430, 434, 22046, 22053; probably internal
// tbrowser.currentScene.rootNodes[0].headlight = true; but rootNodes[1,2,3,4] might not have .headlight
// there exists .toSource() which causes InternalError: allocation size overflow in FF57 (also "script slows down page); .toString() produces e.g. "NavigationInfo { }", "Background { }", "Transform { }" and it seems to work
// so depending on type of x3d note (seen via .toString()), there are different properties available
var numRootNodes = tbrowser.currentScene.rootNodes.length;
for (var i = 0; i < numRootNodes; i++) {
var trnode = tbrowser.currentScene.rootNodes[i];
if (trnode.toString() === "Background { }") {
//trnode.set_bind = false; // no effect here? but yes in console...
console.log("is Background", trnode.groundColor, trnode.skyColor, trnode.isBound);
trnode.groundColor = [{ r_: 0.051, g_: 0.451, b_: 0.051 }];
trnode.skyColor = [{ r_: 0.051, g_: 0.051, b_: 0.451 }];
}
if (typeof trnode.headlight !== "undefined"){
console.log("rootnode", i, "HAS headlight", trnode.isBound, trnode.toString());
tbrowser.currentScene.rootNodes[i].headlight = true;
} else {
console.log("rootnode", i, "no headlight", trnode.isBound, trnode.toString());
}
} // end for
// tbrowser.currentScene.namedNodes // Object { WO_World: Proxy, Icosphere_TRANSFORM: Proxy, ...
// tbrowser.currentScene.rootNodes[0].type[0] == "EXAMINE", [1] == "ANY"
// http://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#NavigationInfo:
// ""EXAMINE" shall provide the ability to orbit or spin the user's eyepoint about the center of rotation in response to user actions. The center of rotation for moving the viewpoint around the object and determining the viewpoint orientation is specified in the currently bound X3DViewpointNode node"
// ./src/x_ite/Browser/Navigation/X3DViewer.js: this .getActiveViewpoint () .lookAtPoint (hit .intersection .point, 2 - 1.618034, straightenHorizon);
// ./src/x_ite/Browser/X3DBrowser.js: changeViewpoint: function (name)
// ./src/x_ite/Browser/X3DBrowser.js: this .currentScene .changeViewpoint (name);
// ./src/x_ite/Browser/X3DBrowser.js: this .bindViewpoint (viewpoints [0
// ]);
// ./src/x_ite/Browser/X3DBrowser.js: bindViewpoint: function (viewpoint)
console.log("tbrowser.viewerNode:", tbrowser.viewerNode); // is null upon run - but OK later when called from console?!
//~ console.log("Active Viewpoint:", tbrowser.viewerNode.getActiveViewpoint());
// this is a function, too: tbrowser.getActiveLayer().defaultViewpoint.lookAtPoint - hard to use it to set;
// ./src/x_ite/Browser/Navigation/ExamineViewer.js: dblclick: function (event) ; this .lookAt (x, y);
// stack trace upon double click // dblclick:
// lookAt (X3DViewpointNode) https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:57547:1
// .. ends with:
// this .centerOfRotationOffset_ = Vector3 .subtract (point, this .getCenterOfRotation ());
// this .set_bind_ = true;
// lookAtPoint (X3DViewpointNode) https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:57527:1
// this .lookAt (point, minDistance, factor, straighten);
// lookAt (X3DViewer) https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:58004:5 :
// this .getActiveViewpoint () .lookAtPoint (hit .intersection .point, 2 - 1.618034, straightenHorizon);
// dblclick (ExamineViewer) https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:58486:4 :
// this .lookAt (x, y);
// dispatch https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:7362:16
// add/elemData.handle https://rawgit.com/create3000/x_ite/master/dist/x_ite.js:7171:6
vncheck = function() {
if (tbrowser.viewerNode) {
console.log("have tbrowser.viewerNode:", tbrowser.viewerNode);
// SO:6157929
var event = document.createEvent('MouseEvents'),
//options = options || {},
opts = { // These are the default values, set up for un-modified left clicks
type: 'click',
canBubble: true,
cancelable: true,
view: Document.defaultView,
detail: 1,
screenX: 0, //The coordinates within the entire page
screenY: 0,
clientX: 596, //The coordinates within the viewport
clientY: 56,
//~ pageX: 596,
//~ pageY: 56,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
button: 0, //0 = left, 1 = middle, 2 = right
relatedTarget: null,
};
//Pass in the options
event.initMouseEvent(
opts.type,
opts.canBubble,
opts.cancelable,
opts.view,
opts.detail,
opts.screenX,
opts.screenY,
opts.clientX,
opts.clientY,
opts.ctrlKey,
opts.altKey,
opts.shiftKey,
opts.metaKey,
opts.button,
opts.relatedTarget
);
tbrowser.viewerNode.dblclick(event);
} else {
console.log("no tbrowser.viewerNode:", tbrowser.viewerNode);
setTimeout(vncheck, 10);
}
}
setTimeout(vncheck, 10);
//const start = performance.now();
//while(performance.now() - start < 1000); // busy wait; does nothing; viewerNode still null after it
//console.log("tbrowser.viewerNode:", tbrowser.viewerNode);
} // end function x_ite_callback
function x_ite_errorCallback (error) {
console.log("x_ite_errorCallback", error);
}
X3D (x_ite_callback, x_ite_errorCallback);
// X3D(function(el) {
// console.log("el", el); // also undefined here, FF57
// });
var Browser;
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
console.log("Window complete"); // fires way before .x3d is fully loaded; second
//~ alert("Window complete");
// Obtain X3DBrowser object of X3DCanvas element with id »browser«.
var tbrowser = X3D.getBrowser("X3DCanvas#browser"); // no var here, so we set the global? This is randomly either undefined or defined in FF 43; but in FF 57 is always undefined
//Browser = tbrowser;
console.log("Browser", tbrowser); //, tbrowser);
}
}, 100);
//~ var intervalB = setInterval(function() { // this one never clears..
//~ if (typeof Browser !== "undefined") { //if (Browser.hasOwnProperty("loading")) {
//~ if (Browser.loading === false) {
//~ clearInterval(intervalB);
//~ console.log("Browser loaded");
//~ alert("Browser loaded");
//~ }
//~ }
//~ }, 100);
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48111622
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号