vue + threejs 给3D模型添加label标签（dom的方式）

webGL.js封装的代码。

const THREE = window.THREE;
// webGL对象配置
export const webglOBJ = {renderDom: null,Scene: null, // 场景 camera: null, // 摄像头renderer: null, // 渲染器senceAdd (objList = []) {objList.forEach(v => {webglOBJ.Scene.add(v);});},// 创建场景createSence (renderDom) {this.renderDom = renderDom;webglOBJ.Scene = new THREE.Scene();return webglOBJ.Scene;},// 创建摄像机createCamera ({innerWidth, innerHeight, position} = {}) {const { width, height } = this.renderDom.getBoundingClientRect();let camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);camera.position.x = -50;camera.position.y = 30;camera.position.z = 50;camera.lookAt(webglOBJ.Scene.position); // 视角webglOBJ.camera = camera; // 视角return webglOBJ.camera;},createRenderer () {let renderer = new THREE.WebGLRenderer();const {width, height} = this.renderDom.getBoundingClientRect();renderer.setSize(width, height);renderer.setClearColor(new THREE.Color(0xcccccc));renderer.shadowMap.enabled = true;this.renderDom.appendChild(renderer.domElement);webglOBJ.renderer = renderer;return webglOBJ.renderer;},createPlane (textureLoaderUrl, textureNormalUrl) {let planeGeometry = new THREE.PlaneGeometry(60, 60, 1, 1); // 平面网格let textureLoader = new THREE.TextureLoader();let texture = textureLoader.load(textureLoaderUrl);let textureNormal = textureLoader.load(textureNormalUrl);// 加载高光贴图let planeMaterial = new THREE.MeshPhongMaterial({// specular: 0xff0000,//高光部分的颜色shininess: 30, //高光部分的亮度，默认30map: texture, // 普通纹理贴图roughness: 0.3,lightMap: textureNormal,// normalMap: textureNormal, //法线贴图bumpScale: 3}); // 材质对象Material// let planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});let plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.name = '平面物体ID=' + 1;plane.position.y = 0;plane.position.z = 0;plane.receiveShadow = true;return plane;},createBoxGeometry (textureLoaderUrl, {x, y, z}) {// 创建立方体let textureLoader = new THREE.TextureLoader();let textureNormal = textureLoader.load(textureLoaderUrl);let boxGeometry = new THREE.BoxGeometry(10, 10, 10, 200);let texture1 = textureLoader.load(textureLoaderUrl);let boxGeometryMaterial = new THREE.MeshLambertMaterial({// specular: 0xff0000,//高光部分的颜色shininess: 10, //高光部分的亮度，默认30normalScale: new THREE.Vector2(2.2, 2.2),map: texture1, // 普通纹理贴图normalMap: textureNormal, //法线贴图bumpMap: textureNormal,bumpScale: 0.3});let box = new THREE.Mesh(boxGeometry, boxGeometryMaterial);box.name = '正方物体ID=' + 2;box.position.x = x;box.position.y = y;box.position.z = z;box.castShadow = true;return box;},// 点光源createSpotLight () {// 点光源let spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-60, 40, -20);spotLight.castShadow = true;return spotLight;},// 平行光createDirectionalLight (target) {// 平行光let directionalLight = new THREE.DirectionalLight(0xffffff, 1);// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算directionalLight.position.set(-90, 80, -20);// 方向光指向对象网格模型mesh2，可以不设置，默认的位置是0,0,0// directionalLight.target = target;return directionalLight;},// 环境光createAmbient (color = 0x444444) {let ambient = new THREE.AmbientLight(color);// ambient.castShadow = true;return ambient;},createDatGui () {let gui = {bump: 0.03,animation: false,};let datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.add(gui, "bump", -1, 1).onChange(function (e) {box.material.bumpScale = e;});datGui.add(gui, "animation");return datGui;},// 创建控制轴createControls () {let controls = new THREE.OrbitControls(webglOBJ.camera, webglOBJ.renderDom);return controls;},// 创建帮助createAxisHelper () {let axisHelper = new THREE.AxisHelper(250);return axisHelper;},// 初始化webGL对象webglRender (Scene, camera) {webglOBJ.renderer.render(Scene, camera);window.requestAnimationFrame(webglOBJ.webglRender);}
};/*** 添加标签：dom方式* @param {*} targePosition ：需要传递当前标签的位置* @param {*} targetId ：标签对应的dom的唯一ID，暂且用时间戳代替，避免重复* @param {*} innerHTML ：标签对应html*/
export function labelTag (camera, targePosition, targetId, innerHTML, webGLdom) {const { width, height } = webGLdom.getBoundingClientRect();let worldVector = new THREE.Vector3(targePosition.x, targePosition.y, targePosition.z);let vector = worldVector.project(camera);let halfWidth = width / 2,halfHeight = height / 2;let x = Math.round(vector.x * halfWidth + halfWidth);let y = Math.round(-vector.y * halfHeight + halfHeight);/*** 更新立方体元素位置*/let div = document.getElementById(targetId);div.style.left = x + 'px';div.style.top = y + 'px';// div.innerHTML = `uuid:${innerHTML.uuid}`;
}

vue中引用：

