/
theScene.html
251 lines (187 loc) · 8.18 KB
/
theScene.html
1
<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - orbit controls</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { color: #000; font-family:Monospace; font-size:13px; text-align:center; font-weight: bold; background-color: #fff; margin: 0px; overflow: hidden; } #info { color:#000; position: absolute; top: 0px; width: 100%; padding: 5px; } a { color: red; } </style> </head> <body> <div id="container"></div> <!-- <div id="info"> <a href="http://threejs.org" target="_blank">three.js</a> - orbit controls example </div> --> <script src="js/three.min.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/Detector.js"></script> <script src="js/Stats.js"></script> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container, stats; var camera, controls, scene, renderer, myAssembly; var cross; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.z = 500; controls = new THREE.OrbitControls( camera ); controls.addEventListener( "change", render ); scene = new THREE.Scene(); //scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 ); // world myAssembly = buildMyAssembly(); // Function is defined in separate script tag. scene.add( myAssembly ); // lights light = new THREE.DirectionalLight( 0xffffff ); light.position.set( 1, 1, 1 ); scene.add( light ); light = new THREE.DirectionalLight( 0x002288 ); light.position.set( -1, -1, -1 ); scene.add( light ); light = new THREE.AmbientLight( 0x222222 ); scene.add( light ); // renderer renderer = new THREE.WebGLRenderer( { antialias: false } ); // renderer.setClearColor( scene.fog.color, 1 ); renderer.setSize( window.innerWidth, window.innerHeight ); container = document.getElementById( "container" ); container.appendChild( renderer.domElement ); // stats pane stats = new Stats(); stats.domElement.style.position = "absolute"; stats.domElement.style.top = "0px"; stats.domElement.style.zIndex = 100; container.appendChild( stats.domElement ); // window.addEventListener( "resize", onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); render(); } function animate() { requestAnimationFrame( animate ); controls.update(); } function render() { renderer.render( scene, camera ); stats.update(); } function buildMyAssembly() { var theScene = new THREE.Geometry();var interiorLayer = new THREE.Geometry(); var galleyBulkhead = new THREE.Mesh( ( new THREE.CubeGeometry( 0.700, 0.040, 2.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); galleyBulkhead.position.set( 0.350, 4.020, 1.200 ); THREE.GeometryUtils.merge( interiorLayer, galleyBulkhead ); var bed = new THREE.Mesh( ( new THREE.CubeGeometry( 1.200, 2.000, 0.500 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); bed.position.set( 0.600, 1.000, 0.450 ); THREE.GeometryUtils.merge( interiorLayer, bed ); var galleyTable = new THREE.Mesh( ( new THREE.CubeGeometry( 0.600, 1.700, 0.020 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); galleyTable.position.set( 0.300, 4.890, 0.990 ); THREE.GeometryUtils.merge( interiorLayer, galleyTable ); var bedWalkSpace = new THREE.Mesh( ( new THREE.CubeGeometry( 2.000, 0.500, 2.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); bedWalkSpace.position.set( 1.000, 2.250, 1.000 ); THREE.GeometryUtils.merge( interiorLayer, bedWalkSpace ); var toilet = new THREE.Mesh( ( new THREE.CubeGeometry( 0.200, 1.000, 0.400 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); toilet.position.set( 0.100, 3.500, 0.400 ); THREE.GeometryUtils.merge( interiorLayer, toilet ); var galley = new THREE.Mesh( ( new THREE.CubeGeometry( 0.400, 1.700, 1.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); galley.position.set( 0.200, 4.890, 0.700 ); THREE.GeometryUtils.merge( interiorLayer, galley ); var westCloset = new THREE.Mesh( ( new THREE.CubeGeometry( 0.700, 0.500, 2.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); westCloset.position.set( 0.350, 2.750, 1.000 ); THREE.GeometryUtils.merge( interiorLayer, westCloset ); var handSink = new THREE.Mesh( ( new THREE.CubeGeometry( 0.200, 1.000, 0.200 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); handSink.position.set( 0.100, 3.500, 0.900 ); THREE.GeometryUtils.merge( interiorLayer, handSink ); var shower = new THREE.Mesh( ( new THREE.CubeGeometry( 0.700, 1.000, 2.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); shower.position.set( 1.650, 3.500, 1.200 ); THREE.GeometryUtils.merge( interiorLayer, shower ); var centerAisle = new THREE.Mesh( ( new THREE.CubeGeometry( 0.600, 6.000, 2.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); centerAisle.position.set( 1.000, 3.000, 1.200 ); THREE.GeometryUtils.merge( interiorLayer, centerAisle ); var eastCloset = new THREE.Mesh( ( new THREE.CubeGeometry( 0.700, 0.500, 2.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); eastCloset.position.set( 1.650, 2.750, 1.000 ); THREE.GeometryUtils.merge( interiorLayer, eastCloset ); THREE.GeometryUtils.merge( theScene, interiorLayer );var wallLayer = new THREE.Geometry(); var westWall = new THREE.Mesh( ( new THREE.CubeGeometry( 0.100, 5.740, 1.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); westWall.position.set( -0.050, 2.870, 0.500 ); THREE.GeometryUtils.merge( wallLayer, westWall ); var southWall = new THREE.Mesh( ( new THREE.CubeGeometry( 2.000, 0.100, 1.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); southWall.position.set( 1.000, -0.050, 0.500 ); THREE.GeometryUtils.merge( wallLayer, southWall ); var northWall = new THREE.Mesh( ( new THREE.CubeGeometry( 2.000, 0.100, 1.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); northWall.position.set( 1.000, 5.790, 0.500 ); THREE.GeometryUtils.merge( wallLayer, northWall ); var eastWall = new THREE.Mesh( ( new THREE.CubeGeometry( 0.100, 5.740, 1.000 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); eastWall.position.set( 2.050, 2.870, 0.500 ); THREE.GeometryUtils.merge( wallLayer, eastWall ); THREE.GeometryUtils.merge( theScene, wallLayer );var deckLayer = new THREE.Geometry(); var deck = new THREE.Mesh( ( new THREE.CubeGeometry( 2.000, 5.740, 0.200 ) ) , ( new THREE.MeshBasicMaterial( { color: 0x808080 } ) ) ); deck.position.set( 1.000, 2.870, 0.100 ); THREE.GeometryUtils.merge( deckLayer, deck ); THREE.GeometryUtils.merge( theScene, deckLayer ); return theScene; } </script> </body></html>