https://www.yingkepe.com/Public/Cn/js/map.js

1var camera, scene, renderer;
2var mesh, light;
3var controls;
4var container = document.getElementById("he_d1map");
5var W = container.clientWidth;
6var H = container.clientHeight;
7
8// 贴图材质
9var textureArr = [];
10
11
12    init();
13    animate();
14
15
16
17
18function init() {
19
20    // 相机初始化
21    cameraInit();
22    // 场景初始化
23    sceneInit();
24    // 渲染器模拟器
25    rendererInit();
26    // 响应式
27    window.addEventListener('resize', onWindowResize, false);
28    // 鼠标控制
29    controlsInit();
30    // 辅助坐标轴
31    // axesInit();
32
33}
34
35
36
37function cameraInit() {
38    camera = new THREE.PerspectiveCamera(45, W / H, 1, 10000);
39    camera.position.set(0, 85.6, 263);
40    // camera.up.set(0, 0, 0)
41    camera.lookAt({
42        x: 0,
43        y: 0,
44        z: 0
45    });
46}
47
48function sceneInit() {
49    scene = new THREE.Scene();
50
51    lightInit();
52    meshInit();
53
54    // 网格模型
55    function meshInit() {
56        texture = THREE.ImageUtils.loadTexture('/Public/Cn/images/earth2.png')
57        // 地球
58        var earth_geometry = new THREE.SphereGeometry(100, 50, 50);
59        var earth_material = new THREE.MeshPhongMaterial({
60            map: texture,
61            side: THREE.DoubleSide,
62            transparent: true,
63        });
64
65        var earth = new THREE.Mesh(earth_geometry, earth_material);
66        mesh = earth;
67        scene.add(earth);
68    }
69
70    //创建光照
71    function lightInit() {
72        // 点光源
73        light = new THREE.PointLight(0xffffff, .1, 0);
74        light.position.set(500, 500, 500);
75        scene.add(light);
76
77        // 环境光
78        var ambient = new THREE.AmbientLight(0xffffff, 0.95);
79        scene.add(ambient);
80    }
81}
82
83function rendererInit() {
84    renderer = new THREE.WebGLRenderer({
85        antialias: true,
86        precision: "highp"
87    });
88    renderer.setClearColor(0xffffff, 1);
89    renderer.setSize(container.clientWidth, container.clientHeight);
90    container.appendChild(renderer.domElement);
91    renderer.render(scene, camera);
92}
93
94function onWindowResize() {
95    camera.aspect = container.clientWidth / container.clientHeight;
96    camera.updateProjectionMatrix();
97    renderer.setSize(container.clientWidth, container.clientHeight);
98}
99
100function animate() {
101    // mesh.rotation.x += 0.005;
102    mesh.rotation.y += 0.005;
103    controls.update();
104    renderer.render(scene, camera);
105    requestAnimationFrame(animate);
106
107}
108
109function axesInit() {
110    var axesHelper = new THREE.AxesHelper(1000);
111    scene.add(axesHelper);
112}
113
114function controlsInit() {
115    // 创建控件对象
116    controls = new THREE.OrbitControls(camera, renderer.domElement);
117    controls.enableDamping = true;
118    controls.panSpeed = .1;
119    controls.rotateSpeed = .1;
120    controls.dampingFactor = .2;
121    controls.enabled = false;
122}
123
124function changeTexture(index) {
125    mesh.material.map = textureArr[index];
126};