<template>
<div><div class="three-box_wrapper"></div><div :id="`sign${idx + 1}`" style="position: absolute;" v-for="(v, idx) in labels" :key="idx"><div class="sign" :uuid="v.uuid"><div class="name">我是标签1</div><div class="data">数据： {{v.uuid}}</div></div></div>
</div>
</template><script>
import {webglOBJ, labelTag} from '@/utils/webGL/webGL.js';
export default {name: 'threeBox',data () {return {labels: []};},mounted () {this.int();},methods: {createLabel () {},int () {const imgBG = require('./img.jpg');const webGLdom = document.querySelector('.three-box_wrapper');const sence = webglOBJ.createSence(webGLdom);const camera = webglOBJ.createCamera();const renderer = webglOBJ.createRenderer();const plane = webglOBJ.createPlane(imgBG, imgBG);const boxGeometry = webglOBJ.createBoxGeometry(imgBG, {x: 10, y: 5, z: 10});const boxGeometry1 = webglOBJ.createBoxGeometry(imgBG, {x: -10, y: 5, z: 10});const spotLight = webglOBJ.createSpotLight();const directionalLight = webglOBJ.createDirectionalLight(boxGeometry);const ambient = webglOBJ.createAmbient();const datGui = webglOBJ.createDatGui();const controls = webglOBJ.createControls();const axisHelper = webglOBJ.createAxisHelper();// 将对象添加到场景中去webglOBJ.senceAdd([plane, boxGeometry, boxGeometry1, spotLight, directionalLight, ambient, datGui, controls, axisHelper]);// webglOBJ.webglRender(sence, camera, renderer);console.log(sence, 'sence');const vm = this;function render(html) {vm.labels = sence.children.filter(v => v.type == 'Mesh');vm.$nextTick(() => {sence.children.forEach((val, idx) => {if (val.type == 'Mesh') {const {x, y, z} = val.position;labelTag(camera, {x,  y, z}, `sign${idx + 1}`, val, webGLdom);}});});renderer.render(sence, camera);requestAnimationFrame(render);};render();// 监听点击事件查看点击的元素let raycaster = new THREE.Raycaster();let mouse = new THREE.Vector2();// 点击了哪个模型function clickEvent() {if (event.target.tagName == 'CANVAS') {mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;sence.updateMatrixWorld(true);// 通过鼠标点的位置和当前相机的矩阵计算出raycasterraycaster.setFromCamera(mouse, camera);// 获取raycaster直线和所有模型相交的数组集合let intersects = raycaster.intersectObjects(sence.children, true);if (intersects[0]) {console.log(intersects[0]);}}}window.addEventListener('click', clickEvent, false);}}
};
</script><style lang="scss" scoped>.three-box_wrapper {position: relative;width: 100%;height: 800px;border: 1px solid #ccc;}div[id *= "sign"] {width: 250px;height: 100px;background: rgba(0, 0, 0, .65);.sign{div {color: #fff;text-align: left;padding: 0 5px;}}}
</style>

vue + threejs 给3D模型添加label标签（dom的方式）相关推荐

基于ThreeJS为3D模型添加贴图
基于ThreeJS为3D模型添加贴图示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在三维立体构件六个面上添加贴图示例效果展示实现方式添加贴图:在模型的多个 ...
基于ThreeJS实现3D模型上的室内灯光效果模拟
基于ThreeJS实现3D模型上的室内灯光效果模拟示例描述与操作指南示例效果展示实现步骤示例描述与操作指南当前示例用于展示室内灯光的多角度光影效果. 示例效果展示实现步骤第一步创建聚光 ...
Cadence Allegro PCB设计88问解析(九) 之 Allegro中封装(footprint)3D模型添加
一个学习信号完整性的layout工程师今天整理下PCB封装的3D 模型添加,此步骤并不是所有的公司使用,因为我们平常给器件添加一个实际的高度,就已经OK了.只不过我们在看整版的3D模型是,每个器件都 ...
vue中展示3D模型 -- vue-3d-model
一.搜集到的网址 3D模型库 three.js WebGL babylonJS ThingJS EverAPI 3D数据可视化库 echarts - 基于Canvas Highcharts -基于SV ...
科普篇：3D模型展示的2种主要方式
随着数字化改造与产业升级的必要性需求增多,3D技术逐渐进入大家的视野,但是大多数人对3D展示的核心方式不太熟悉,认为只要视觉上看起来像那么回事就对了. 抛开伪3D的全景缩略图.全景视频等形式不说,就说 ...
vue + threejs 实现3d装车
安装 npm install threejs -D 引用threejs import * as THREE from 'three' // 鼠标控制器 import { OrbitControls } ...
threejs制作3d模型展示网页
1.在建模软件中制作好模型与贴图导出obj 或 fbx 均可 2.打开浏览器输入https://threejs.org/editor/ 进入threejs官网提供的网络编辑器将模型拖入视图中 3. ...
unity 3d模型添加Onclick事件
1.给camera添加下方的 EventUtil 的脚本 EventUtil 代码: using System.Collections; using System.Collections.Generi ...
PCB如何添加3D模型
我们在布线完PCB后,可以通过按下键盘的数字"3"来查看自己的板子3D模式下的样子,然后我们可以将一些元器件的3D模型添加上去,看一下板子焊接上元器件是什么样子. 所以我们可以手动 ...

vue + threejs 给3D模型添加label标签（dom的方式）

vue + threejs 给3D模型添加label标签（dom的方式）相关推荐

最新文章

热门文章