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

参考资料

three.js Canvas画布布局
…
模型加载进度条

知识点

注：基于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
模型加载进度条

代码实现

<!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 = 800const 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画布上内容下载到本地，需要设置为truepreserveDrawingBuffer: 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>