Three.js前端三维图形开发案例｜根据透明度绘制立方体

清华计算机学堂 2023-02-07

287

WebGL是一种三维绘图标准，该绘图标准允许把JavaScript和OpenGL ES 2.0结合在一起，这样Web开发人员就可以借助硬件在浏览器中更流畅地展示三维场景和模型，以创建复杂的导航和数据视觉化。Three.js是一款基于原生WebGL的三维引擎框架(库)，该框架在WebGL的API基础上以简单、直观的方式封装了三维图形的常用对象，因此大大减少了程序员在Web前端开发三维图形应用的工作量，Three.js还使用了很多图形引擎的高级技巧，极大地提高了应用性能。

随着WebGL技术和5G技术的持续推广，各种产品的在线三维展示将会变得越来越普遍，对于现在比较火爆的VR产品、AR产品，对WebGL技术的推广，也是一个好消息。VR与Web3D技术的结合自然就衍生出一个新的概念WebVR，也就是基于Web实现的VR内容，即通过三维照相机对室内空间进行拍摄，即可在Web端以全景图的方式预览室内效果。Three.js对此也进行了封装。

本文下面这个实例演示了根据透明度绘制立方体。

实例功能

此实例主要通过设置THREE.MeshNormalMaterial的(不)透明度属性opacity，实现通过材质自定义立方体的透明度。当浏览器显示页面时，两个立方体将以不同的透明度显示，如图1所示。

■ 图1

实现代码

<body><center id="myContainer"></center>
<script>
 //创建渲染器
 var myRenderer= new THREE.WebGLRenderer({antialias: true});
 myRenderer.setSize(window.innerWidth,window.innerHeight);
 myRenderer.setClearColor('white', 1.0);
 $("#myContainer").append(myRenderer.domElement);
 var myCamera = new THREE.PerspectiveCamera(45,
     window.innerWidth  window.innerHeight, 30, 1000);
 myCamera.position.set(-34.34,-40.56,35.83);
 myCamera.lookAt(new THREE.Vector3(0, 0 , 0));
 var myScene = new THREE.Scene();
 myScene.add(new THREE.AmbientLight('white'));
 //创建(不)透明度为0.19的立方体
 var myGeometry1 = new THREE.BoxGeometry(6, 6, 6);
 var myMaterial1 =new THREE.MeshNormalMaterial({
  opacity: 0.19,transparent: true});
 var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);
 myMesh1.translateX(-20);
 myScene.add(myMesh1);
 //创建(不)透明度为0.99的立方体
 var myGeometry2 = new THREE.BoxGeometry(16, 16, 16);
 var myMaterial2 =new THREE.MeshNormalMaterial({
  opacity: 0.99,transparent: true});
 var myMesh2 = new THREE.Mesh(myGeometry2, myMaterial2);
 myMesh2.translateX(10);
 myScene.add(myMesh2);
 //渲染两个立方体
 myRenderer.render(myScene,myCamera);
</script></body>

代码说明

在上面这段代码中，myMaterial1=new THREE.MeshNormalMaterial({opacity:0.19, transparent:true})语句表示根据指定的(不)透明度(0.19)创建材质，实际测试表明，当设置了opacity参数(属性)之后，必须设置transparent:true，否则opacity: 0.19不起作用，即myMaterial1=new THREE.MeshNormalMaterial({opacity:0.19})语句不起作用。此外需要注意：opacity属性的取值范围是0~1。

补充说明

本系列所有Three.js代码(版本号r119)在IntelliJ IDEA环境编写完成，在最新版的Firefox浏览器或Google Chrome浏览器测试成功。因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Three.js的其他文件，在使用时保持网络畅通即可。此外需要注意：Three.js版本更新较快，因此在开发应用本书的源代码时特别需要注意版本问题。

源代码下载

扫描下方二维码获取“Three.js代码043”源代码