<template>
<div>
<div id="three"></div>
</div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
export default {
data() {
return {
scene: {}, // 场景
camera: {}, // 摄像机
renderer: {}, // 渲染器
parts: [], // 几何图形储存器
mixer: null, // 动画
clock: {}
};
},
mounted(){
this.threes();
this.resize(); // 自适应
this.mousedown(); // 鼠标点击事件
this.mod();
},
methods: {
// 浏览器窗口发生变化时 自适应
resize(){
window.addEventListener('resize', () => {
// 初始化摄像机
this.camera.aspect = window.innerWidth/window.innerHeight;
// 摄像机矩阵效果
this.camera.updateProjectionMatrix();
// 初始化渲染器
this.renderer.setSize(window.innerWidth, window.innerHeight);
})
},
threes() {
// 创建场景
this.scene = new THREE.Scene();
// 创建摄像机 // 参数含义: 视角、窗口投影长宽比、摄像机从哪里开始渲染、距离摄像机多远截至渲染
this.camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建three渲染器 参数: 去锯齿
this.renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置渲染器场景背景颜色
this.renderer.setClearColor(0x000000, .2)
// 开启阴影，加上阴影渲染
this.renderer.shadowMapEnabled = true;
// 设置渲染器场景大小 参数: 宽,高
this.renderer.setSize(window.innerWidth, window.innerHeight);
// 把渲染器添加到页面中
document.getElementById('three').appendChild(this.renderer.domElement);
this.plane() // 平面模型
this.wall({x: 500, y: 60, z: 10}, {x: 0, y: 30, z: -145}) // 外墙壁 1
this.wall({x: 500, y: 60, z: 10}, {x: 0, y: 30, z: 145}) // 外墙壁 2
this.wall({x: 10, y: 60, z: 300}, {x: 250, y: 30, z: 0}) // 外墙壁 3
this.wall({x: 10, y: 60, z: 300}, {x: -250, y: 30, z: 0}) // 外墙壁 4
this.wall({x: 10, y: 60, z: 120}, {x: 160, y: 30, z: -80}) // 内墙壁 5
this.wall({x: 90, y: 60, z: 10}, {x: 200, y: 30, z: -20}) // 内墙壁 6
for(let i = 0; i < 4; i ++){
// this.chartlet(-220, 30, (-100 + i * 41)) // 横排
this.chartlet((-220 + i * 35), 30, -100) // 纵排
this.chartlet((-220 + i * 35), 30, -55) // 纵排
this.chartlet((-220 + i * 35), 30, 100) // 纵排
this.chartlet((-220 + i * 35), 30, 55) // 纵排
}
this.vavAair(100,50,135)
// 将网格对象添加到场景中
this.parts.forEach(item => {
this.scene.add(item);
});
// 创建光源
this.createLight()
// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
this.axesHelper = new THREE.AxesHelper(500);
// 将坐标系添加到场景中
this.scene.add(this.axesHelper);
// 摄像机空间轴位置
this.camera.position.z = 300
this.camera.position.y = 350
this.camera.position.x = 100
// 创建鼠标控件对象
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.animate()
},
// 添加帧渲染
animate(){
let that = this
requestAnimationFrame(this.animate);
// 网格对象自动旋转
// this.cube.rotation.x += 0.005
// this.cube.rotation.y += 0.005
if (this.mixer !== null){
that.mixer.update(that.clock.getDelta());
}
// 初始化controls
this.controls.update()
this.render()
},
// 渲染器渲染场景和摄像机
render(){
this.renderer.render(this.scene, this.camera)
},
// 创建光源
createLight () {
// 环境光
const ambint = new THREE.AmbientLight(0xffffff)
this.scene.add(ambint)
// 聚光灯光源
this.spotLight(0x03FF6A, 245, 60, 140, 600)
this.spotLight(0xff0000, -245, 60, 140, 500)
// this.pointLight(0xffffff, 0, 900, 0, 1000)
this.pointLight(0x0070ee, 205, 100, -80, 130)
},
// 聚光灯光源
spotLight (color, x, y, z, dis) {
const spotLight = new THREE.SpotLight(color)
spotLight.position.set(x, y, z); // 光源位置
spotLight.castShadow = true; //开启灯光投射阴影
spotLight.intensity = 3 // 强度
spotLight.angle = 0.3; // 角度
spotLight.penumbra = 1; // 半影
spotLight.decay = 1; // 衰退
spotLight.distance = dis; // 距离
this.scene.add(spotLight)
// 辅助线
// let spotLightHelper = new THREE.SpotLightHelper(spotLight, 0x976fb6);
// this.scene.add(spotLightHelper)
// 光源寄托
this.createLightView(color, x, y, z)
},
// 点光灯光源
pointLight (color, x, y, z, dis) {
const pointLight = new THREE.PointLight(color)
pointLight.position.set(x, y, z); // 光源位置
pointLight.castShadow = true; //开启灯光投射阴影
pointLight.intensity = 4 // 强度
// pointLight.angle = 0.3; // 角度
pointLight.penumbra = 1; // 半影
// pointLight.decay = 1; // 衰退
pointLight.distance = dis; // 距离
this.scene.add(pointLight)
// 辅助线
// let spotLightHelper = new THREE.SpotLightHelper(pointLight, 0x976fb6);
// this.scene.add(spotLightHelper)
// 光源寄托
this.createLightView(color, x, y, z)
},
// 光源寄托
createLightView(color, x, y, z){
let geometry = new THREE.SphereGeometry(3, 3, 3);
let material = new THREE.MeshPhongMaterial({ color });
let cube = new THREE.Mesh(geometry, material);
cube.position.set(x, y, z)
this.scene.add(cube)
},
// 平面模型
plane(){
let geometry = new THREE.PlaneGeometry(640, 400, 1, 1);
let material = new THREE.MeshPhongMaterial({ color: 0xE5E5E5, wireframe: false });
let cube = new THREE.Mesh(geometry, material);
cube.rotation.x = -0.5 * Math.PI
cube.position.set(0, 0, 0)
cube.receiveShadow = true
this.parts.push(cube)
},
// 墙壁
wall(size, position){
let texture = new THREE.TextureLoader().load(require('@/assets/three/tile.jpg'));
texture.anisotropy = 4
let data = {
map: texture,
// color: 0x07313F,
transparent: true,
opacity: 1
}
let geometry = new THREE.BoxGeometry(size.x, size.y,size.z);
let material = new THREE.MeshLambertMaterial(data);
let cube = new THREE.Mesh(geometry, material);
cube.position.set(position.x, position.y, position.z)
this.scene.add(cube);
},
// 机柜
chartlet(x, y, z){
let map = new THREE.TextureLoader().load(require('@/assets/three/jigui.jpg'));
let group = new THREE.Mesh();
let mats = [];
mats.push(new THREE.MeshPhongMaterial({ map }));
mats.push(new THREE.MeshPhongMaterial({
color: 0x3C3B42
}));
mats.push(new THREE.MeshPhongMaterial({
color: 0x3C3B42
}));
mats.push(new THREE.MeshPhongMaterial({
color: 0x3C3B42
}));
mats.push(new THREE.MeshPhongMaterial({
color: 0x3C3B42
}));
mats.push(new THREE.MeshPhongMaterial({
color: 0x3C3B42
}));
let cubeGeom = new THREE.BoxBufferGeometry(15, 50, 30);
let cube = new THREE.Mesh(cubeGeom, mats);
cube.position.set(x, y, z)
group.add(cube);
this.scene.add(group)
},
// 空调
vavAair(x, y, z){
let map = new THREE.TextureLoader().load(require('@/assets/three/kt.png'));
let group = new THREE.Mesh();
let mats = [];
mats.push(new THREE.MeshPhongMaterial({ color: 0xffffff }));
mats.push(new THREE.MeshPhongMaterial({
color: 0xffffff
}));
mats.push(new THREE.MeshPhongMaterial({
color: 0xffffff
}));
mats.push(new THREE.MeshPhongMaterial({
color: 0xffffff
}));
mats.push(new THREE.MeshPhongMaterial({
color: 0xffffff
}));
mats.push(new THREE.MeshPhongMaterial({
map
}));
let cubeGeom = new THREE.BoxBufferGeometry(40, 15, 15);
let cube = new THREE.Mesh(cubeGeom, mats);
cube.position.set(x, y, z)
group.add(cube);
this.scene.add(group)
},
// 鼠标点击事件
mousedown(){
let raycaster = new THREE.Raycaster(); //光线投射，用于确定鼠标点击位置
let mouse1 = new THREE.Vector2()
let mouse2 = new THREE.Vector2()
let top = 69
window.addEventListener("pointerdown", (event) => {
mouse1.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse1.y = - ( (event.clientY - top) / window.innerHeight ) * 2 + 1;
});
window.addEventListener("pointerup", (event) => {
mouse2.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2.y = - ( (event.clientY - top) / window.innerHeight ) * 2 + 1;
if(mouse1.x === mouse2.x && mouse1.y === mouse2.y){
//以camera为z坐标，确定所点击物体的3D空间位置
raycaster.setFromCamera(mouse1, this.camera);
//确定所点击位置上的物体数量
let intersects = raycaster.intersectObjects(this.scene.children);
//选中后进行的操作
if(intersects.length){
console.log(intersects)
// intersects[0].object.material.color.set( 0xff0000 );
}
}
});
},
// 引入模型 人物
mod(){
let that = this
let loader = new FBXLoader()
loader.load('three/SambaDancing.fbx', function(obj){
obj.scale.set(.35, .35, .35); // 放大缩小
obj.position.set(205, 0, -80); // 位置
obj.rotation.y += 1.55; // 旋转
that.scene.add(obj)
that.clock = new THREE.Clock()
// obj作为参数创建一个混合器，解析播放obj及其子对象包含的动画数据
that.mixer = new THREE.AnimationMixer(obj);
let animationAction = that.mixer.clipAction(obj.animations[0]);
// animationAction.timeScale = 1; //默认1，可以调节播放速度
// animationAction.loop = THREE.LoopOnce; //不循环播放
// animationAction.clampWhenFinished=true;//暂停在最后一帧播放的状态
animationAction.play(); //播放动画
}, undefined, function ( error ) {
console.error( error );
});
},
}
};
</script>
<style scoped>
body {
margin: 0;
padding: 0;
background-color: #000;
color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 0;
box-sizing: border-box;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 1; /* TODO Solve this in HTML */
}
</style>
网友评论