Three.js 多边形线框图/模型轮廓线

Polygon Wireframe

three, 模型

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var colors = [0xfc63b3, 0xfff48d, 0x94fff5, 0xd68fff];

var w = window.innerWidth;
    var h = window.innerHeight;

var scene, camera, renderer;

var spheres, sphere;

function createMesh(geometry, index) {
        var material = new THREE.MeshBasicMaterial({
            color: colors[index],
            wireframe: true
        });

var mesh = new THREE.Mesh(geometry, material);

return mesh;
    }

function init() {
        scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 10000);
        camera.position.z = 100;

scene.add(camera);

renderer = new THREE.WebGLRenderer();
        renderer.setSize(w, h);
        renderer.setClearColor(0x232A35);

spheres = new THREE.Group();

for (var i = 0; i < 4; i++) {
            sphere = createMesh(new THREE.SphereGeometry(25 - (i * 5), 10, 10), i);
            sphere.rotation.x = Math.random() * 100;

spheres.add(sphere);
        }

scene.add(spheres);

document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);
    }

init();

function render() {
        requestAnimationFrame(render);

for (var i = 0; i < 4; i++) {
            spheres.children[i].rotation.x += 0.005 * (i + 1);
            spheres.children[i].rotation.y += 0.005 * (i + 1);
        }

renderer.render(scene, camera);
    }

render();
})();

编译

CSS

HTML

Polygon Wireframe

three, 模型

编辑器支持Emmet

快捷键

Polygon Wireframe

three, 模型

Three.js 低多边形风格的3D海上生明月图

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：