Добавление света в сцену x3d, загруженную в HTML в x3dom или x_ite?
Скажи у меня есть файл test.x3d (включен ниже), экспортируется из Blender. Затем я могу загрузить его на HTML-страницу с помощью библиотек XS X3D Browser X3D или X_ITE. Примеры для каждого, load_test_x3dom.html а также load_test_x_ite.html, также включены ниже. Рендеринг, который я получаю, выглядит так:
Я нахожу это слишком темным, поэтому я хотел бы увеличить рассеянный свет (или добавить рассеянный свет, или любой другой свет в сцену) к сцене - однако я НЕ хотел бы изменять test.x3d в любом случае.
Так как я загружаю модель снаружи, все, что у меня есть, это <inline url="test.x3d"> или же <X3DCanvas src="test.x3d"> Так что мне не совсем понятно, где я могу добавить операторы для дополнительного управления освещением сцены.
Итак, мой вопрос: можно ли управлять освещением для загруженного .x3d модель в x3dom/x_ite без изменения .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 ответ
Правильно - мне удалось сделать это с X_ITE, что было болезненно, поскольку, кажется, он нигде не документирован, поэтому по большей части мне пришлось утомительно проверять переменные в консоли браузера...
В любом случае; во-первых, в X_ITE возможно сделать Доступ к внешнему браузеру в JavaScript; затем X_ITE X3D Browser "XHTML DOM Интеграция достигается с помощью дополнительной библиотеки JS, x_ite_dom.
Кроме того, оказывается, что, когда я пытаюсь добавить источники света в сцену в HTML, и я также пытаюсь встроить .x3d файл, что-то идет не так и ничего не отображается. Итак, я должен загрузить через <X3DCanvas src="test.x3d"> как в OP, а затем перебрать его корневые узлы. Похоже, что Blender экспортирует около пяти корневых узлов: "NavigationInfo { }", "Background { }" и 3x "Transform { }"; и чтобы зажечь все, можно использовать .headlight корневого узла NavigationInfo; а также цвет фона можно манипулировать с помощью .groundColor а также .skyColor Фонового корневого узла.
Единственная оставшаяся проблема заключается в том, что после загрузки режим Examine не совсем работает (т.е. вид не вращается вокруг объекта); сначала нужно дважды щелкнуть по объекту, а затем работает просмотр с вращением вокруг. К сожалению, я не могу найти, как "дважды щелкнуть" объект автоматически при загрузке страницы. Вот почему я оставил большинство своих промахов как комментарии внутри кода.
Вот изменилось 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>