个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我试图让天空盒与旋转立方体一起出现，但天空盒不显示，而旋转立方体显示。
<!DOCTYPE html>
<html>
<head>
<title>FirstPersonGame</title>
<style>
canvas {
width: 100%;
height: 100%
position: absolute;
}
body {
margin: 0px;
}
</style>
</head>
<body>
<script src = "three.min.js"></script>
<script>
var slowDownBy = 8;
var scene = new THREE.Scene();
var camera = new
THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,0.1,30000);
var renderer = new THREE.WebGLRenderer({antialias:false});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0xffff00})
var cube = new THREE.Mesh(geometry, material);
let materialArray = [];
let SkyBox_1 = new THREE.TextureLoader().load('arid2_bk.jpg');
let SkyBox_2 = new THREE.TextureLoader().load('arid2_dn.jpg');
let SkyBox_3 = new THREE.TextureLoader().load('arid2_ft.jpg');
let SkyBox_4 = new THREE.TextureLoader().load('arid2_lf.jpg');
let SkyBox_5 = new THREE.TextureLoader().load('arid2_rt.jpg');
let SkyBox_6 = new THREE.TextureLoader().load('arid2_up.jpg');
materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_1}));
materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_2}));
materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_3}));
materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_4}));
materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_5}));
materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_6}));
animate();
for (let i = 0; i < 6; i++){
materialArray[i].side = THREE.BackSide;
let skyBoxGeo = new THREE.BoxGeometry(1000,1000,1000);
let SkyBox = new THREE.MeshBasicMaterial(skyBoxGeo,materialArray);
scene.add(SkyBox);
}
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 75/slowDownBy;
renderer.render(scene, camera);
}
</script>
</body>
</html>
我也遇到了错误:
THREE.Object3D.add: object not an instance of THREE.Object3D.
最佳答案
这部分
let skyBoxGeo = new THREE.BoxGeometry(1000,1000,1000);
let SkyBox = new THREE.MeshBasicMaterial(skyBoxGeo,materialArray);
应该是这样
let skyBoxGeo = new THREE.BoxBufferGeometry(1000, 1000, 1000);
let skyBox = new THREE.Mesh(skyBoxGeo, materialArray); // it must be Mesh(), not MeshBasicMaterial()
而且你不需要这一行:
scene.add(cube); // as there is no variable with the name `cube`
关于javascript - 天空盒未出现，但立方体出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58054970/
25
4
0
我想在 iPhone 和 Android 上开发一个应用程序，它可以显示有关行星在宇宙中的位置和位置的详细信息。浏览谷歌我遇到了谷歌天空 map 。但我没有找到任何资源或 API 来执行此操作。所以请
我是一名优秀的程序员,十分优秀！