弱卞来了。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">加载全景图片1</button>
<button id="loadImage2">加载全景图片2</button>
</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
