three三维多面体星球尘埃旋转动画效果代码

代码语言:html

所属分类:三维

代码描述:three三维多面体星球尘埃旋转动画效果代码

代码标签: three 三维 多面体 星球 尘埃 旋转 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <style>
        html {
    	width:100%;
    	height:100%;
    	background:#11e8bb;
    	background:-moz-linear-gradient(top,#11e8bb 0,#8200c9 100%);
    	background:-webkit-linear-gradient(top,#11e8bb 0,#8200c9 100%);
    	background:linear-gradient(to bottom,#11e8bb 0,#8200c9 100%);
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#11e8bb',endColorstr='#8200c9',GradientType=0);
    	overflow:hidden
    }
    body {
    	margin:0;
    	padding:0
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="canvas"></div>
    <!-- partial -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script>
    <script>
        var renderer, scene, camera, composer, circle, skelet, particle;
window.onload = function() {
    init();
    animate()
};

function init() {
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;
    renderer.setClearColor(0, 0);
    document.getElementById("canvas").appendChild(renderer.domElement);
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;
    scene.add(camera);
    circle = new THREE.Object3D();
    skelet = new THREE.Object3D();
    particle = new THREE.Object3D();
    scene.add(circle);
    scene.add(skelet);
    scene.add(particle);
    var d = new THREE.TetrahedronGeometry(2, 0);
    var b = new THREE.IcosahedronGeometry(7, 1);
    var c = new THREE.IcosahedronGeometry(15, 1);
    va.........完整代码请登录后点击上方下载按钮下载查看

网友评论0