vue + threejs 实现场景环境贴图，模型高光显示效果

<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();// modelconst 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 loopcontrols.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 实现场景环境贴图，模型高光显示效果相关推荐

Neo4j ① ＜图论＞图,节点,关系,属性＜知识图谱和图库＞图谱,图库,优势＜基础＞模块,应用场景,环境搭建,浏览器
目录第一部分图和 Neo4j 1.1 图论 1.1.1 图论起源 --- 柯尼斯堡(Konigsberg)七桥问题 1.1.2 图和节点 1.1.3 节点关系表达 1.1.4 属性图模型规则 ...
three.js使用CubeCamera创建反光效果，动态环境贴图实现，立方体全景贴图(vue中使用three.js83)
使用CubeCamera创建反光效果 1.demo效果 2. 实现要点 2.1 创建立方体相机CubeCamera 2.2 使用动态环境贴图材质 2.3 render中更新立方体相机 2.4 创建场景 ...
图的概念与主要类型、图模型的应用场景
前言图(Graph)是一个常见的数据结构,现实世界中有很多任务都可以抽象成图问题,比如社交网络,蛋白体结构,交通路网数据,以及很火的知识图谱等,甚至规则网络结构数据(如图像,视频等)也是图数据的一种 ...
threejs基础下：贴图资源加载与光照
优先更新个人博客,求关注~~ 个人博客:https://jinglecjy.github.io/ 加载器Loaders 加载器是threejs中很重要的一个步骤,可以用于加载纹理/图片/模型/音频等资 ...
vue + threejs实战，实现3D 360度旋转查看物体
一. 官方文档地址:three.js 二. 简介 threejs是JavaScript编写的 WebGL 第三方库,提供了非常多的3D显示功能.它是一款运行在浏览器中的 3D ...
ICLR 2019计算机视觉、NLP、图模型、对抗学习、表示学习和元学习
https://www.toutiao.com/a6703123631590867459/ 原作者:Marina Vinyes 深度学习与NLP编译关键词:Computer Vision, Natu ...
CIKM 2021 | 图模型在广告检索（Ad Retrieval）中的应用
▐ 1. 摘要图模型能够有效的挖掘数据中的关系信息来增强数据表示,在研究和工业领域都被广泛应用.阿里妈妈搜索广告技术团队于2019年开源了工业界首个支持大规模分布式的深度图学习平台Euler(htt ...
【实践】GPU在外卖场景推荐系统精排模型预估中的应用实践
猜你喜欢0.2022年人才市场洞察及薪酬指南 1.[免费下载]2022年1月份热门报告 2.[实践]小红书推荐中台实践 3.微信视频号实时推荐技术架构分享 4.机器学习在B站推荐系统中的应用实践 5. ...
neo4j 图数据库初步调研三元组、属性图、图模型、超图、RDF-f
相关文章 neo4j 图数据库初步调研图数据库与关系型数据库差异 demo项目(python+vue) 本文目录相关文章一.技术关键字二.前言 1.什么是图 2.反规范化三.RDF(资源描述 ...

vue + threejs 实现场景环境贴图，模型高光显示效果

vue + threejs 实现场景环境贴图，模型高光显示效果相关推荐

最新文章

热门文章