使用javascript制作3D新闻Web应用程序-https://shange-fagan.github.io/globe.news/
我在控制台中得到消息，我的html元素的位置被设置为absolute，尽管在代码中我已经显式地将其设置为unset，下面是我的代码：
<head>
<rssapp-ticker id="tRj0yIAl7HEk9RzX"></rssapp-ticker>
<script
src="https://widget.rss.app/v1/ticker.js"
type="text/javascript"
async
></script>
<rssapp-wall id="tszZCksFzEB4w9UN"></rssapp-wall>
<style>
body {
margin: 0;
}
</style>
<script src="//unpkg.com/three"></script>
<script src="//unpkg.com/globe.gl"></script>
<!-- <script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script type="module">
var my_awesome_script;
// Gen random data
const N = 30;
const gData = [...Array(N).keys()].map(() => ({
lat: (Math.random() - 0.5) * 180,
lng: (Math.random() - 0.5) * 360,
}));
import { GUI } from "./js/dat.gui.module.js";
// GUI
const gui = new GUI();
const textureLoader = new THREE.TextureLoader();
const myTexture = [
textureLoader.load("//unpkg.com/three-globe/example/img/earth-dark.jpg"),
textureLoader.load(
"//unpkg.com/three-globe/example/img/earth-blue-marble.jpg"
),
];
const parameters = {
Theme: 0,
};
const updateAllMaterials = () => {
scene.traverse((child) => {
if (
child instanceof Globe() &&
child.material instanceof THREE.MeshPhongMaterial
) {
child.material = myTexture[parameters.Theme];
child.material.needsUpdate = true;
}
});
};
gui
.add(parameters, "Theme", {
night: 0,
day: 1,
})
.onFinishChange(() => {
updateAllMaterials();
});
gui.open();
const elem = document.getElementById("globeViz");
const globe = Globe()
.globeImageUrl(
"//unpkg.com/three-globe/example/img/earth-blue-marble.jpg"
)(elem)
//.globeMaterial([MeshPhongMaterial])
.bumpImageUrl("//unpkg.com/three-globe/example/img/earth-topology.png")
.backgroundImageUrl("//unpkg.com/three-globe/example/img/night-sky.png")
.showGraticules(true)
.showAtmosphere(true)
.htmlElementsData(gData)
.htmlElement(({}) => {
var my_awesome_script = document.createElement("iframe");
my_awesome_script.type = "iframe";
my_awesome_script.async = true;
my_awesome_script.setAttribute(
"src",
"https://rss.app/embed/v1/wall/t0OXjFMGzjEUhPqm"
);
//my_awesome_script.setAttribute("class", "card");
return `
<link rel="stylesheet" href="input.css"> <!--Copy this line of code-->
<div>${my_awesome_script}</div>
`;
my_awesome_script.style.background = "none";
my_awesome_script.style.border = "none";
//position is clearly set to unset
my_awesome_script.style.position = "unset";
my_awesome_script.style.objectFit = "contain";
my_awesome_script.style.width = 20;
my_awesome_script.style.height = 30;
document.getElementById("iframe").style.position = "unset";
document.getElementsByClassName("card").style.position = "unset";
});
// custom globe material
const globeMaterial = globe.globeMaterial();
globeMaterial.bumpScale = 10;
new THREE.TextureLoader().load(
"//unpkg.com/three-globe/example/img/earth-water.png",
(texture) => {
globeMaterial.specularMap = texture;
globeMaterial.specular = new THREE.Color("grey");
globeMaterial.shininess = 15;
}
);
setTimeout(() => {
// wait for scene to be populated (asynchronously)
const directionalLight = globe
.scene()
.children.find((obj3d) => obj3d.type === "DirectionalLight");
directionalLight && directionalLight.position.set(1, 1, 1); // change light position to see the specularMap's effect
});
globe.controls().autoRotate = true;
globe.controls().autoRotateSpeed = 0.85;
//const animate = () => {
//requestAnimationFrame(animate);
//globe.rotation.y += 0.01;
//}
//animate();
</script>
</body>请让我知道我做错了什么，不确定是因为我的html元素的src有自己的样式，我没有访问权限，还是我应该使用typescript而不是javascript。
编辑：这是devtools的elements选项卡中元素及其父元素的屏幕截图，您可以看到元素包含在使用var my_element = document.createElement(element)的script标记中，必须这样做，因为我需要html元素显示在使用javascript
x 1c 2d 1x的3d地球仪上
第2次编辑：实现建议代码后的新错误屏幕截图：
第三次编辑：修复后的rss新闻小部件嵌入链接，它开始显示，但不是在我想要的方式，它显示的小部件上方的地球仪，而不是在地球仪上，因为是首选：x1c4d 1x理想情况下，小部件将悬停在地球仪上，如这些标记示例
中所示
1条答案
按热度按时间q8l4jmvw1#
您的错误
在没有有效参数的情况下调用
Globe().htmlElement({} => html)时，错误来自globe.gl。在创建脚本标记和定义iframe的方式中存在多个错误。样式位置错误与行my_awesome_script.style.position = "unset";无关。使用检查器，变量
t显示您将iframe作为字符串（"\n...<iframe ..."）而不是有效的HTML元素返回，因此在元素上定义样式时，它会在第37713行产生错误。溶液
下面对
globe对象的编辑应该会给予你更好的结果。它是基于你的index6.html的。详细的解释见注解进一步阅读
包含globe.glHTML DOM元素https://globe.gl/example/html-markers/的www.example.com示例