使用Three.js构造3D地球仪

使用纹理映射（贴图）实现的地球，可交互。

webgl, globe

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 5629
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var camera, scene, renderer, controls;

init();
animate();

function init() {
    // basic scene
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    var width = window.innerWidth;
    var height = window.innerHeight;

renderer.setSize(width, height);

document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.y = 16;
    camera.position.z = 350;

controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.rotateSpeed = 0.3;
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;

var loader = new THREE.TextureLoader();
    loader.crossOrigin = '';
    var texture = loader.load('/uploads/1702/map_no_clouds.jpg');

// globe
    var material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        map: texture,
        displacementMap: texture,
        displacementScale: 10
    });

var sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 32), material);
    scene.add(sphere);

var al = new THREE.AmbientLight(0x444444);
    scene.add(al);

var dl = new THREE.DirectionalLight(0xffffff, 1);
    scene.add(dl);
    dl.position.set(1, 1, 1.6);

}

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

编译

CSS

HTML

使用纹理映射（贴图）实现的地球，可交互。

webgl, globe

编辑器支持Emmet

快捷键

使用纹理映射（贴图）实现的地球，可交互。

webgl, globe

使用Three.js构造的月宫3D玉兔

使用Three.js和TweenMax构建扭动的3D橡皮圈动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：