three加载hdr实现房间720度全景及虚拟电脑桌效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：three加载hdr实现房间720度全景及虚拟电脑桌效果代码，电脑屏幕可显示你的本机电脑桌面。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  



</head>


      <script type="module">

import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js";
import { OrbitControls } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from '//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/loaders/RGBELoader.js';
import { Geometry } from '//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/deprecated/Geometry.js';
import { RoundedBoxGeometry } from '//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/geometries/RoundedBoxGeometry.js';




class ScreenCaptureApp {

	constructor() {

		this.captureStarted = false;


		this.initThree();
	}

	initThree() {

		this.scene = new THREE.Scene();
		this.renderer = new THREE.WebGLRenderer({antialias:true});
		this.camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 0.1, 100);
		this.renderer.setPixelRatio(window.devicePixelRatio);
		this.renderer.setSize(innerWidth, innerHeight);
		Object.assign(this.renderer.domElement.style, {
			position:'fixed',
			top:0,
			left:0
		});
		this.camera.position.set(0,1,2);
		this.camera.lookAt(new THREE.Vector3());
		this.renderer.setClearColor(0x8000ff);

		this.sceneRoot = new THREE.Object3D();
		this.scene.add(this.sceneRoot);
		this.sceneRoot.rotation.y = -30/57;



