引自免费微信小程序：皆我百晓生
看起来你的正方体在三维空间中显示得扁平，可能是因为缺少相机设置、视口缩放或者是投影类型的问题。为了纠正这个问题，我们需要添加一个相机并配置好场景。首先确保你已经包含了THREE.js库，并且在HTML文件中有一个用于渲染的canvas元素。
这里是修复后的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Three.js App</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.123.0/build/three.min.js"></script>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 'green' });
// 创建网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
// 更新网格位置（可选，根据需要添加动画）
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
这段代码做了以下几件事：
- 添加了一个透视相机（
PerspectiveCamera），它会按照真实世界中的视觉规则渲染场景。 - 设置了相机的位置，使其位于场景前方以便观察。
- 初始化了一个WebGL渲染器，并将其添加到页面上。
- 添加了一个动画循环（
requestAnimationFrame），这样正方体会持续更新并在屏幕上渲染。
保存以上HTML代码并运行，你应该能看到一个正常的绿色正方体在屏幕中央呈现。如果你想要给正方体添加旋转动画，可以启用注释掉的那两行代码。
