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.........完整代码请登录后点击上方下载按钮下载查看