Three.js 3D结晶体形状的动画图标

Blueprint Coffee Logo (Three.js)

three，logo

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

第三方库
作品简介 3726
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene, camera, renderer, cube, pyramid, logo = null;

function init() {
    setup_scene();
    draw_logo();
    render();
}

function setup_scene() {
    if (scene == null) {
        scene = new THREE.Scene();
    }

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = Math.max((500 / window.innerWidth) * 4, 4);
    camera.position.y = 0;

if (renderer == null) {
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x0093b7, 1);
        document.body.appendChild(renderer.domElement);
    } else {
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
}

function draw_logo() {
    //pyramid
    pyramid_geometry = new THREE.TetrahedronGeometry(1);
    pyramid_material = new THREE.MeshBasicMaterial({
        color: 0xffffff
    });
    pyramid = new THREE.Mesh(pyramid_geometry, pyramid_material);
    pyramid_edges = new THREE.EdgesHelper(pyramid, 0xffffff);
    pyramid_edges.material.linewidth = 5;

//cube
    cube_length = 2 * Math.sqrt(1 / 3);
    cube_geometry = new THREE.BoxGeometry(cube_length, cube_length, cube_length);
    cube_material = new THREE.MeshBasicMaterial({
        color: 0xffffff
    });
    cube = new THREE.Mesh(cube_geometry, cube_material);
    cube_edges = new THREE.EdgesHelper(cube, 0xffffff);
    cube_edges.material.linewidth = 5;

//group these together
    console.log(logo);
    logo = new THREE.Object3D();
    console.log(logo);
    logo.add(cube_edges);
    logo.add(pyramid_edges);
    scene.add(logo);

//rotate into canonical Blueprint logo position
    logo.rotation.x = (Math.PI) + (Math.PI / 5);
    logo.rotation.y = Math.PI / 4;
}

function render() {
    requestAnimationFrame(render);
    logo.rotation.y += 0.01;
    renderer.render(scene, camera);
}

function on_resize() {
    setup_scene();
}

window.addEventListener('resize', on_resize, true);

init();

编译

CSS

HTML

Blueprint Coffee Logo (Three.js)

three，logo

编辑器支持Emmet

快捷键

Blueprint Coffee Logo (Three.js)

three，logo

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：