在Django中实现动态三维地球，可以使用WebGL和Three.js库。以下是一个简单的例子，展示了如何在Django项目中集成Three.js来创建一个动态的三维地球。

首先，确保你的Django项目已经设置好了静态文件。

安装Three.js:

在你的Django项目的static目录下，创建一个js文件夹，然后通过npm安装three.js:

npm install three

创建Three.js脚本:

在static/js目录下创建一个新的JavaScript文件，比如叫earth.js，并写入以下代码来初始化一个基础的三维地球:

// earth.js
import * as THREE from 'three';

let scene, camera, renderer, earth;

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 加载地球纹理
  const loader = new THREE.TextureLoader();
  loader.load('./static/img/earth.jpg', function(texture) {
    // 创建地球几何体
    const geometry = new THREE.SphereGeometry(1, 32, 32);
    // 创建材质
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建地球对象
    earth = new THREE.Mesh(geometry, material);
    scene.add(earth);
  });

  // 添加灯光
  const ambientLight = new THREE.AmbientLight(0xcccccc);
  scene.add(ambientLight);

  animate();
}

function animate() {
  requestAnimationFrame(animate);

  // 旋转地球
  earth.rotation.y += 0.001;

  renderer.render(scene, camera);
}

window.onload = init;

加载地球纹理:

将一个地球纹理图片放入你的static/img目录下，比如叫earth.jpg。

在HTML中加载脚本:

在你的Django模板文件中，加入Three.js的引用和你的脚本文件：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic 3D Earth</title>
</head>
<body>
    <!-- 引入Three.js -->
    <script src="{% static 'js/three.min.js' %}"></script>
    <!-- 引入你的脚本 -->
    <script src="{% static 'js/earth.js' %}"></script>
</body>
</html>

配置Django的settings.py:

确保你已经在settings.py中配置了静态文件的路径：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

现在，当你访问这个Django页面时，你应该会看到一个旋转的三维地球。你可以根据需要扩展这个脚本，比如添加交互性、数据可视化等功能。

版权声明：如无特殊说明，文章均为本站原创，转载请注明出处

本文链接：http://jiangyudong.top/subject/article/3DEarth/

许可协议：署名-非商业性使用 4.0 国际许可协议