THREE 3D字符图标

三维图标自旋

logo,3d

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

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

var renderer = new THREE.WebGLRenderer({
    clear: false
});
renderer.setSize(window.innerWidth, window.innerHeight);

var logo, light;

document.body.appendChild(renderer.domElement);

var loader = new THREE.ColladaLoader();
loader.load("/uploads/140917/gm-logo.dae", function(collada) {

logo = collada.scene;
    logo.position.set(0, 0, 50);
    logo.scale.set(100, 100, 100);
    logo.rotation.y = 2;
    logo.children[0].children[0].material = new THREE.MeshLambertMaterial({
        color: 0x111111
    });

scene.add(logo);

light = new THREE.PointLight(0xffffff, 5, 75);
    light.position.set(0, 0, 0);
    scene.add(light);

camera.lookAt(logo.position);

render();

TweenMax.to(logo.rotation, 3, {
        y: 10.5,
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut
    });
});

function render() {

renderer.render(scene, camera);

requestAnimationFrame(render);
}

编译

CSS

HTML

三维图标自旋

logo,3d

编辑器支持Emmet

快捷键

三维图标自旋

logo,3d

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

HTML5 WebGL 很棒的头像和图形3D粒子效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：