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