将光添加到x3dom或x_ite中以HTML格式加载的x3d场景中？
说我有从Blender导出的文件test.x3d（包含在下面）。然后，我可以使用x3dom或X_ITE X3D Browser JS库在HTML页面中加载它。下面还包括每个load_test_x3dom.html和load_test_x_ite.html的示例。我得到的渲染是这样的：
我发现它太暗了，所以我想增加环境光（或将环境光或任何类型的光添加到场景中）到场景 - 但是，我不想修改test.x3d无论如何。
由于我在外部加载模型，我只有<inline url="test.x3d">或<X3DCanvas src="test.x3d">，所以我不太清楚我在哪里可以添加语句来另外控制现场的光。
所以我的问题是：是否可以在x3dom / x_ite中控制加载的.x3d模型的光照而无需更改.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 个答案:
答案 0 :(得分：0)
对 - 我设法用X_ITE做了这个，这很痛苦，因为它似乎没有记录在任何地方，所以在大多数情况下我不得不在浏览器控制台中繁琐地检查变量...
反正;首先，在X_ITE中，可以在JavaScript中执行Accessing the External Browser;然后，使用额外的JS库X_ITE X3D Browser » XHTML DOM Integration实现x_ite_dom。
另外，事实证明，当我尝试在HTML中为场景添加灯光时，我也尝试内联.x3d文件，出现问题并且没有任何内容呈现。所以，我必须像在OP中那样通过<X3DCanvas src="test.x3d">加载，然后遍历其根节点。似乎Blender导出了五个根节点：＆＃34; NavigationInfo {}＆＃34;，＆＃34;背景{}＆＃34;和3x＆＃34;转换{}＆＃34 ;;并且为了点亮一切，可以使用NavigationInfo根节点的.headlight;并且可以通过背景根节点的.groundColor和.skyColor来操纵背景颜色。
唯一的问题是，在加载后，检查模式不能正常工作（即视图不会围绕对象旋转）;首先必须双击该对象，然后使用旋转浏览工作。不幸的是，我找不到如何＆＃34;双击＆＃34;页面加载时自动对象。这就是为什么我将大部分遗漏留在代码中作为评论。
以下是更改的 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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？