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

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

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