我正在使用three.js与angular创建建筑物。
HTML
<div style="width: 100vw; height:500px; " #sceneContainer></div>
组件
import { Component,ViewChild,ElementRef,AfterViewInit,OnDestroy } from '@angular/core';
import * as THREE from 'three';
import { OrbitControls } from 'three-orbitcontrols-ts';
export class TestComponent implements AfterViewInit,OnDestroy{
@ViewChild('sceneContainer') sceneContainer: ElementRef;
scene: THREE.Scene;
renderer: THREE.WebGLRenderer;
camera: THREE.PerspectiveCamera;
controls: OrbitControls;
// lights
directional: THREE.DirectionalLight;
private m_canvas: HTMLCanvasElement;
option = {
buildingX : 509,
buildingY : 50,
buildingZ : 500,
pliesTotal : 6,
rendererBackground : 0xffffff,
buildingColor : 0x0066ff,
groundColor : 0x00ff66,
roomGroundColor : 0xa0adaf,
elevation : 0,
wallHeight : 20,
wallWidth : 0,
wallColor : 0xa0adaf
}
ngOnDestroy() {
this.controls.dispose();
this.renderer.dispose();
}
ngAfterViewInit() {
this.setup();
}
animate(){
requestAnimationFrame(this.animate.bind(this));
this.controls.update();
this.renderer.render(this.scene, this.camera);
}
setup() {
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true,
//canvas: this.m_canvas
});
this.renderer.setClearColor(0xffffff, 0.1);
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
console.log('offsetWidth',this.sceneContainer.nativeElement.offsetWidth,this.sceneContainer.nativeElement.offsetHeight);
this.renderer.setSize(this.sceneContainer.nativeElement.offsetWidth, this.sceneContainer.nativeElement.offsetHeight);
this.sceneContainer.nativeElement.appendChild(this.renderer.domElement);
this.camera = new THREE.PerspectiveCamera(40, this.sceneContainer.nativeElement.offsetWidth / this.sceneContainer.nativeElement.offsetHeight, 0.5, 10000);
//this.camera.position.z = 5;
this.camera.fov = 60;
this.camera.position.set(0, 0, 300)
//this.camera.lookAt(new THREE.Vector3(0, 0, 0));
// controls
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enabled = true;
this.controls.autoRotate = true
this.controls.maxDistance = 1500;
this.controls.minDistance = 0;
this.controls.autoRotateSpeed = 0.5;
this.controls.autoRotate = false;
// lights
this.directional = new THREE.DirectionalLight(0xFFFFFF, 1);
this.directional.position.set(10, 20, 1);
this.directional.target.position.set(0, 0, 0);
this.scene.add(this.directional);
// ambient
let ambient = new THREE.AmbientLight(0xffffff, 0.1);
this.scene.add(ambient);
this.createScene2();
this.animate();
}
createScene2(){
const groundGeometry = new THREE.BoxGeometry(1000,1,1000);
const groundMaterial = new THREE.MeshLambertMaterial({
color: this.option.groundColor,
transparent : false,
opacity :0.5,
wireframe: false
})
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.position.set(0, - this.option.buildingY/2, 0);
this.scene.add(ground);
for (var i = 0;i < this.option.pliesTotal; i++) {
this.addRoom(i);
}
}
addRoom (n) {
const roomGeometry = new THREE.BoxGeometry(this.option.buildingX,this.option.buildingY,this.option.buildingZ)
const roomMaterial = new THREE.MeshLambertMaterial({
color: this.option.roomGroundColor,
transparent : true,
opacity :0.4,
wireframe: false
})
}
}
我希望看到这样的模型,
当鼠标悬停在建筑物地板上时,我想突出显示地板并在附近显示文本,我该怎么做