基于three.js的3d全景地图无法正常显示
弱卞来了。3d全景地图无法正常显示
这是我的完整代码 不知道为什么 在点击加载全景图像1或者加载全景图像2按钮之后 不会有任何显示
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>全景图片展示title>
<style>
body { margin: 0; }
canvas { display: block; }
#buttonContainer { position: absolute; top: 10px; left: 10px; }
style>
head>
<body>
<div id="buttonContainer">
<button id="loadImage1">加载全景图片1button>
<button id="loadImage2">加载全景图片2button>
div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js">script>
<script type="module">
import { OrbitControls } from "https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls";
window.OrbitControls = OrbitControls;
script>
<script src="3Dcube.js">script>
body>
html>
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js';
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体几何体
var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
// 创建初始材质
var initialTexture = new THREE.TextureLoader().load('./placeholder-image.jpg');
var initialMaterials = [];
for (let i = 0; i < 6; i++) {
initialMaterials.push(new THREE.MeshBasicMaterial({ map: initialTexture }));
}
// 创建立方体网格
var cube = new THREE.Mesh(cubeGeometry, initialMaterials);
scene.add(cube);
camera.position.z = 15;
var controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.target = new THREE.Vector3(0, 0, 0);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
document.getElementById('loadImage1').addEventListener('click', function () {
updatePanorama('./K2qKb.png');
});
document.getElementById('loadImage2').addEventListener('click', function () {
updatePanorama('./KAFjI.jpg');
});
function updatePanorama(faceImages) {
splitPanoramaImage(faceImages, function (faces) {
const loader = new THREE.CubeTextureLoader();
loader.load(faces, function (texture) {
texture.mapping = THREE.CubeReflectionMapping;
for (let i = 0; i < 6; i++) {
cube.material[i].map = texture;
cube.material[i].needsUpdate = true;
}
});
});
}
function splitPanoramaImage(imageUrl, callback) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = imageUrl;
img.onload = function () {
const faceSize = img.width / 4;
canvas.width = faceSize;
canvas.height = faceSize;
const faces = [];
for (let i = 0; i < 6; i++) {
let x, y;
if (i === 0) { // +Y
x = faceSize;
y = 0;
} else if (i === 1) { // -Y
x = 3 * faceSize;
y = 0;
} else if (i === 2) { // -Z
x = 0;
y = faceSize;
} else if (i === 3) { // +X
x = faceSize;
y = faceSize;
} else if (i === 4) { // -X
x = 3 * faceSize;
y = faceSize;
} else { // +Z
x = 2 * faceSize;
y = faceSize;
}
context.clearRect(0, 0, faceSize, faceSize);
context.drawImage(img, x, y, faceSize, faceSize, 0, 0, faceSize, faceSize);
const faceUrl = canvas.toDataURL('image/png');
faces.push(faceUrl);
}
callback(faces);
};
}
所有的文件都在同一个文件件内 相对路径应该没有出错
我水平不是很高 但是这个问题困扰了我好长时间 应该是因为一些低级错误T_T
以下内容部分参考ChatGPT模型：
首先，建议检查浏览器控制台是否有任何错误信息，以便确定问题的具体原因。
其次，需要确定three.js库是否已正确加载，并且所有依赖项是否都已加载。可以通过在浏览器控制台中运行ThreeJS变量来测试这一点。
最后，建议检查代码中的路径是否正确，特别是加载纹理和模型的路径。如果路径不正确，将无法加载纹理和模型。
以下是一个简单的示例代码，用于加载一个全景图像并将其显示在three.js场景中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Panorama Example</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );
var texture = new THREE.TextureLoader().load( 'path/to/panorama.jpg' );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
camera.position.z = 0.01;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
请注意，上述代码仅适用于加载单个全景图像。如果要加载多个全景图像，并在用户点击按钮时切换它们，则需要编写更复杂的代码。