<template>
<div>
<div id="threeContained"></div>
</div>
</template>
<script>
import * as THREE from "three"; //引入Threejs
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Stats from "three/examples/jsm/libs/stats.module";
// const OrbitControls = require("three-orbit-controls")(THREE);
export default {
name: "vue-three",
data() {
return {
scene: "",
light: "",
camera: "",
controls: "",
renderer: "",
load:'',
clock:'',
mixer:''
};
},
methods: {
init() {
var that = this;
let container = document.getElementById("threeContained");
// 创建场景
that.scene = new THREE.Scene();
that.scene.background = new THREE.Color(0x8cc7de);
// 创建相机
that.camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
2000
);
// that.camera.position.set( -70, 25, 90 );
// 定位相机,并且指向场景中心
that.camera.position.x = 30;
that.camera.position.y = 30;
that.camera.position.z = 170;
that.camera.lookAt(that.scene.position)
/// 显示三维坐标系
var axes = new THREE.AxesHelper(100)
// 添加坐标系到场景中
that.scene.add(axes);
// 创建地面
// const geometry = new THREE.BoxGeometry();
// const material = new THREE.MeshPhongMaterial({ color: 0xffffff });
// const cube = new THREE.Mesh(geometry, material);
// that.scene.add(cube);
// 创建地面的几何体
var planeGeometry = new THREE.PlaneGeometry(100, 60);
// 给地面物体上色
var planeMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });
// 创建地面
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.material.opacity = 0.6;
plane.material.transparent = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
plane.castShadow = true;
// 接收阴影
plane.receiveShadow = true;
that.scene.add(plane);
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 1, 0);
that.scene.add(hemiLight);
const directionalLight1 = new THREE.DirectionalLight(0xffeeff, 0.8);
directionalLight1.position.set(1, 1, 1);
that.scene.add(directionalLight1);
const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight2.position.set(-1, 0.5, -1);
that.scene.add(directionalLight2);
const ambientLight = new THREE.AmbientLight(0xffffee, 0.25);
that.scene.add(ambientLight);
// stats
that.stats = new Stats();
container.appendChild(that.stats.dom);
// 材质
const normal = new THREE.TextureLoader().load( 'models/shanghai/textures/shanghai.jpg' );
// model
that.loader = new FBXLoader();
that.loader.load("/models/shanghai/model/shanghai.fbx", function (object) {
// that.mixer = new THREE.AnimationMixer( object );
// const action = that.mixer.clipAction( object.animations[ 0 ] );
// action.play();
// object.traverse( function ( child ) {
// if ( child.isMesh ) {
// child.castShadow = true;
// child.receiveShadow = true;
// }
// });
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.specular.setScalar( 0.1 );
child.material.normalMap = normal;
}
} );
console.log(object);
object.scale.set(0.1,0.1,0.1)
// object.scale.set(1,1,1)
that.scene.add(object);
that.animate();
});
// 创建渲染器
that.renderer = new THREE.WebGLRenderer();
that.renderer.setPixelRatio(window.devicePixelRatio);
// 设置渲染器的初始颜色
that.renderer.setClearColor(new THREE.Color(0xeeeeee));
// 设置输出canvas画面的大小
that.renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(that.renderer.domElement);
const controls = new OrbitControls(that.camera, that.renderer.domElement);
controls.target.set(0, 12, 0);
controls.update();
// debugger
// window.addEventListener("onpointerdown", that.selectObject());
window.addEventListener("resize", that.onWindowResize);
},
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
},
animate() {
// requestAnimationFrame(this.animate);
// this.renderer.render(this.scene, this.camera);
// this.stats.update();
requestAnimationFrame( this.animate );
const delta = this.clock.getDelta();
if ( this.mixer ) this.mixer.update( delta );
this.renderer.render( this.scene, this.camera );
this.stats.update();
},
selectObject(event) {
debugger
if (event.button != 0) return;
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, this.camera);
const intersected = raycaster.intersectObjects(
this.scene.children,
false
);
console.log(intersected)
if (intersected.length) {
const found = intersected[0];
const faceIndex = found.faceIndex;
const geometry = found.object.geometry;
console.log(this.load)
// const id = ifcLoader.ifcManager.getExpressId(geometry, faceIndex);
const modelID = found.object.modelID;
// ifcLoader.ifcManager.createSubset( { modelID, ids: [ id ], scene, removePrevious: true, material: highlightMaterial } );
// const props = ifcLoader.ifcManager.getItemProperties(modelID, id, true);
// console.log(props);
// this.renderer.render( this.scene, this.camera );
}
},
},
mounted() {
this.clock = new THREE.Clock();
this.init();
this.animate();
window.onpointerdown = this.selectObject;
},
};
</script>
<style scoped>
html,
body {
height: 100%;
}
/* #container {
width: 100%;
margin: 0 auto;
height: 1000px;
overflow: hidden;
} */
</style>
//3d文件路径要放在public文件夹下
three.js在Vue项目中加载fbx模型文件
于 2024-08-26 11:49:50 首次发布