three实现三维昼夜切换的办公室效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维昼夜切换的办公室效果代码，点击吊灯可切换夜晚和白天

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap" rel="stylesheet">

  
  
  
<style>
:root {
  --bg: #f5e4cf;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html {
  font-size: 16px;
}

body {
  overflow: hidden;
  background-color: #938fb8;
  background-color: var(--bg);
  cursor: grab;
}

.webgl,
#loader {
  position: fixed;
  top: 0;
  left: 0;
}

#loader {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  z-index: 10;

}

.message {
  position: fixed;
  width: 100%;
  max-width: 500px;
  left: -100%;
  bottom: 50px;
  display: grid;
  gap: 0.85rem;
  z-index: 2;
  padding: 1.125rem 1.45rem;
  border-radius: 0.5rem;
  backdrop-filter: blur(5px);
  transition: left 500ms;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.05);
}

.messageTitle {
  font-size: 1.7rem;
  letter-spacing: -0.025rem;
  color: #222222;
}

.messageDescription {
  font-size: 1.15rem;
  line-height: 1.5;
  color: #666666;
}

.is-visible {
  left: 50px;
}

@media screen and (max-width: 600px) {
  .message {
    max-width: 100%;
    bottom: 0px;
  }

  .is-visible {
    left: 0px;
  }
}
</style>

</head>

<body translate="no">
  <canvas class="webgl"></canvas>
    
<div class="message">
	<h1 class="messageTitle"></h1>
	<p class="messageDescription"></p>
</div>

<div id="loader">
	<h1>Loading</h1>
</div>
    

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
  
      <script id="rendered-js" >
const loading = document.querySelector('#loader');
const canvas = document.querySelector('canvas.webgl');
const messageC = document.querySelector('.message');
const messageTitle = document.querySelector('.messageTitle');
const messageDescription = document.querySelector('.messageDescription');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
  alpha: true,
  shadowMap: true });

const globalLight = 'white';
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight };

const textureLoader = new THREE.TextureLoader();
const loader = new THREE.GLTFLoader();
let minPan = new THREE.Vector3(-2, -.5, -2);
let maxPan = new THREE.Vector3(2, .5, 2);
let controls, room, robot, sillon, silla, lampara, lamparaBase, jarron01, jarron02, jarron03, book;

renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);

const textureURL = '//repo.bfw.wiki/bfwrepo/threemodel/room/1/baked.jpg';
const textureNightURL = '//repo.bfw.wiki/bfwrepo/threemodel/room/1/baked-night.jpg';

// ====================================
// ====================================
function handleLoadRoom() {
  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/room.glb', gltf => {
    room = gltf.scene;
    applyTexture(room, textureURL, .1, .75);
    scene.add(room);
    loading.style.display = 'none';
  });

  function onDocumentTouchStart(event) {
    const x = event.touches[0].clientX;
    const y = event.touches[0].clientY;

    onDocumentMouseClick({ clientX: x, clientY: y });
  }

  document.addEventListener('click', onDocumentMouseClick);
  document.addEventListener('touchstart', onDocumentTouchStart);
}


function handleLoadModels() {
  const video = document.createElement('video');
  video.muted = true;
  video.loop = true;
  video.autoplay = true;
  video.playsInline = true;
  video.src = '//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4';
  video.play();
  video.setAttribute("crossorigin", "anonymous");

  const videoTexture = new THREE.VideoTexture(video);
  videoTexture.crossOrigin = 'anonymous';
  videoTexture.format = THREE.RGBFormat;
  videoTexture.minFilter = THREE.NearestFilter;
  videoTexture.maxFilter = THREE.NearestFilter;
  videoTexture.generateMipmaps = false;

  const videoMaterial = new THREE.MeshStandardMaterial({
    skinning: true,
    map: videoTexture,
    side: THREE.FrontSide,
    toneMapped: false });



  loader.load(
  '//repo.bfw.wiki/bfwrepo/threemodel/room/1/pantalla.glb',
  gltf => {
    gltf.scene.traverse(child => {
      child.material = videoMaterial;
      child.material.metalness = .1;
      child.material.roughness = .1;
    });
    scene.add(gltf.scene);
  });


  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/lampara.glb', gltf => {
    lampara = gltf.scene;
    applyTexture(lampara, textureURL, .1, .5);
    lampara.position.sub(new THREE.Vector3(1.25, -1.1, .25));
    scene.add(lampara);
  });

  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/robot.glb', gltf => {
    robot = gltf.scene;
    applyTexture(robot, textureURL, 0, 1);
    robot.position.sub(new THREE.Vector3(.25, .42, 1.25));
    scene.add(robot);
  });

  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/sillon.glb', gltf => {
    sillon = gltf.scene;
    applyTexture(sillon, textureURL, 0, 1);
    sillon.position.sub(new THREE.Vector3(-1.475, 1.125, -.78));
    scene.add(sillon);
  });

  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/lamparaBase.glb', gltf => {
    lamparaBase = gltf.scene;
    applyTexture(lamparaBase, textureURL, 0, 1, true);
    lamparaBase.position.sub(new THREE.Vector3(1.675, .5, 1.25));
    scene.add(lamparaBase);
  });

  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/book.glb', gltf => {
    book = gltf.scene;
    applyTexture(book, textureURL, 0, 1);
    book.position.sub(new THREE.Vector3(1.03, 0.53, 1.23));
    scene.add(book);
  });

  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/silla.glb', gltf => {
    silla = gltf.scene;
    applyTexture(silla, textureURL, 0, 1);
    silla.position.sub(new THREE.Vector3(.785, .95, 0.225));
    scene.add(silla);
  });

  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/jarron01.glb', gltf => {
    jarron01 = gltf.scene;
    applyTexture(jarron01, textureURL, .25, .5);
    jarron01.position.sub(new THREE.Vector3(-.7, -.15, 1.2));
    scene.add(jarron01);
  });

  loader.load('//repo.bfw.wiki/bfwrepo/threemodel/room/1/jarron02.glb', gltf => {
    jarron02 = g.........完整代码请登录后点击上方下载按钮下载查看