three实现三维镂空网格球体粒子化动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维镂空网格球体粒子化动画效果代码

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

<html lang="en">

<head>

<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	font-size:100%;
	vertical-align:baseline
}
html {
	line-height:1
}
ol,ul {
	list-style:none
}
table {
	border-collapse:collapse;
	border-spacing:0
}
caption,th,td {
	text-align:left;
	font-weight:normal;
	vertical-align:middle
}
q,blockquote {
	quotes:none
}
q:before,q:after,blockquote:before,blockquote:after {
	content:"";
	content:none
}
a img {
	border:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
	display:block
}
body {
	margin:0;
	background:#000
}
canvas {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	cursor:-webkit-grab;
	cursor:-moz-grab
}
canvas:active {
	cursor:-webkit-grabbing;
	cursor:-moz-grabbing
}
canvas {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0
}
.collection {
	position:fixed;
	top:0;
	width:100%;
	z-index:10000
}
.collection a {
	display:block;
	padding:5px;
	background:rgba(0,0,0,0.6);
	color:#fff;
	text-decoration:none;
	font:700 12px Consolas,system,monospace;
	transition:all 250ms linear
}
.collection a:hover {
	background:#fff;
	color:#000
}
.collection .prev {
	text-align:left;
	float:left
}
.collection .next {
	text-align:right;
	float:right
}

</style>
</head>

<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
    <script 
    >
        var controls;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var innerColor = 16711680,
    outerColor = 16750848;
var innerSize = 55,
    outerSize = 60;
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setClearColor(0, 0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = -400;
var group = new THREE.Group();
scene.add(group);
var light = new THREE.AmbientLight(4210752);
scene.add(light);
var directionalLight = new THREE.DirectionalLight(16777215, 1);
directionalLight.position.set(0, 128, 128);
scene.add(directionalLight);
var sphereWireframeInner = new THREE.Mesh(new THREE.IcosahedronGeometry(innerSize, 2), new THREE.MeshLambertMaterial({
    color: innerColor,
    ambient: innerColor,
    wireframe: true,
    transparent: true,
    shininess: 0
}));
scene.add(sphereWireframeInner);
var sphereWireframeOuter = new THREE.Mesh(new THREE.IcosahedronGeometry(outerSize, 3), new THREE.MeshLambertMaterial({
    color: outerColor,
    ambient: outerColor,
    wireframe: true,
    transparent: true,
    shininess: 0
}));
scene.add(sphereWireframeOuter);
var sphereGlassInner = new THREE.Mesh(new THREE.SphereGeometry(innerSize, 32, 32), new THREE.MeshPhongMaterial({
    color: innerColor,
    ambient: innerColor,
    transparent: true,
    shininess: 25,
    opacity: 0.3,
}));
scene.add(sphereGlassInner);
var sphereGlassOuter = new THREE.Mesh(new THREE.SphereGeometry(outerSize, 32, 32), new THREE.MeshPhongMaterial({
    color: outerColor,
    ambient: outerColor,
    transparent: true,
    shininess: 25,
    opacity: 0.3,
}));
var geometry = new THREE.Geometry();
for (i = 0; i < 35000; i++) {
    var x =.........完整代码请登录后点击上方下载按钮下载查看