three.js 构建简单的房间

最新推荐文章于 2024-09-04 10:29:30 发布

侒然

最新推荐文章于 2024-09-04 10:29:30 发布

阅读量1.1k

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/janent168/article/details/117333354

版权

这篇博客介绍了如何利用Three.js库创建一个简单的3D房间，包括轨道控制器、墙体组合以及动画效果。通过ThreeBSP库进行网格组合，实现了门的开合动画，并使用Tweenjs添加平滑过渡。此外，还涉及了光照、纹理映射以及场景布置，如地板、墙面和家具的创建。

摘要由CSDN通过智能技术生成

通过three.js构建一个简单的房间

知识点

轨道控制器：OrbitControls
使用ThreeBSP库进行Three.js网格组合
tweenjs动画效果就是使一个对象在一定时间内从一个状态到另外一个状态

代码

<!DOCTYPE html>

<html>

<head>
  <title>构建一个简单的房间</title>

  <style>
    body {
      /* set margin to 0 and overflow to hidden, to go fullscreen */
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <div id="ThreeJS" style="position: absolute; left: 0px; top: 0px"></div>
  <script type="text/javascript" src="js/three.js"></script>
  <script type="text/javascript" src="js/OrbitControls.js"></script>
  <script type="text/javascript" src="js/ThreeBSP.js"></script>
  <script type="text/javascript" src="js/Tween.js"></script>

  <!-- Javascript code that runs our Three.js examples -->
  <script type="text/javascript">
    // 设置全局变量
    var scene, camera, renderer, controls, tween, door;
    var clock = new THREE.Clock();
    var materialArrayA = [];
    var materialArrayB = [];
    var matArrayA = [];//内墙
    var matArrayB = [];//外墙
    var dummy = new THREE.Object3D();//仿制品
    /**
      * 创建场景对象Scene
      */
    scene = new THREE.Scene();
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camer