<template>
<div class="modelsBox">
<div class="modelsBox_wrapper"></div>
<div class="opara-pannel">
<div>
</div>
<div>
三维坐标点信息
<!-- <p>{{point3d}}</p> -->
</div>
</div>
</div>
</template>
<script>
// import * as THREE from 'three';
import { PMREMGenerator } from 'three';
import { webglOBJ, labelTag, getPointRay, getFitScaleValue, deepCopyObject } from '@/utils/webGL/webGL.js';
import * as THREE from 'three';
import { OrbitControls } from './threeUtils/controls/OrbitControls.js';
import { GLTFLoader } from './threeUtils/loaders/GLTFLoader.js';
import { RGBELoader } from './threeUtils/loaders/RGBELoader.js';
export default {
name: 'modelsBox',
data () {
return {
zoom: 1,
target: '',
sence: null,
camera: '',
renderer: '',
obj: {
sence: '',
camera: ''
},
labels: [
{ x: 381.0111567102036, y: 41.66598867957452, z: -248.63694417317873 },
{ x: 383.39332161333544, y: 41.37982005491592, z: -380.9167972387805 },
{ x: 384.19846417704997, y: 41.50664881726524, z: -466.0620455548741 }
]
};
},
beforeDestroy () {
document.removeEventListener('click', this.get3D);
},
mounted () {
// this.int();
this.pageInt();
},
methods: {
pageInt () {
let camera, scene, renderer;
init();
render();
function init () {
const container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
camera.position.set(- 1.8, 0.6, 2.7);
scene = new THREE.Scene();
new RGBELoader().load('https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr', function (texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
render();
// model
const loader = new GLTFLoader();
loader.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function (gltf) {
gltf.scene.scale.x = 0.5;
gltf.scene.scale.y = 0.5;
gltf.scene.scale.z = 0.5;
scene.add(gltf.scene);
render();
});
});
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set(0, 0, - 0.2);
controls.update();
window.addEventListener('resize', onWindowResize);
}
function onWindowResize () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render () {
renderer.render(scene, camera);
}
}
}
};
</script>
<style lang="scss" scoped>
.modelsBox_wrapper {
position: relative;
width: 100%;
height: 100vh;
border: 1px solid #ccc;
overflow: hidden;
}
.opara-pannel {
position: absolute;
right: 15px;
top: 100px;
width: 200px;
height: 400px;
background: rgba(0, 0, 0, 0.7);
div,
p {
color: #fff;
}
}
.modelsBox {
position: relative;
overflow: hidden;
}
div[id*="sign"] {
width: 250px;
height: 100px;
padding: 10px 10px 10px 70px;
background: rgba(0, 0, 0, 0.65);
background: url("~assets/label-bg.png") center center no-repeat;
.sign {
div {
color: #fff;
text-align: left;
padding: 0 5px;
}
}
}
</style>
vue + threejs 实现场景环境贴图,模型高光显示效果
于 2022-05-19 14:44:40 首次发布