Three.js 3D圆球表面的凹凸贴图

Bump Map，地球表面贴图。

three, texture, earth

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var ww = window.innerWidth,
    wh = window.innerHeight;

function init() {

/* WEBGL RENDERER */
    renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('scene')
    });
    renderer.setClearColor(0x3F3F3F);
    renderer.setSize(ww, wh);

/* SCENE */
    scene = new THREE.Scene();

/* CAMERA */
    camera = new THREE.PerspectiveCamera(50, ww / wh, 1, 10000);
    camera.position.set(0, 0, 700);
    scene.add(camera);

/* LIGHT */
    light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 250, 700);
    scene.add(light);

createBox();

renderer.render(scene, camera);

animate();
};

function createBox() {
    //To allow CrossOrigin
    THREE.ImageUtils.crossOrigin = '';

elements = new THREE.Object3D();

/* SIMPLE SPHERE WITH BASIC TEXTURE */

//Create a sphere
    geometry = new THREE.SphereGeometry(150, 32, 32);
    //Create a texture that contains the 'picture' of the moon
    texture = THREE.ImageUtils.loadTexture("/uploads/2103/moon.jpg");
    //Create a Lambert Material with the moon as the 'map'
    material = new THREE.MeshLambertMaterial({
        map: texture
    });
    moon1 = new THREE.Mesh(geometry, material);
    moon1.rotation.z = Math.PI / 8;
    moon1.position.x = -350;
    //Add Jupiter in our Object 3D
    elements.add(moon1);

/* SAME SPHERE WITH ONLY BUMP */

//Create a bump map which create a effect of depth but without creating new polygons
    bump = THREE.ImageUtils.loadTexture("/uploads/2103/moonBump.jpg");
    //Create a Phong Material with the bump and shininess of my sphere
    material = new THREE.MeshPhongMaterial({
        shininess: 30,
        bumpMap: bump,
        bumpScale: 3,
    });

moon2 = new THREE.Mesh(geometry, material);
    moon2.rotation.z = Math.PI / 8;
    elements.add(moon2);

/* SAME SPHERE WITH BUMP AND THE TEXTURE */

//Create a bump map which create a effect of depth but without creating new polygons
    bump = THREE.ImageUtils.loadTexture("http://mamboleoo.be/learnThree/img/moonBump.jpg");
    //Create the same material than moon2 but with a map
    material = new THREE.MeshPhongMaterial({
        shininess: 30,
        bumpMap: bump,
        map: texture,
        bumpScale: 3,
    });

moon3 = new THREE.Mesh(geometry, material);
    moon3.rotation.z = Math.PI / 8;
    moon3.position.x = 350;
    elements.add(moon3);

scene.add(elements);

};

var animate = function() {

requestAnimationFrame(animate);

moon1.rotation.y += .01;
    moon2.rotation.y += .01;
    moon3.rotation.y += .01;

renderer.render(scene, camera);
};

init();

编译

CSS

HTML

Bump Map，地球表面贴图。

three, texture, earth

编辑器支持Emmet

快捷键

Bump Map，地球表面贴图。

three, texture, earth

Three.js CSS3使用用户头像拼接成的3D球面

WebGL Three.js高质量3D旋转地球卫星云图着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：