Three.js给立方体添加多个材料

three.js multi-materials

three, material

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// scene, light, camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.z = 2;

var ambient = new THREE.AmbientLight(0x222222);
scene.add(ambient);

var dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(100, 100, 100).normalize();
scene.add(dirLight);

var geom = new THREE.CubeGeometry(1, 1, 1);

var materialSimple = new THREE.MeshLambertMaterial({
    color: 0x020202
});

// 6-color 
var materialMulti = new THREE.MeshFaceMaterial([
    new THREE.MeshLambertMaterial({
        color: 0xff0000
    }),
    new THREE.MeshLambertMaterial({
        color: 0xffff00
    }),
    new THREE.MeshLambertMaterial({
        color: 0xffffff
    }),
    new THREE.MeshLambertMaterial({
        color: 0x00ffff
    }),
    new THREE.MeshLambertMaterial({
        color: 0x0000ff
    }),
    new THREE.MeshLambertMaterial({
        color: 0x000000
    })
]);

var mesh = new THREE.Mesh(geom, materialSimple); // multi-material init.

scene.add(mesh);

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

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

renderer.render(scene, camera);
};

render();

// switch to multi-material
mesh.material = materialMulti;
mesh.material.needsUpdate = true;

编译

CSS

HTML

three.js multi-materials

three, material

编辑器支持Emmet

快捷键

three.js multi-materials

three, material

Three.js 给obj模型添加材料纹理

three.js魔幻弹珠动画特效（给着色器添加体积渲染效果）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：