Three.js之渲染器和前端UI界面

参考资料

知识点

注：基于Three.jsv0.155.0

three.js Canvas画布布局
UI交互界面与Canvas画布叠加
UI交互按钮与3D场景交互
Three.js背景透明度：.setClearAlpha()方法、背景透明alpha: true、.setClearColor()方法
Three.js渲染结果保存为图片：preserveDrawingBuffer:true、Cavnas方法.toDataURL()
深度冲突(模型闪烁)：logarithmicDepthBuffer: true
模型加载进度条

代码实现

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.js</title>
</head>
  <body>
    <div style="position:absolute; left: 10px; top: 10px">
      <button id="btnChangeBgColor">切换背景色</button>
      <button id="btnDownloadPhoto">下载图片</button>
    </div>
  </body>
  <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
  <script type="importmap">
    {
      "imports": {
        "three": "./js/three.module.js",
        "three/addons/": "../three.js/examples/jsm/"
      }
    }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const width = 800
    const height = 500

    // 场景
    const scene = new THREE.Scene();
    // 几何体
    const geometry = new THREE.PlaneGeometry(100, 100);
    // 材质 
    // MeshBasicMaterial：不受光
    // MeshLambertMaterial：受光
    const material = new THREE.MeshLambertMaterial({
      color:0x0000ff,
      side: THREE.DoubleSide
    });
    // 网格模型：物体
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    const mesh1 = mesh.clone();
    mesh1.material = mesh.material.clone();
    mesh1.material.color.set(0xff0000);
    // 设置模型宽度、高度
    mesh1.scale.set(2, 2, 2);
    mesh1.position.z = 0.01;
    scene.add(mesh1);

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // // 点光源
    // const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);
    // pointLight.position.set(-200, 200, 200 );
    // scene.add( pointLight );

    // // 辅助点光源
    // const pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );
    // scene.add( pointLightHelper );

    // 环境光
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
    scene.add( ambientLight );

    // 平行光
    const directionalLight = new THREE.DirectionalLight( 0xffffff, 1, 0, 0);
    // directionalLight.position.set(100, 0, 0);
    // directionalLight.position.set(0, 100, 0);
    // directionalLight.position.set(100, 100, 100);
    directionalLight.position.set(100, 60, 50);
    directionalLight.target = mesh;
    scene.add( directionalLight );

    // 辅助平行光
    const directionalLightHelper = new THREE.DirectionalLightHelper( directionalLight, 10 );
    scene.add( directionalLightHelper );

    // 相机
    const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);

    // 渲染器
    const renderer = new THREE.WebGLRenderer({
      // 背景透明
      // alpha: true
      // 想把canvas画布上内容下载到本地，需要设置为true
      preserveDrawingBuffer: true,
      // 设置对数深度缓冲区，优化深度冲突问题
      logarithmicDepthBuffer: true
    });
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });

    document.getElementById('btnChangeBgColor').addEventListener('click',function(){
      renderer.setClearColor(0xff0000, 0.5);
      renderer.render(scene, camera);
    })

    document.getElementById('btnDownloadPhoto').addEventListener('click',function(){
      // 创建一个a链接
      var link = document.createElement('a');
      link.href = renderer.domElement.toDataURL('image/png');
      link.download = 'threejs.png'; //下载文件名
      link.click();
    })
  </script>
</html>