threejs 科技地图项目demo

xiefandaren · 2023-1-27 15:33:33

第一节课b站免费看

效果预览

https://www.xiefansq.cn/threejsP/2023/1/27/

完整源码需要购买邀请码，注册才可以下载：点击购买

解压密码：https://www.xiefansq.cn/

游客，如果您要查看本帖隐藏内容请回复

源码预览

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图科技项目</title>
<style>
body {
margin: 0;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
#jindu {
margin: 0;
}
.box {
width: 500px;
height: 20px;
border: 1px solid #979797;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -1px;
}
.load {
width: var(--loadWidth);
height: 20px;
background: #ffffff;
}
.tex {
color: aliceblue;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: 23px;
}
.boxBackground {
/* border-width: 10px; */
/* border:4px solid rgb(255, 0, 0); */
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000;
position: absolute;
font-size: 0;
}
#load {
position: absolute;
top: 10%;
left: 10%;
color: white;
}
#videoC{
/* width: 30%;
height: 30%; */
/* background: #da0d0d; */
position: absolute;
}
</style>
<script src="./plugin/vue.global.js"></script>
</head>
<body>
<script type="text/javascript" src="./build/three.js"></script>
<script type="text/javascript" src="./plugin/GLTFLoader.js"></script>
<script type="text/javascript" src="./plugin/DRACOLoader.js"></script>
<script type="text/javascript" src="./plugin/OrbitControls.js"></script>
<script src="./plugin/vue.global.js"></script>
<div id="jindu">
<template v-if="display">
<p class="boxBackground"></p>
<div class="box">
<div :style="changeLoad" class="load">
</div>
</div>
<div class="tex">
<p>科技地图加载当中</p>
</div>
</template>
</div>
<canvas id="videoC" style="height: 100%;width: 100%;pointer-events:none;" ></canvas>
<!-- <canvas style="height: 100%;width: 100%;background-color: #979797;position: absolute;"></canvas>
<video id="videoC" src="./img/video/大健康贴片.mp4" controls ></video>
<script>
let video = document.createElement("video")
video.src = "./img/video/大健康贴片.mp4"
video.loop = true
video.muted = true
video.play();
let canvasHua=document.getElementsByTagName('canvas')
console.log(canvasHua);
</script> -->
<script type="module">
// import { GUI } from './examples/jsm/libs/lil-gui.module.min.js';
let num = 0; let body_main = null;
var system = {};
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
const UIdata = {//配置对象的属性方法
data: function () {
return {
start: 0,
jindu: 0,
display: true
}
},
computed: {
changeLoad() {
return '--loadWidth:${this.jindu};'
}
},
methods: {
}
}
var UiJinDuApp = Vue.createApp(UIdata).mount('#jindu')
// console.log(p);
// vue APP架构、、、
const manager = new THREE.LoadingManager();//定义加载跟踪容器
manager.onStart = function (url, itemsLoaded, itemsTotal) {
};
manager.onProgress = function (url, itemsLoaded, itemsTotal) {
};
manager.onError = function (url) {
};
manager.onLoad = function () {
console.log('加载成功');
UiJinDuApp.display = false
dracoLoader.dispose();
};
//onload加载检测器成功的时候会执行下面操作
/**
* 创建场景对象Scene
* Scene包含三维模型和光源
*/
const dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath('./plugin/draco/');
dracoLoader.setDecoderConfig({ type: 'js' });
dracoLoader.setPath('glb/');
var scene = new THREE.Scene();
var loader = new THREE.GLTFLoader(manager); //创建一个GLTF加载器
const renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding//srg颜色
renderer.sortObjects=false//定义渲染器是否应对对象进行排序。默认是true. 不再透明度排序，从而修补透明度显示bug
// renderer.toneMappingExposure = 1
// renderer.antialias = true//开启抗锯齿
document.body.appendChild(renderer.domElement);
// renderer.canvas=canvas1
// canvas.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
loader.setPath('glb/');
loader.setDRACOLoader(dracoLoader);
function addVideoPlane(obj,src,num,sizea,sizeb,loopA,rota){
let video = document.createElement("video")
video.src = src
video.loop = loopA
video.muted = true
video.play();
// let size=50
let videoTexture = new THREE.VideoTexture(video)
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
// map:videoTexture,
alphaMap: videoTexture,
side: THREE.DoubleSide,
transparent: true,
opacity: 1,
blending: THREE.AdditiveBlending,
flatShading:true,
depthTest : false
});
const plane = new THREE.Mesh(obj, material);
// plane.rotation.x = 90 / 180 * Math.PI;
function planeRotation() {
if(plane){
plane.rotation.z -= num;
}
requestAnimationFrame(planeRotation);
}
if(rota){
planeRotation()
}
return plane
}
// 加载环境贴图
//加载进度检测模块
let biaoji=null
// 加载glTF资源
loader.load(
// resource URL
'地图1.glb',
function (gltf) {
scene.add(gltf.scene);
body_main = gltf.scene;
function findMesh(name) {
var obj = gltf.scene.getObjectByName(name)
// console.log("抓取到了主体+"+obj.name)
return (obj)
}
// scene.add( addPlane('./img/video/贴片 1.mp4',0.002,45,45,false,true))
gltf.scene.traverse(function (child) {
if(child.name=='标记'){
biaoji=child
biaoji.rotation.y=0.3
}
if(child.name=='2'){
// console.log(child);
let material1 = addVideoPlane(child.geometry, './img/贴图/地图工程.mp4', 0.002, 45, 45, true, true).material
material1.opacity=0.1
material1.alphaMap.wrapS = THREE.RepeatWrapping;
material1.alphaMap.wrapT = THREE.RepeatWrapping;
material1.alphaMap.repeat.set(0.3,0.2);
child.material = material1
}
if(child.name=='标记_2'){
// console.log(child.material.name);
let material1= addVideoPlane(child.geometry,'./img/贴图/标记贴图.mp4',0.002,45,45,true,true).material
material1.color=new THREE.Color( 0xffe100 );
child.material=material1
// const videoPlane = new THREE.BoxGeometry( 100, 100, 100 );
// const plane = new THREE.Mesh(videoPlane, material1);
// scene.add(plane)
}
if(child.name=='标记_1'){
// console.log(child);
let material1= addVideoPlane(child.geometry,'./img/贴图/标记贴图.mp4',0.002,45,45,true,true).material
material1.color=new THREE.Color( 0xffe100 );
child.material=material1
}
if(child.name=='牌子'){
// console.log(child);
let material1= addVideoPlane(child.geometry,'./img/贴图/标签.mp4',0.002,45,45,true,true).material
material1.color=new THREE.Color( 0xffe100 );
child.material=material1
}
})
// changeMaterial.a=findMesh('工业处理身体')
},
function (xhr) {
// console.log( ( xhr.loaded / xhr.total * 100 ) + '% 加载进度' );
UiJinDuApp.jindu = xhr.loaded / xhr.total * 500;
console.log(UiJinDuApp.jindu);
//给宽度增加
},
);
//添加视频贴片
function addPlane(src,num,sizea,sizeb,loopA,rota){
let video = document.createElement("video")
video.src = src
video.loop = loopA
video.muted = true
video.play();
// let size=50
let videoTexture = new THREE.VideoTexture(video)
const videoPlane = new THREE.PlaneGeometry(sizea, sizeb);
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
// map:videoTexture,
alphaMap: videoTexture,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.95,
blending: THREE.AdditiveBlending,
flatShading:true,
depthTest : false
});
const plane = new THREE.Mesh(videoPlane, material);
plane.rotation.x = 90 / 180 * Math.PI;
function planeRotation() {
if(plane){
plane.rotation.z -= num;
}
requestAnimationFrame(planeRotation);
}
if(rota){
planeRotation()
}
return plane
}
// scene.add( addPlane('./img/video/贴片 1.mp4',0.002,45,45,false,true))
// let plane1=addPlane('./img/video/贴片2.mp4',-0.001,55,55,false,true)
// // let plane3=addPlane('./img/video/大健康贴片.mp4',-0.001,192,108,false,false)
// plane1.position.y=-2
// scene.add( plane1 )
// plane3.rotation.x = 180/ 180 * Math.PI;
// plane3.rotation.z = 180/ 180 * Math.PI;
// plane3.rotation.y = 180/ 180 * Math.PI;
// scene.add( plane3 )
var texLoader = new THREE.TextureLoader(manager)
var format = '.jpg';
const glassTexPath = "./img/";
function addMaterial(nam) {
const tex = texLoader.load(glassTexPath + nam + format);
tex.flipY = false
tex.encoding = THREE.sRGBEncoding;
return (tex)
}
var titleHDR = addMaterial("公共hdr1");
titleHDR.encoding = THREE.sRGBEncoding;
titleHDR.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图
scene.environment = titleHDR
scene.background = addMaterial("背景2");
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 2, 10000);
camera.position.set(318, 784, 934)
// function lookCamera(){
// plane3.lookAt(camera.position)
// requestAnimationFrame(lookCamera);
// }
// lookCamera()
// document.addEventListener( 'mousemove', renderCamera );
function renderCamera() {
console.log("相机x+" + camera.position.x + "+相机y" + camera.position.y + "+相机z+" + camera.position.y)
}
// camera.lookAt(new THREE.Vector3(0, 0, 0));
var controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.target = new THREE.Vector3(0, 20, 0)
function animate() {
if (body_main) {
body_main.rotation.y += 0.001;
}
if(biaoji){
biaoji.rotation.y -= 0.001;
}
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
<script type="module">
var scene = new THREE.Scene();
function renderSet() {
let canvas1 =document.getElementById("videoC")
const renderer = new THREE.WebGLRenderer({ antialias: true,canvas:canvas1,alpha:true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding//srg颜色
renderer.sortObjects = false//定义渲染器是否应对对象进行排序。默认是true. 不再透明度排序，从而修补透明度显示bug
return renderer
}
const camera1 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 2, 10000);
camera1.position.set(0, 5, 120)
function addPlane(src, num, sizea, sizeb, loopA, rota) {
let video = document.createElement("video")
video.src = src
video.loop = loopA
video.muted = true
video.play();
// let size=50
let videoTexture = new THREE.VideoTexture(video)
const videoPlane = new THREE.PlaneGeometry(sizea, sizeb);
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
// map:videoTexture,
alphaMap: videoTexture,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.95,
blending: THREE.AdditiveBlending,
flatShading: true,
depthTest: false
});
const plane = new THREE.Mesh(videoPlane, material);
function planeRotation() {
if (plane) {
plane.rotation.z -= num;
}
requestAnimationFrame(planeRotation);
}
if (rota) {
planeRotation()
}
return plane
}
let render1 = renderSet()
function onWindowResize() {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
render1.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
camera1.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera1.updateProjectionMatrix();
}
window.addEventListener('resize', onWindowResize);
let plane1 = addPlane('./img/贴图/ui.mp4', 0, 192, 108, true, false)
plane1.rotation.x = 0 / 180 * Math.PI;
function addMaterial(nam) {
var texLoader = new THREE.TextureLoader()
var format = '.jpg';
const glassTexPath1 = "./img/";
const tex = texLoader.load(glassTexPath1 + nam + format);
tex.flipY = false
tex.encoding = THREE.sRGBEncoding;
return (tex)
}
var titleHDR = addMaterial("公共hdr1");
titleHDR.encoding = THREE.sRGBEncoding;
titleHDR.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图
scene.environment = titleHDR
// scene.background = addMaterial("背景2");
scene.add(plane1)
// const geometry = new THREE.BoxGeometry(10, 10, 10);
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// const cube = new THREE.Mesh(geometry, material);
// scene.add(cube);
function animate() {
requestAnimationFrame(animate);
render1.render(scene, camera1);
}
animate();
// console.log(plane);
</script>
</body>
</html>

复制代码

ceshi · 2023-1-27 18:23:30

可以大幅度上升到三大风

liao5202pm · 2023-2-7 22:57:14

呵呵2023 · 2023-3-13 06:20:21

撒旦撒接电话撒娇肯定会尽快撒

gy150007221918 · 2023-6-2 17:15:01

33333333333333

shenchen2002 · 2023-6-30 13:23:07

学习一下感谢老师分享

文字o墨竹 · 2023-8-23 11:25:14

好好学习，天天向上