<!DOCTYPE html>
<html lang="en">
<head>
<title>Guaniupiang</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
#info {
color:rgb(255, 200, 0);
position: absolute;
font-size:20px;
top: 0px;
width: 100%;
padding: 5px;
}
#btn {
position: absolute;
top: 0%;
left: 300px;
height: 80px;
border: 0;
border-left: 1px solid rgb(23, 32, 43, 0.2);
background: #ec35e6;
color: rgb(255, 200, 0);
cursor: pointer;
font-family:"STHupo";
font-size:20px;
}
.box {
float: left;
position: fixed;
left: 0;
height: 1000px;
width: 300px;
margin-left: 0;
display: block;
background-color: #ec35e6;
-moz-transition: margin-left 1s;
transition: margin-left 1s;
opacity: 0.5;
}
aside ul li {
height: 40px;
line-height: 40px;
list-style-type: none;
text-align: center;
}
aside ul li a {
width: 100%;
height: 100%;
text-decoration-line: none;
color: #fff;
display: block;
font-size:20px;
font-family:"STHupo";
}
aside ul li a:hover {
background: rgb(255, 200, 0);
}
h2{
font-family:"STCaiyun";
font-size:20px;
color: rgb(255, 200, 0);
}
h3{
font-family:"STHupo";
font-size:36px;
color: rgb(255, 200, 0);
}
h4{
font-family: "Roboto Slab";
font-weight: 100px;
font-size: 18px;
background: linear-gradient(330deg, #000000 0%, #70e000 25%, #00dddd 50%, #7800f0 75%, #e00606 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 20px;
}
</style>
</head>
<body >
<aside class="box" id="test">
<button id="btn">G&P</button>
<EMBED src="music.mp3" autostart="true" loop="-1" hidden="no" width="0" height="0">
<ul>
<!-- <h2>Welcome To Guaniupiang's Personal Technology Website</h2> -->
<img src="textures/nx.jpg" alt="Pulpit rock" width="180" height="180">
<h3>GuaniuPiang</h3>
<br>
<li><a href="#"><h2>webgl教学资源 ：</h2></a></li>
<li onClick="location.href='lightmaterial.html'" ><a href="#">Light & Material</a></li>
<br>
<li onClick="location.href='lightmaterial.html'"><a href="#"><h2>webgl精彩样例 ：</h2></a></li>
<li onClick="location.href='https://gorescript.com/classic/'"><a href="#">Shoot Game</a></li>
<li onClick="location.href='http://hexgl.bkcore.com/play/'"><a href="#">Airship Game</a></li>
<li onClick="location.href='https://showroom.littleworkshop.fr/'"><a href="#">House Furniture</a></li>
<li onClick="location.href='https://2050.earth/'"><a href="#">Wandering Earth</a></li>
<li onClick="location.href='https://demos.littleworkshop.fr/infinitown'"><a href="#">Intelligent City</a></li>
<li onClick="location.href='https://worlddraw.withgoogle.com/'"><a href="#">World Depict</a></li>
<li onClick="location.href='https://threejs.org/'"><a href="#"><h2>更多精彩</h2></a></li>
<br>
</ul>
<a href="#"><img src="textures/gmail.jpg" onClick="location.href='http://gmail.google.com'" alt="Pulpit rock" width="30" height="30"></a><h4>Contact Me: guaniupiang@gmail.com</h4>
<!-- <img src="textures/nx.jpg" alt="Pulpit rock" width="30" height="30"><br>
<img src="textures/nx.jpg" alt="Pulpit rock" width="30" height="30"> -->
</aside>
<script src="three.js"></script>
<script src="three.min.js"></script>
<script src="WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, scene, renderer;
var spheres = [];
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var materials = [],parameters;
var special;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
.setPath( 'textures/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background, refractionRatio: 0.95 } );
material.envMap.mapping = THREE.CubeRefractionMapping;
for ( var i = 0; i < 50; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 10000 - 5000;
mesh.position.y = Math.random() * 10000 - 5000;
mesh.position.z = Math.random() * 10000 - 5000;
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
scene.add( mesh );
spheres.push( mesh );
}
special = new THREE.Mesh( geometry, material );
special.position.set(-800,500,-80);
scene.add(special);
var spriteGeometry = new THREE.BufferGeometry();
var vertices = [];
var textureLoader = new THREE.TextureLoader();
var sprite1 = textureLoader.load( 'textures/snowflake1.png' );
var sprite2 = textureLoader.load( 'textures/snowflake2.png' );
var sprite3 = textureLoader.load( 'textures/snowflake3.png' );
var sprite4 = textureLoader.load( 'textures/snowflake4.png' );
var sprite5 = textureLoader.load( 'textures/snowflake5.png' );
for ( var i = 0; i < 100000; i ++ ) {
var x = Math.random() * 10000 - 5000;
var y = Math.random() * 10000 - 5000;
var z = Math.random() * 10000 - 5000;
vertices.push( x, y, z );
}
spriteGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
parameters = [
[[ 1.0, 0.2, 0.5 ], sprite2, 20 ],
[[ 0.95, 0.1, 0.5 ], sprite3, 15 ],
[[ 0.90, 0.05, 0.5 ], sprite1, 10 ],
[[ 0.85, 0, 0.5 ], sprite5, 8 ],
[[ 0.80, 0, 0.5 ], sprite4, 5 ]
];
for ( var i = 0; i < parameters.length; i ++ ) {
var color = parameters[ i ][ 0 ];
var sprite = parameters[ i ][ 1 ];
var size = parameters[ i ][ 2 ];
materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
var particles = new THREE.Points( spriteGeometry, materials[ i ] );
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
particles.rotation.z = Math.random() * 6;
scene.add( particles );
}
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'click', onMouseClick, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjection
code.zip （85个子文件） 
code null - 副本 
demoone.html 4KB sport_cube demothree.html 1KB lightmaterial wenzi.html 2KB compare.html 8KB
MTLLoader.js 11KB textures 
nx.jpg 485KB
snowflake2.png 1KB px.jpg 454KB nz.jpg 596KB py.jpg 378KB gmail.jpg 7KB snowflake3.png 1KB snowflake5.png 893B pz.jpg 409KB snowflake1.png 861B snowflake4.png 664B ny.jpg 215KB three.js 1.14MB radius.js 0B WebGL.js 2KB talktwo.js 4KB three.min.js 493KB webgl-utils.js 7KB .vscode ipch 4018928518405f8e SHAPES.ipch 3.25MB mmap_address.bin 8B balala.html 2KB cuon-utils.js 3KB reshape.js 37KB dat.gui.min.js 56KB OBJLoader2.js 57KB yeah.html 8KB lightmaterial.html 3KB xuehua.html 6KB minMatrix.js 8KB data dolphins.mtl 342B opengl.ppm 192KB al.obj 182KB al.mtl 2KB rose+vase.obj 245KB fishermen.ppm 48KB flowers.mtl 401B checker.ppm 48KB marble.ppm 48KB soccerball.mtl 136B f-16.obj 278KB f-16.mtl 536B dolphins.obj 49KB soccerball.obj 195KB rose+vase.mtl 971B train.ppm 192KB porsche.mtl 536B porsche.obj 488KB flowers.obj 673KB ThreeBSP.js 19KB look.html 7KB webgl-debug.js 20KB talk.js 2KB LoaderSupport.js 62KB OrbitControls.js 23KB stats.min.js 2KB spin.js 8KB OrbitControls.1.js 24KB test.html 10KB point.html 9KB OBJLoader.js 19KB green_null cuon-matrix.js 21KB webgl-utils.js 7KB cuon-utils.js 3KB webgl-debug.js 20KB demotwo.html 7KB test three.js 989KB three.min.js 493KB light.html 6KB lightfirst.html 2KB nulll - 副本 webgl-demo.htm 2KB webgl-demo.js 14KB webglone hello.js 1KB webgl-utils.js 7KB hello.html 484B cuon-utils.js 3KB webgl-debug.js 20KB nullll demofour.html 7KB beautiful one.html 6KB styles.css 5KB test.html 443B
评论0
最新资源