<!DOCTYPE html>
<html lang="en">
<head>
<title>untitled</title>
.
.0 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>body { font-family: Monospace; background-color: #000; color: #fff; margin: 0px; overflow: hidden; } </style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.min.js"></script>
<script>
class xwall{
constructor(x,y,z,w,h,hz=0.01){
this.w = w;
this.h = h;
this.x=x;
this.y=y;
this.z=z;
var geometry = new THREE.BoxGeometry( w,h,hz );
var material = new THREE.MeshLambertMaterial();
this.cube = new THREE.Mesh( geometry, material );
this.cube.iiparent = this;
scene.add(this.cube);
this.update(0);
return this;
};
update(r){
this.r = r;
var ra = -r/360*Math.PI*2,x=this.x,y=this.y,z=this.z,w=this.w,h=this.h;
this.cube.rotation.y = ra;
this.cube.position.set(x+Math.cos(-ra)*(w/2),y+h/2,z+Math.sin(-ra)*(w/2));
return this;
};
doAnimation(animtype){
//this.animtype = animtype;
this.animtype = (this.animtype==2)?1:2;
this.animstart_r = this.r;
this.animtime = new Date().getTime();}
updateAnimation(currtime){
if(this.animtype){
var sig = this.animtype*2-3;
var frame = Math.min(300,(currtime - this.animtime));
this.update(-sig*frame/300*90+this.animstart_r);}}}
// -----------
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, light;
var walls = []
init();
animate();
// -----------
window.addEventListener('click', ondblclick, false);
function ondblclick(ev){
var intersectable = [];
walls.forEach(function(x){if(x.openable)intersectable.push(x.cube);});
interobj(ev, intersectable).forEach(function(x){
x.object.iiparent.doAnimation(1);});
intersectable = null;}
function interobj(event, interX){
var ww = window.innerWidth, hh = window.innerHeight;
var ray, intersections;
var _vector = new THREE.Vector3();
_vector.set(
( event.clientX / window.innerWidth ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,1);
_vector.unproject( camera );
ray = new THREE.Raycaster( camera.position,
_vector.sub( camera.position ).normalize() );
return ray.intersectObjects( interX );}
function plane_xz(event){
intersections = interobj(event, [intersect_plane]);
if ( intersections.length > 0 ) {
selected_block = intersections[0].object;
return intersections[0].point;}}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
//camera = new THREE.PerspectiveCamera( 45, 4/3, 0.25, 20 );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
camera.position.set( 5,5,5 );
controls = new THREE.OrbitControls( camera );
controls.target.set( 0, 0, 0 );
controls.update();
scene = new THREE.Scene();
light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
light.position.set( 0, 1, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( -10, 6, -10 );
scene.add( light );
// ========== add objects
intersect_plane = new THREE.Mesh(
new THREE.PlaneGeometry( 33,33 ),
new THREE.MeshBasicMaterial({ opacity: 0.1, transparent: true }));
intersect_plane.rotation.x = Math.PI / -2;
scene.add( intersect_plane );
function add_service_set(x,z,y=0){
var b = new xwall(0+x,y,0+z,1,2).update(0); walls.push(b);
var b = new xwall(1+x,y,0+z,1,2).update(90); walls.push(b);
var b = new xwall(1+x,y,1+z,1,2).update(180); walls.push(b);
b.cube.material.transparent=true;
b.cube.material.opacity=0.5;
b.openable = true;
var b = new xwall(0+x,y,1+z,1,2).update(270); walls.push(b);
[0,1,2,4,5,6,8,9,10, 12,13].forEach(function(i){
var b = new xwall(0.1+x, i*0.14+y,0.5+z,0.8,0.11,0.8);
b.cube.material.color=new THREE.Color(0,i%2==0?0.1:0,i*0.02+0.04);});}
[0,1,3,4,6,7].forEach(function(i){
for(j=0;j<3;j++){
add_service_set(i*1.2, j*3);}});
var doorplace = 6;
var doorwidth = 1.2;
var b = new xwall(-2,0,-2,10,2).update(0); walls.push(b);
var b = new xwall(-2,2, -2,10,0.5).update(0); walls.push(b);
var b = new xwall(-2,2, -2,10,0.5).update(90); walls.push(b);
var b = new xwall(-2,0, -2,doorplace,2).update(90); walls.push(b);
var b = new xwall(-2,0,-2+doorplace, doorwidth,2).update(90); walls.push(b);
b.cube.material.transparent=true;
b.cube.material.opacity=0.5;
b.openable=true;
var b = new xwall(-2,0,-2+doorplace+doorwidth,
10-(doorplace+doorwidth),2).update(90); walls.push(b);
// ========== add objects over
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( 1 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( 400,300 );
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
// stats
stats = new Stats();
container.appendChild( stats.dom );}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
stats.update();
var currtime = new Date().getTime();
walls.forEach(function(x){x.updateAnimation(currtime);});}
onWindowResize()
</script>
</body>
</html>
2617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
