Web 3D 正方体贴图

在网页上做一个正方体，然后在各个面贴不同的图；

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js canvas - geometry - cube</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/Projector.js"></script>
<script src="js/CanvasRenderer.js"></script>

<script>

    var container;

    var camera, scene, renderer;

    var cube, plane;

    var controls;

    init();
    animate();

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);
        var info = document.createElement('div');
        info.style.position = 'absolute';
        info.style.top = '10px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.innerHTML = '鼠标拖动旋转正方体';
        container.appendChild(info);

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.y = 0;
        camera.position.z = 800;
        camera.position.x = 0;
        controls = new THREE.OrbitControls(camera);

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x9F9F5F);


        // Cube

        var geometry = new THREE.BoxGeometry(250, 250, 250);
        var materialsbg = [];

        for (var i = 0; i < geometry.faces.length / 2; i += 1) {
            var material = new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture('./css/images/' + (i + 1) + '.png',
                )
            });
            materialsbg[i] = material

        }

        cube = new THREE.Mesh(geometry, materialsbg);
        scene.add(cube);

        renderer = new THREE.CanvasRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

    }

    function animate() {

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

    }

</script>

</body>
</html>

var info = document.createElement('div');

这个是放文字的div；

贴图首先是定义一个box，

var geometry = new THREE.BoxGeometry(250, 250, 250);

一个数组用来存放纹理图片，

var materialsbg = [];

逐个获取图片转换为Material，存入数组；

var material = new THREE.MeshBasicMaterial({

map: THREE.ImageUtils.loadTexture('....'

)

});

创建正方体的时候使用Mesh类，第一个参数是BoxGeometry类型，第二个参数是纹理图片数组；

cube = new THREE.Mesh(geometry, materialsbg);