Javascript three.js程序没有显示任何内容，但我认为我的代码是正确的_Javascript_Three.js

Javascript three.js程序没有显示任何内容，但我认为我的代码是正确的

javascript three.js

Javascript three.js程序没有显示任何内容，但我认为我的代码是正确的,javascript,three.js,Javascript,Three.js,我正在学习three.js，我正在尝试制作一些行星的3d展示厅，我刚刚制作了月球，但由于某些原因，所有这些显示出来的只是一个普通的黑屏。以下是我目前的代码：（更新的版本仍然不起作用）每当我运行它，我只会得到一个没有错误或警告的纯黑色屏幕。基本上，我想让3颗行星彼此相邻，但我现在只是想做一个，但我想不出来以下是我的html，如果有帮助的话： <html> <head> <meta charset="utf8"> <

我正在学习three.js，我正在尝试制作一些行星的3d展示厅，我刚刚制作了月球，但由于某些原因，所有这些显示出来的只是一个普通的黑屏。以下是我目前的代码：（更新的版本仍然不起作用）

每当我运行它，我只会得到一个没有错误或警告的纯黑色屏幕。基本上，我想让3颗行星彼此相邻，但我现在只是想做一个，但我想不出来

以下是我的html，如果有帮助的话：

<html>

<head>
    <meta charset="utf8">
    <title> test2 </title>
    <link rel="stylesheet" href="test2.css">
</head>

<body>
    <script src="../lib/three.min.js"></script>
    <script src="../lib/OrbitControls.js"></script>
    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>

    <script src="test2.js"></script>
</body>


</html>


测试2

MeshPhongMaterial

需要灯光才能看到。我不明白你想用

light={}

对象做什么，但它不会照亮任何东西。如果你试图模仿一个明星，也许你想在你的场景中添加一个真实的。虽然我先用环境光来测试你的物体是否在正确的位置

就你的恒星背景而言，恒星是非常小的1px点，当缩小时，它们会混合成黑色。这正是他们在回答这个问题时的样子：

我建议您使用具有更多功能的星光背景，例如银河系。

MeshPhongMaterial

需要灯光才能看到。我不明白你想用

light={}

就你的恒星背景而言，恒星是非常小的1px点，当缩小时，它们会混合成黑色。这正是他们在回答这个问题时的样子：

我建议你使用带有更多特征的星空背景，比如银河系。

4期

不知道什么是

SphereTextureLoader

。那不是一个3.js的东西，好吗？也许你的意思是

CubeTextureLoader

使用

cubeTextReloader

您的纹理不是方形的。立方体贴图纹理要求为方形。我将它们替换为方形立方体贴图纹理

摄影机位于0,0,0，球体位于0,0,0，因此摄影机位于球体内部。我把相机移了出去

光线在50，50，50，但球体的半径为100，因此光线位于球体内部

修好所有这些东西对我来说很有用

函数main（）{
const canvas=document.querySelector（“#c”）；
const renderer=new THREE.WebGLRenderer({
帆布
});
常数fov=35；
const aspect=window.innerWidth/innerHeight；
常数near=1；
常数far=65536；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
//从中心移动相机等待
摄像机位置设置（0,0,1000）；
const controls=新的三个.orbitControl（摄影机、渲染器.doElement）；
controls.target.set（0,0,0）；
控件更新（）；
const scene=new THREE.scene（）；
恒光=新的三点光（0xffffff，1100）；
//把光移到月亮外面
光。位置。设置（50，50，150）；
场景。添加（灯光）；
//月亮
常数半径=100；
常数x段=50；
常数=50；
const geo=新的三个球度法（半径、X段、Y段）；
函数makeInstance（地理、颜色、x）{
const material=新的三个.MeshPhongMaterial（）；
const moonMesh=新的三个网格（地理、材料）；
场景。添加（月光网格）；
moonMesh.position.x=x；
返回月球网
}
const moon=makeInstance（geo，0xffffff，0）；
{
//使用CubeTextReloader而不是SphereTextReloader（不知道SphereTextReloader是什么）
const loader=new THREE.CubeTextureLoader（）；
const texture=loader.load([
//根据立方体贴图的需要使用方形纹理
'https://webglsamples.org/spacerocks/assets/space_rt.jpg',
'https://webglsamples.org/spacerocks/assets/space_lf.jpg',
'https://webglsamples.org/spacerocks/assets/space_up.jpg',
'https://webglsamples.org/spacerocks/assets/space_dn.jpg',
'https://webglsamples.org/spacerocks/assets/space_fr.jpg',
'https://webglsamples.org/spacerocks/assets/space_bk.jpg',
/*
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg'
*/
]);
scene.background=纹理；
}
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
函数渲染（时间）{
时间*=0.001；
if（ResizeRenderToDisplaySize（渲染器））{
const canvas=renderer.domeElement；
camera.aspect=canvas.clientWidth/canvas.clientHeight；
camera.updateProjectMatrix（）；
}
/*暂时忽略这一点，我只是在测试一些东西
moon.forEach（（moonMesh，ndx）=>{
恒速=0.5+ndx*.1；
恒速=时间*速度；
moonMesh.rotation.x=rot；
moonMesh.rotation.y=rot；
});
*/
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
控件。addEventListener（'change'，render）；
window.addEventListener（'resize'，render）；
window.addEventListener（'mousedown'，（e）=>{
e、 预防默认值（）；
window.focus（）；
});
window.addEventListener（'keydown'，（e）=>{
<html>

<head>
    <meta charset="utf8">
    <title> test2 </title>
    <link rel="stylesheet" href="test2.css">
</head>

<body>
    <script src="../lib/three.min.js"></script>
    <script src="../lib/OrbitControls.js"></script>
    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>

    <script src="test2.js"></script>
</body>


</html>