javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - loaders - IFC loader</title>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
		/>
		<link type="text/css" rel="stylesheet" href="main.css" />
	</head>

	<body>
		<div id="container"></div>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
			-
			<a href="https://www.buildingsmart.org/standards/bsi-standards/industry-foundation-classes/" target="_blank" rel="noopener">IFC</a>
			loader
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';
			import { OrbitControls } from './jsm/controls/OrbitControls.js';

			import { IFCLoader } from './jsm/loaders/IFCLoader.js';

			//Scene
			const scene = new THREE.Scene();
			scene.background = new THREE.Color( 0x8cc7de );

			//Renderer
			const container = document.querySelector( '#container' );
			const renderer = new THREE.WebGLRenderer( { antialias: true	} );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2 ) );
			renderer.setAnimationLoop( animation );
			container.appendChild( renderer.domElement );

			//Camera
			const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
			camera.position.z = - 70;
			camera.position.y = 25;
			camera.position.x = 90;
			camera.lookAt( 0, 0, 0 );
			const controls = new OrbitControls( camera, renderer.domElement );

			//Initial cube
			const geometry = new THREE.BoxGeometry();
			const material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			//Lights
			const directionalLight1 = new THREE.DirectionalLight( 0xffeeff, 0.8 );
			directionalLight1.position.set( 1, 1, 1 );
			scene.add( directionalLight1 );
			const directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.8 );
			directionalLight2.position.set( - 1, 0.5, - 1 );
			scene.add( directionalLight2 );
			const ambientLight = new THREE.AmbientLight( 0xffffee, 0.25 );
			scene.add( ambientLight );

			//Window resize support
			window.addEventListener( 'resize', () => {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );

			} );

			//Setup IFC Loader
			const ifcLoader = new IFCLoader();

			//Load IFC file
			ifcLoader.load( 'models/ifc/rac_advanced_sample_project.ifc', ( geometry ) => scene.add( geometry ) );

			//Animation
			function animation() {

				controls.update();
				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>