380 lines
9.8 KiB
HTML
380 lines
9.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Title</title>
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
html, body {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
/*canvas {*/
|
|||
|
|
/*width: 100%;*/
|
|||
|
|
/*height: 100%*/
|
|||
|
|
/*}*/
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script type="application/javascript" src="three.js"></script>
|
|||
|
|
<script type="application/javascript" src="stats.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
console.log( "document.body.clientWidth", document.body.clientWidth )
|
|||
|
|
console.log( "document.body.clientHeight", document.body.clientHeight)
|
|||
|
|
console.log( "document.body.offsetWidth", document.body.offsetWidth)
|
|||
|
|
console.log( "document.body.offsetHeight", document.body.offsetHeight)
|
|||
|
|
console.log( "document.body.scrollWidth", document.body.scrollWidth)
|
|||
|
|
console.log( "document.body.scrollHeight", document.body.scrollHeight)
|
|||
|
|
console.log( "document.body.scrollTop", document.body.scrollTop)
|
|||
|
|
console.log( "document.body.scrollLeft", document.body.scrollLeft)
|
|||
|
|
console.log( "window.screenTop", window.screenTop)
|
|||
|
|
console.log( "window.screenLeft", window.screenLeft)
|
|||
|
|
console.log( "window.screen.height", window.screen.height)
|
|||
|
|
console.log( "window.screen.width", window.screen.width)
|
|||
|
|
console.log( "window.screen.availHeight", window.screen.availHeight)
|
|||
|
|
console.log( "window.screen.availWidth", window.screen.availWidth)
|
|||
|
|
|
|||
|
|
|
|||
|
|
var mouseX = 0;
|
|||
|
|
var mouseY = 0;
|
|||
|
|
|
|||
|
|
var w = document.body.clientWidth
|
|||
|
|
var h = document.body.clientHeight
|
|||
|
|
|
|||
|
|
document.addEventListener('mousemove', onDocumentMouseMove, false );
|
|||
|
|
function onDocumentMouseMove( event ) {
|
|||
|
|
mouseX = ( event.clientX - w/2 );
|
|||
|
|
mouseY = ( event.clientY - h/2 );
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
var scene = new THREE.Scene();
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var camera = new THREE.PerspectiveCamera(45, w / h , 0.1, 500);
|
|||
|
|
// var camera = new THREE.OrthographicCamera( w / -2, w /2, h/ 2, h/-2, 0.1, 500 );
|
|||
|
|
|
|||
|
|
var far = 50
|
|||
|
|
camera.position.x = 0;
|
|||
|
|
camera.position.y = - far / 2;
|
|||
|
|
camera.position.z = far;
|
|||
|
|
|
|||
|
|
// camera.up.set(1, 1, 1)
|
|||
|
|
camera.lookAt(new THREE.Vector3( 0, 0, 0 ));
|
|||
|
|
// console.log("scene.position)", scene.position)
|
|||
|
|
|
|||
|
|
var renderer = new THREE.WebGLRenderer({
|
|||
|
|
antialias:true
|
|||
|
|
});
|
|||
|
|
renderer.setSize(w, h);
|
|||
|
|
|
|||
|
|
|
|||
|
|
var stats = new Stats();
|
|||
|
|
stats.domElement.style.position = 'absolute';
|
|||
|
|
stats.domElement.style.left = '0px';
|
|||
|
|
stats.domElement.style.top = '0px';
|
|||
|
|
|
|||
|
|
document.body.appendChild(renderer.domElement);
|
|||
|
|
document.body.appendChild(stats.domElement);
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
{
|
|||
|
|
var light = new THREE.AmbientLight(0xFFFFFF);
|
|||
|
|
light.position.set(100, 100, 200);
|
|||
|
|
scene.add(light);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// {
|
|||
|
|
// var light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
|
|||
|
|
// light.position.set(200, 100, 0);
|
|||
|
|
// scene.add(light);
|
|||
|
|
// }
|
|||
|
|
// {
|
|||
|
|
// var geometry = new THREE.CubeGeometry( 50, 50, 50, 4, 4);
|
|||
|
|
// // B start
|
|||
|
|
// var material = new THREE.MeshLambertMaterial( { color:0x880000} );
|
|||
|
|
// // B end
|
|||
|
|
// var mesh = new THREE.Mesh( geometry,material);
|
|||
|
|
// mesh.position = new THREE.Vector3(0,0,0);
|
|||
|
|
// scene.add(mesh);
|
|||
|
|
// }
|
|||
|
|
{
|
|||
|
|
// 网格的边长是1000，每个小网格的边长是50
|
|||
|
|
var helper = new THREE.GridHelper( 1000, 50 , 0x0000ff, 0x808080 );
|
|||
|
|
scene.add( helper );
|
|||
|
|
}
|
|||
|
|
var curMeth;
|
|||
|
|
{
|
|||
|
|
var geometry = new THREE.BoxGeometry( 1,1,1 );
|
|||
|
|
|
|||
|
|
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
|
|||
|
|
|
|||
|
|
var hex = Math.random() * 0xffffff;
|
|||
|
|
geometry.faces[ i ].color.setHex( hex );
|
|||
|
|
geometry.faces[ i + 1 ].color.setHex( hex );
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.FaceColors} );
|
|||
|
|
var mesh = new THREE.Mesh( geometry,material);
|
|||
|
|
mesh.position = new THREE.Vector3(0, -10 ,0);
|
|||
|
|
scene.add(mesh);
|
|||
|
|
curMeth = mesh
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var watting;
|
|||
|
|
{
|
|||
|
|
var loader = new THREE.FontLoader();
|
|||
|
|
//导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体
|
|||
|
|
loader.load('./helvetiker_bold.typeface.json', function(font) {
|
|||
|
|
|
|||
|
|
// 文字
|
|||
|
|
var text = "Watting...";
|
|||
|
|
|
|||
|
|
|
|||
|
|
var g = new THREE.TextGeometry(text, {
|
|||
|
|
// 设定文字字体，
|
|||
|
|
font: font,
|
|||
|
|
//尺寸
|
|||
|
|
size: 20,
|
|||
|
|
//厚度
|
|||
|
|
height: 5,
|
|||
|
|
});
|
|||
|
|
//计算边界，暂时不用管
|
|||
|
|
g.computeBoundingBox();
|
|||
|
|
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
g = new THREE.EdgesGeometry(g); //或WireframeGeometry(几何)
|
|||
|
|
|
|||
|
|
var mat = new THREE.LineBasicMaterial({color : 0xffffff, linewidth : 2});
|
|||
|
|
|
|||
|
|
var wireframe = new THREE.LineSegments( g , mat );
|
|||
|
|
|
|||
|
|
scene.add(wireframe);
|
|||
|
|
watting = wireframe
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// //3D文字材质
|
|||
|
|
// var m = new THREE.LineBasicMaterial({color: 0xffff00});
|
|||
|
|
// var mesh = new THREE.Mesh(g, m);
|
|||
|
|
// mesh.position = new THREE.Vector3(0, -100, 0);
|
|||
|
|
//
|
|||
|
|
// // 加入到场景中
|
|||
|
|
// scene.add(mesh);
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
var loader = new THREE.FontLoader();
|
|||
|
|
//导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体
|
|||
|
|
loader.load('./yahei.json', function(font){
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
var xMid;
|
|||
|
|
|
|||
|
|
var color = 0x006699;
|
|||
|
|
|
|||
|
|
var matDark = new THREE.LineBasicMaterial( {
|
|||
|
|
color: color,
|
|||
|
|
side: THREE.DoubleSide
|
|||
|
|
} );
|
|||
|
|
|
|||
|
|
var matLite = new THREE.MeshBasicMaterial( {
|
|||
|
|
color: color,
|
|||
|
|
transparent: true,
|
|||
|
|
opacity: 0.4,
|
|||
|
|
side: THREE.DoubleSide
|
|||
|
|
} );
|
|||
|
|
|
|||
|
|
var message = "亿企云平台";
|
|||
|
|
|
|||
|
|
var shapes = font.generateShapes( message, 10 );
|
|||
|
|
|
|||
|
|
var geometry = new THREE.ShapeBufferGeometry( shapes );
|
|||
|
|
|
|||
|
|
geometry.computeBoundingBox();
|
|||
|
|
|
|||
|
|
xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
|
|||
|
|
|
|||
|
|
geometry.translate( xMid, 0, 0 );
|
|||
|
|
|
|||
|
|
// make shape ( N.B. edge view not visible )
|
|||
|
|
|
|||
|
|
text = new THREE.Mesh( geometry, matLite );
|
|||
|
|
text.position.z = - 10;
|
|||
|
|
scene.add( text );
|
|||
|
|
|
|||
|
|
// make line shape ( N.B. edge view remains visible )
|
|||
|
|
|
|||
|
|
var holeShapes = [];
|
|||
|
|
|
|||
|
|
for ( var i = 0; i < shapes.length; i ++ ) {
|
|||
|
|
|
|||
|
|
var shape = shapes[ i ];
|
|||
|
|
|
|||
|
|
if ( shape.holes && shape.holes.length > 0 ) {
|
|||
|
|
|
|||
|
|
for ( var j = 0; j < shape.holes.length; j ++ ) {
|
|||
|
|
|
|||
|
|
var hole = shape.holes[ j ];
|
|||
|
|
holeShapes.push( hole );
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
shapes.push.apply( shapes, holeShapes );
|
|||
|
|
|
|||
|
|
var lineText = new THREE.Object3D();
|
|||
|
|
|
|||
|
|
for ( var i = 0; i < shapes.length; i ++ ) {
|
|||
|
|
|
|||
|
|
var shape = shapes[ i ];
|
|||
|
|
|
|||
|
|
var points = shape.getPoints();
|
|||
|
|
var geometry = new THREE.BufferGeometry().setFromPoints( points );
|
|||
|
|
|
|||
|
|
geometry.translate( xMid, 0, 0 );
|
|||
|
|
|
|||
|
|
var lineMesh = new THREE.Line( geometry, matDark );
|
|||
|
|
lineText.add( lineMesh );
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
scene.add( lineText );
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
if ( watting ){
|
|||
|
|
setTimeout(function () {
|
|||
|
|
scene.remove( watting )
|
|||
|
|
}, 10000 )
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// {
|
|||
|
|
// var geometry = new THREE.CylinderGeometry( 5,5,5);
|
|||
|
|
// var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
|
|||
|
|
// var mesh = new THREE.Mesh( geometry,material);
|
|||
|
|
// mesh.position = new THREE.Vector3(0,0,0);
|
|||
|
|
// scene.add(mesh);
|
|||
|
|
// }
|
|||
|
|
// {
|
|||
|
|
// var axisHelper =new THREE.AxisHelper(20);
|
|||
|
|
// scene.add(axisHelper);
|
|||
|
|
//
|
|||
|
|
// }
|
|||
|
|
// {
|
|||
|
|
//
|
|||
|
|
//
|
|||
|
|
//
|
|||
|
|
// var material = new THREE.LineBasicMaterial( { vertexColors: true } );
|
|||
|
|
// var color0 = new THREE.Color( 0x444444 );
|
|||
|
|
// var color1 = new THREE.Color( 0xFF0000 );
|
|||
|
|
// var color2 = new THREE.Color( 0x00FF00 );
|
|||
|
|
// var color3 = new THREE.Color( 0x0000FF );
|
|||
|
|
//
|
|||
|
|
//
|
|||
|
|
// // 线的材质可以由2点的颜色决定
|
|||
|
|
// var p0 = new THREE.Vector3( 0, 0, 0 );
|
|||
|
|
// var p1 = new THREE.Vector3( 100, 0, 0 );
|
|||
|
|
// var p2 = new THREE.Vector3( 0, 100, 0 );
|
|||
|
|
// var p3 = new THREE.Vector3( 0, 0, 100 );
|
|||
|
|
// var geometry1 = new THREE.Geometry();
|
|||
|
|
// geometry1.vertices.push(p0);
|
|||
|
|
// geometry1.vertices.push(p1);
|
|||
|
|
// geometry1.colors.push( color0, color1 );
|
|||
|
|
//
|
|||
|
|
// var geometry2 = new THREE.Geometry();
|
|||
|
|
// geometry2.vertices.push(p0);
|
|||
|
|
// geometry2.vertices.push(p2);
|
|||
|
|
// geometry2.colors.push( color0, color2 );
|
|||
|
|
// // geometry.vertices.push(p3);
|
|||
|
|
//
|
|||
|
|
// var geometry3 = new THREE.Geometry();
|
|||
|
|
// geometry3.vertices.push(p0);
|
|||
|
|
// geometry3.vertices.push(p3);
|
|||
|
|
// geometry3.colors.push( color0, color3 );
|
|||
|
|
//
|
|||
|
|
// var line1 = new THREE.Line( geometry1, material, THREE.LineSegments );
|
|||
|
|
// var line2 = new THREE.Line( geometry2, material, THREE.LineSegments );
|
|||
|
|
// var line3 = new THREE.Line( geometry3, material, THREE.LineSegments );
|
|||
|
|
//
|
|||
|
|
// scene.add(line1);
|
|||
|
|
// scene.add(line2);
|
|||
|
|
// scene.add(line3);
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
function render() {
|
|||
|
|
requestAnimationFrame(render);
|
|||
|
|
renderer.render(scene, camera);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function round(a, b, r, angle) {
|
|||
|
|
var na = r * Math.sin( angle )
|
|||
|
|
var nb = r * Math.cos( angle )
|
|||
|
|
return {
|
|||
|
|
na,nb
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var angle = 0
|
|||
|
|
var v = 0.01
|
|||
|
|
|
|||
|
|
setInterval(function () {
|
|||
|
|
|
|||
|
|
if ( v == 0.01 ){
|
|||
|
|
v = 0.1
|
|||
|
|
} else {
|
|||
|
|
v = 0.01
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}, 3000 )
|
|||
|
|
|
|||
|
|
function animate() {
|
|||
|
|
|
|||
|
|
// // curMeth.rotation.y += 0.01;
|
|||
|
|
// camera.position.x += ( mouseX - camera.position.x ) * 0.05;
|
|||
|
|
// camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
|
|||
|
|
// // 相机永远指向场景的原点位置，场景的位置默认在世界坐标的原点，而且一般我们不会移动scene的位置
|
|||
|
|
// camera.lookAt( scene.position );
|
|||
|
|
|
|||
|
|
// camera.position.x = camera.position.x - 0.11;
|
|||
|
|
|
|||
|
|
angle += v
|
|||
|
|
var p = round(camera.position.x, camera.position.z, 50, angle)
|
|||
|
|
camera.position.x = p.na
|
|||
|
|
camera.position.z = p.nb
|
|||
|
|
camera.lookAt( scene.position )
|
|||
|
|
|
|||
|
|
|
|||
|
|
stats.update()
|
|||
|
|
render();
|
|||
|
|
|
|||
|
|
requestAnimationFrame( animate );
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
animate()
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|