		// this.scene.add(new THREE.GridHelper(10,10));
		this.makeMonitor();
		this.makeTable();
		this.makeMouse();
		this.makeKeyboard();
		this.controls = new OrbitControls(this.camera, this.renderer.domElement);
		document.body.appendChild(this.renderer.domElement);
		this.renderer.setAnimationLoop(e=>this.update(e));
		this.initHDR();
		this.pointer = new THREE.Vector2();
		this.raycaster = new THREE.Raycaster();
		window.addEventListener('mousemove', e=>this.onMouseMove(e));
		window.addEventListener('mousedown', e=>this.onMouseDown(e));
		window.addEventListener('mouseup', e=>this.onMouseUp(e));
	}
	onMouseMove(e) {
		this.pointer.set(e.clientX/innerWidth*2-1, 1-2*e.clientY/innerHeight);
	}


	onMouseDown(e) {
		// console.log(e.buttons);
		console.log(this.leftButton.rotation.x);
		if(e.button==0) {
			this.leftButton.rotation.x =-Math.PI;
		} else if(e.button==2) {
			this.rightButton.rotation.x =0;

		}
	}

	onMouseUp(e) {
		if(e.button==0) {
			this.leftButton.rotation.x = -Math.PI+0.05;
		} else if(e.button==2) {
			this.rightButton.rotation.x =0.05;

		}
		this.raycaster.setFromCamera( this.pointer, this.camera );
		var intersects = this.raycaster.intersectObjects( [this.screen], false );
		if(intersects[0]!=null && !this.captureStarted) {

			this.initCapture();
		}
	}



	makeMouse() {

		this.mousePivot = new THREE.Object3D();
		this.sceneRoot.add(this.mousePivot);
		this.mouse = new THREE.Mesh(new RoundedBoxGeometry(0.1, 0.1, 0.09, 4, 0.045), new THREE.MeshStandardMaterial({color:0x404040, roughness:0.3}));
		this.mousePivot.add(this.mouse);
		this.mousePivot.position.set(0.75, -0.3525, 0);
		this.mouse.scale.y = 0.5;
		this.mouse.scale.z = 2;

		//let's make a button! It's a sphere, half a turn in theta and phi.
		var rightButton = new THREE.Mesh(
			new THREE.SphereGeometry(0.048,8,8, 0, Math.PI/2, 0, Math.PI/2),
			new THREE.MeshStandardMaterial({color:0x606060, roughness:0.2})
			);
		this.mousePivot.add(rightButton);
		rightButton.rotation.y = Math.PI;
		rightButton.scale.set(1,0.5, 1.9);

		rightButton.position.set(0.0042013, 0.003484, -0.00073);

		var leftButton = rightButton.clone();
		leftButton.scale.x*=-1;
		leftButton.position.x*=-1;
		this.mousePivot.add(leftButton);

		this.leftButton = leftButton;
		this.rightButton = rightButton;


		//let's make this cable!




		var cableEnd = new THREE.Mesh(new THREE.PlaneGeometry(Math.PI*2, 1, 12,30),


		this.bezierSausageMaterial()
		);
		var p1L = new THREE.Object3D();
		cableEnd.add(p1L);
		var p2L = new THREE.Object3D();
		cableEnd.add(p2L);
		var p3L = new THREE.Object3D();
		cableEnd.add(p3L);
		var p4L = new THREE.Object3D();
		cableEnd.add(p4L);
		cableEnd.material.uniforms.r.value = 0.005
		this.sceneRoot.add(cableEnd);
		cableEnd.position.x = 0.4;
		cableEnd.position.y = -0.35;
		cableEnd.rotation.x = Math.PI/2;

		this.leftButton.rotation.x = -Math.PI+0.05;
		this.rightButton.rotation.x =0.05;

		cableEnd.material.uniforms.p3.value.set(0.1,-0.65);
		cableEnd.material.uniforms.p4.value.set(-0.1,-0.35);

		window.addEventListener('mousemove', e=>{
			this.mousePivot.rotation.y = -(e.clientX-innerWidth/2)/2000;
			this.mousePivot.position.x = 0.55+0.0002*e.clientX;
			this.mousePivot.position.z = 0.1+0.0002*e.clientY;
			p1L.position.copy(cableEnd.worldToLocal(this.mousePivot.localToWorld(new THREE.Vector3(0,0,-0.05))));
			p2L.position.copy(cableEnd.worldToLocal(this.mousePivot.localToWorld(new THREE.Vector3(0,0,-0.3))));
			cableEnd.material.uniforms.p1.value.copy(p1L.position);
			cableEnd.material.uniforms.p2.value.copy(p2L.position);
			// p1L.position.set(0.1*Math.sin(performance.now()/1000),0,0);
			// p2L.position.set(0.1*Math.sin(performance.now()/1000),0,0);

		});

	}

	makeKeyboard() {

		var keysPivot = new THREE.Object3D();
		var keys = ["`1234567890-=","QWERTYUIOP[]","ASDFGHJKL;'","ZXCVBNM<>/"];
		//let's make each of the keys!
		this.keyMap = {};
		var keySize = 0.025;
		keys.forEach((row,rowNum)=>{
			row.split("").forEach((keyChar,keyNum,rowArray)=>{
				var key = this.makeKey(keyChar);
				this.keyMap[keyChar] = key;
				keysPivot.add(key);
				key.position.x = keySize * (keyNum-rowArray.length/2);
				key.position.z = keySize * (rowNum-keys.length/2);
			});
		});
		var spacebar =this.makeKey(" ", 6);
		keysPivot.add(spacebar);
		spacebar.position.z = keySize*2;

		this.keyMap[String.fromCharCode(32)] = spacebar;
		var keyboardBase = new THREE.Mesh(new RoundedBoxGeometry(0.38, 0.02, 0.15,3, 0.004),
		new THREE.MeshStandardMaterial({color:0x808080}));
		keyboardBase.position.y = -0.01;
		keyboardBase.position.x = -0.01;

		let oG = new Geometry().fromBufferGeometry(keyboardBase.geometry);
		oG.vertices.forEach(v=>{
			v.x *= 1-0.2*(v.z+0.075)/0.15;
		});
		oG.mergeVertices();
		oG.computeVertexNormals();
		keyboardBase.geometry = oG.toBufferGeometry();


		keysPivot.add(keyboardBase);

		keyboardBase = keyboardBase.clone();
		keysPivot.add(keyboardBase);
		keyboardBase.scale.multiplyScalar(0.95);
		keyboardBase.rotation.x = -0.1;
		keyboardBase.position.y = -0.018;


		const keyboardShadow = this.makeShadow();
		keyboardShadow.scale.set(0.88, 0.30,1);
		keyboardShadow.position.set(-0.0025, -0.0050, -0.0175);
		oG = new Geometry().fromBufferGeometry(keyboardShadow.geometry);
		oG.vertices.forEach(v=>{
			v.x *= 1-0.3*(0.5-v.y);
		});
		oG.mergeVertices();
		oG.computeVertexNormals();
		keyboardShadow.geometry = oG.toBufferGeometry();
		keyboardBase.add(keyboardShadow);

		keysPivot.position.z = 0.29;
		keysPivot.position.y = -0.34;
		keysPivot.rotation.x = 0.1;;
		window.addEventListener('keydown', e=>{
			// console.log(e.keyCode);
			var target = this.keyMap[String.fromCharCode(e.keyCode)];
			if(target!=null) {
				target.position.y = -0.003;
			}
		});
		window.addEventListener('keyup', e=>{
			var target = this.keyMap[String.fromCharCode(e.keyCode)];
			if(target!=null) {
				target.position.y = 0;
			}


		});
		this.sceneRoot.add(keysPivot);
	}

	makeKey(letter, charWidth = 1) {
		var c = document.createElement('canvas');
		c.width = c.height = 32;
		var g = c.getContext('2d')
		g.fillStyle = "white";
		g.fillRect(0,0,1024, 1024);
		g.fillStyle = "black";
		g.font = "30px Arial";
		var w = g.measureText(letter).width;
		g.fillText(letter, 16-w/2, 28);
		this.keyGeos = this.keyGeos || {};
		var keyGeo = this.keyGeos[charWidth] = this.keyGeos[charWidth] || new RoundedBoxGeometry(0.02 * charWidth, 0.01,0.02, 3, 0.003 );
		this.keyMat = this.keyMat || new THREE.MeshStandardMaterial({color:0x808080, roughness:0.2});
		var keyMesh = new THREE.Mesh(keyGeo,this.keyMat );

		var keyCapMesh = new THREE.Mesh(new THREE.PlaneGeometry(0.016, 0.016), new THREE.MeshStandardMaterial({
			transparent:true,
			blending:THREE.MultiplyBlending,
			map: new THREE.CanvasTexture(c)

		}));
		keyMesh.add(keyCapMesh);
		keyCapMesh.rotation.x = -Math.PI/2;
		keyCapMesh.position.y = 0.005+0.0001;
		return keyMesh;
	}

	makeTable() {

		var tableTop = new THREE.Mesh(new RoundedBoxGeometry(2, 0.05, 0.8, 4, 0.010),
		new THREE.MeshStandardMaterial({color:0x080200,
			normalScale:new THREE.Vector2(0.5, 0.5),
			normalMap:this.getWoodTexture(),
			roughness:0.4}));
		tableTop.material.normalMap.wrapS = tableTop.material.normalMap.wrapT = THREE.RepeatWrapping;
		tableTop.material.normalMap.repeat.setScalar(3);
		var underTop = new THREE.Mesh(new RoundedBoxGeometry(2-0.025, 0.05, 0.8-0.025, 4, 0.010),
		new THREE.MeshStandardMaterial({roughness:0, metalness:1}));
		tableTop.add(underTop);
		underTop.position.y = -0.045;
		this.sceneRoot.add(tableTop);
		tableTop.position.y = -0.39;
		var leg = new THREE.Mesh(
			new THREE.CylinderGeometry(0.03, 0.03, 0.77, 32),
			new THREE.MeshStandardMaterial({roughness:0.1, metalness:1}));
			tableTop.add(leg);
		leg.position.y = -0.77/2;
		var inset = 0.1;
		leg.position.x = 2/2-inset;
		leg.position.z = 0.8/2-inset;
		leg = leg.clone();
		leg.position.x *=-1;
		tableTop.add(leg);
		leg = leg.clone();
		leg.position.z*=-1;

		tableTop.add(leg);
		leg = leg.clone();
		leg.position.x*=-1;
		tableTop.add(leg);

	}

	getLogo(text) {
		var c = document.createElement('canvas');
		c.width = 1024;
		c.height = 128;
		var g= c.getContext('2d');
		g.fillRect(0,0, 1024, 128);
		g.fillStyle = "white";
		g.font = "90px Arial Black";
		g.fillText(text, 10, 100);
		return new THREE.CanvasTexture(c);
	}

	makeMonitor() {
		var theta = Math.PI/8;
		var aspect = window.screen.width/window.screen.height;

		var screenPivot = new THREE.Object3D();
		screenPivot.rotation.y = Math.PI/2;
		screenPivot.position.z = 0.065;
		screenPivot.scale.multiplyScalar(0.65);
		this.sceneRoot.add(screenPivot);
		screenPivot.position.y = 0.055;



		var machineBase = new THREE.Mesh(new RoundedBoxGeometry(.5, .19, 0.7, 4, 0.01),
		new THREE.MeshStandardMaterial({color:0x808080,
			roughness:0.5,
		normalMap:this.noiseNormal()
		}));

		//we need at least to put the Inceptron 32x on the front!



		var frontLabel = new THREE.Mesh(new THREE.PlaneGeometry(0.3, 0.035),
		new THREE.MeshStandardMaterial({
			transparent:true,
			metalness:1,
			roughness:0,
			alphaMap:this.getLogo("Inceptron 32x"),
			 wireframe:false}));
		machineBase.add(frontLabel);
		frontLabel.position.x = -0.2655;
		frontLabel.position.y = -0.065;
		frontLabel.position.z = 0.19;
		frontLabel.rotation.y = -Math.PI/2;
		frontLabel.rotation.x = Math.PI;


		var screenLabel = frontLabel.clone();
		screenLabel.material = screenLabel.material.clone();
		screenLabel.material.alphaMap = this.getLogo("SEEK");
		screenLabel.material.color = new THREE.Color(0x404040);
		machineBase.add(screenLabel);
		screenLabel.position.y-=0.095;
		screenLabel.position.x+=0.09;
		screenLabel.position.z-=0.29;

		var foot = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.02, 0.1, 32), new THREE.MeshStandardMaterial({color:0}));
		foot.position.set(0.25-0.03,(0.19/2), 0.35-0.03);
		machineBase.add(foot);
		foot = foot.clone();
		foot.position.x*=-1;
		machineBase.add(foot);
		foot = foot.clone();
		foot.position.z*=-1;
		machineBase.add(foot);
		foot = foot.clone();
		foot.position.x*=-1;
		machineBase.add(foot);
		machineBase.rotation.x = Math.PI;


		var machineFront = new THREE.Mesh(new RoundedBoxGeometry(0.03, .19+0.01, 0.7+0.01, 4, 0.005),
		new THREE.MeshStandardMaterial({color:0x808080, roughness:0.2, metalness:0}));
		machineFront.position.x = -0.25;
		machineBase.add(machineFront);


		//let's make some fake ground shadows:
		const screenShadow = this.makeShadow();
		screenShadow.scale.set(0.88, 0.8,1);
		screenShadow.position.set(0.3, -0.3435, -0.0375);
		screenPivot.add(screenShadow);
		var machineShadow = screenShadow.clone();
		machineShadow.scale.multiplyScalar(2.4);
		machineShadow.position.y -=0.302;
		machineShadow.position.z -=0.05;
		machineShadow.position.x -=0.05;
		machineShadow.scale.x*=0.8;

		screenPivot.add(machineShadow);
		var machineBack = new THREE.Mesh(new RoundedBoxGeometry(0.03, .19-0.03, 0.7-0.03, 4, 0.005),
		new THREE.........完整代码请登录后点击上方下载按钮下载查看