23three.js加载纹理凹凸贴图和canvas画布

image.png

通过new THREE.ImageUtils.loadTexture("textures/Earth.png")的方式加载纹理。

    var scene;
    var camera;
    var renderer;

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.set(-20,20,20);
        camera.lookAt(scene.position);
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor('#eff6ec');
        renderer.setSize(window.innerWidth,window.innerHeight);

        var ambientLight = new THREE.AmbientLight(0x999999);
        scene.add(ambientLight);

        var spotlight = new THREE.SpotLight(0xffffff);
        spotlight.position.set(-40,60,40);
        scene.add(spotlight);
        var spotlight1 = new THREE.SpotLight(0xffffff);
        spotlight1.position.set(40,-60,-40);
        scene.add(spotlight1);
        cube = creatcube(0,0,0,8);
        cube1 = creatcube1(10,0,0,8);
        cube2 = creatcube2(0,10,0,8);

        var spheregem = new THREE.SphereGeometry(4,80,80);
        var spheremer = new THREE.MeshPhongMaterial();
        var spherever = new THREE.ImageUtils.loadTexture("textures/Earth.png");
        spheremer.map = spherever;
        spheremer.bumpMap = spherever;
        spheremer.bumpScale = 0.4;
        var sphere = new THREE.Mesh(spheregem,spheremer);
        sphere.position.set(-10,0,0);
        scene.add(sphere);

        var trackballControls = new THREE.TrackballControls(camera);
        //trackballControls.panSpeed = 0;
        //var clock = new THREE.Clock();
        document.getElementById('webgl-output').appendChild(renderer.domElement);

        function renderScene() {
           // var delta = clock.getDelta();
           // trackballControls.update(delta); //每次渲染的时间间隔
            trackballControls.update();//写一个 updata 可以简化代码
            sphere.rotation.y += 0.001;
            requestAnimationFrame(renderScene);
            renderer.render(scene,camera);
        }
        renderScene();

    }

    function creatcube(x,y,z,len) {
        var cubeme = new THREE.BoxGeometry(len,len,len);
        var cubemer = new THREE.MeshPhongMaterial();    //phong 可以同时使用纹理贴图和凹凸贴图
        //var cubemer = new THREE.MeshLambertMaterial(); //lambert 不能使用凹凸贴图
        var texture = new THREE.ImageUtils.loadTexture("textures/223.jpg");
        cubemer.map = texture;  //纹理贴图
        cubemer.bumpMap = texture; //凹凸贴图
        cubemer.bumpScale = 0.8;
        var cube = new THREE.Mesh(cubeme,cubemer);
        cube.position.set(x,y,z);
        scene.add(cube);
        return cube;
    }
    function creatcube1(x,y,z,len) {
        var cubeme = new THREE.BoxGeometry(len,len,len);
        var cubemer = new THREE.MeshPhongMaterial();    //phong 可以同时使用纹理贴图和凹凸贴图
        //var cubemer = new THREE.MeshLambertMaterial(); //lambert 不能使用凹凸贴图
        var texture = new THREE.Texture(faces('#ea9604')); //canvas 要更新needUpdate
        texture.needsUpdate = true;
        cubemer.map = texture;  //纹理贴图
        var bump = new THREE.ImageUtils.loadTexture("textures/223.jpg");
        cubemer.bumpMap = bump; //凹凸贴图
        cubemer.bumpScale = 0.8;
        var cube = new THREE.Mesh(cubeme,cubemer);
        cube.position.set(x,y,z);
        scene.add(cube);
        return cube;
    }
    //6个面不同颜色
    function creatcube2(x,y,z,len) {
        var cubeme = new THREE.BoxGeometry(len,len,len);
        var colors = ['#0000CC','#006600',
            '#FFFF33','#FFFFFF',
            '#FF0000','#FF6600'];
        var materials = [];

        for (var i=0;i<6;i++) {
            var texture = new THREE.Texture(faces(colors[i]));
            texture.needsUpdate = true;
            materials.push(new THREE.MeshLambertMaterial({
                map: texture
            }));
        }
        var cubeMaterials = new THREE.MeshFaceMaterial(materials);
        var cube = new THREE.Mesh(cubeme,cubeMaterials);
        cube.position.set(x,y,z);
        scene.add(cube);
        return cube;
    }
    function faces(fcolor) {
        var canvas = document.createElement('canvas');
        canvas.width = 256;
        canvas.height = 256;
        var context = canvas.getContext('2d');
        context.fillStyle = 'rgba(0,0,0,1)';
        context.fillRect(0, 0, 256, 256);
        context.rect(16, 16, 224, 224);
        context.lineJoin = 'round';
        context.lineWidth = 16;
        context.fillStyle = fcolor;
       context.strokeStyle = "rgb(252,254,250)";
        context.stroke();
        context.fill();
        return canvas;
    }
    window.onload = init;