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>
|