BIM-Resource/script/js/3Dpic-detail.js

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

	let scene, camera, controls, renderer;

	const scenes = [];

	init();
	animate();

	function init() {

		const container = document.getElementById('content');

		scene = new THREE.Scene();

		camera = new THREE.PerspectiveCamera(50, 1, 1, 1000);
		camera.position.set(0, 2.5, 8);
		scene.userData.camera = camera;
		scene.background = new THREE.Color(0x15608c);

		const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
		hemiLight.position.set(0, 20, 0);
		scene.add(hemiLight);

		const spotLight = new THREE.SpotLight(0xffffff);
		spotLight.position.set(15, 40, 35);
		spotLight.castShadow = true;
		spotLight.intensity = 0.5;
		scene.add(spotLight);
		const spotLight2 = new THREE.SpotLight(0xffffff);
		spotLight2.position.set(15, 40, -35);
		spotLight2.castShadow = true;
		spotLight2.intensity = 0.5;
		scene.add(spotLight2);

		const dirLight = new THREE.DirectionalLight(0xffffff);
		dirLight.position.set(5, 5, 0);
		dirLight.castShadow = true;
		dirLight.shadow.camera.top = 1;
		dirLight.shadow.camera.bottom = -1;
		dirLight.shadow.camera.left = -1;
		dirLight.shadow.camera.right = 1;
		dirLight.shadow.camera.near = 0.1;
		dirLight.shadow.camera.far = 20;
		scene.add(dirLight);

		const mesh = new THREE.Mesh(new THREE.PlaneGeometry(50, 50), new THREE.MeshPhongMaterial({
			color: 0x999999,
			depthWrite: false
		}));
		mesh.rotation.x = -Math.PI / 2;
		mesh.receiveShadow = true;
		scene.add(mesh);

		const grid = new THREE.GridHelper(50, 50, 0x888888, 0x888888);
		scene.add(grid);

		var loader = new GLTFLoader();
		loader.setPath("./assets/glb/Revit元件/" + parent + "/");

		loader.load(name + ".glb", function (gltf) {
			var mroot = gltf.scene;
			var bbox = new THREE.Box3().setFromObject(mroot);
			var cent = bbox.getCenter(new THREE.Vector3());
			var size = bbox.getSize(new THREE.Vector3());

			//Rescale the object to normalized space
			var maxAxis = Math.max(size.x, size.y, size.z);
			mroot.scale.multiplyScalar(5.0 / maxAxis);
			bbox.setFromObject(mroot);
			bbox.getCenter(cent);
			bbox.getSize(size);
			//Reposition to 0,halfY,0
			mroot.position.copy(cent).multiplyScalar(-1);
			mroot.position.y += (size.y * 0.5);
			mroot.traverse(function (object) {
				if (object.isMesh) {
					object.castShadow = true;
					if (object.material.name == '玻璃') {
						object.material.transparent = true;
						object.material.opacity = 0;
					}
				}
			});
			scene.add(mroot);

		});

		scenes.push(scene);

		renderer = new THREE.WebGLRenderer({
			antialias: true
		});
		renderer.setClearColor(0xffffff, 1);
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.outputEncoding = THREE.sRGBEncoding;
		renderer.shadowMap.enabled = true;

		controls = new OrbitControls(camera, renderer.domElement);
		controls.target.set(0, 2, 0);
		controls.minDistance = 0.5;
		controls.maxDistance = 10;
		controls.maxPolarAngle = 0.5 * Math.PI;
		controls.autoRotate = true;
		scene.userData.controls = controls;

		container.appendChild(renderer.domElement);
	}

	function animate() {

		//render();
		const canvas = renderer.domElement.parentNode.parentNode;
		const width = canvas.clientWidth;
		const height = canvas.clientHeight;
		if (canvas.width !== width || canvas.height !== width) {
			renderer.setSize(width-30, width-30, false);
		}

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

	}