Three.js使用MeshFaceMaterial给立方体添加多个纹理贴图

three.js multi textures, 本例使用MeshFaceMaterial来整合多个材料（纹理）

three, texture

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 50;
scene.add(camera);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var mesh;
var cubeGeo = new THREE.BoxGeometry(20, 20, 20, 1, 1, 1);
var materials = [];
var loader = new THREE.TextureLoader();
for (var i = 1; i <= 6; i++) {
    loader.load('/uploads/160701/pattern-' + i + '.png',
        function(texture) {
            console.log('loaded');
            var mat = new THREE.MeshBasicMaterial({
                color: 0xffffff,
                map: texture
            });
            materials.push(mat);
            console.log(materials.length);
            if (materials.length >= 6) {
                mesh = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial(materials));
                scene.add(mesh);
                render();
            }
        });
}

var render = function() {
    requestAnimationFrame(render);

mesh.rotation.y += 0.01;
    mesh.rotation.x += 0.02;

renderer.render(scene, camera);
}

编译

CSS

HTML

three.js multi textures, 本例使用MeshFaceMaterial来整合多个材料（纹理）

three, texture

编辑器支持Emmet

快捷键

three.js multi textures, 本例使用MeshFaceMaterial来整合多个材料（纹理）

three, texture

three.js使用TrackballControls给场景添加交互

three.js使用OutlinePass给3D对象添加轮廓线 | 边框线 | 高亮边缘

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：