使用three.js实现炫酷的酸性风格3D页面效果

2022-04-15 07:34:09 来源：易采站长站作者：

通过鼠标点的位置和当前相机的矩阵计算出raycaster raycaster.setFromCamera(mouse, camera); // 获取raycaster直线和所有模型相交的数组集合 let intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { alert('HELLO WORLD') // 可以通过遍历实现点击不同mesh触发不同交互，如： let selectedObj = intersects[0].object; if (selectedObj.name === 'car') { alert('汽车🚗') } }}window.addEventListener('click', onMouseClick, false);

添加3D文字

使用 TextGeometry(text : String, parameters : Object) 添加 3D文字，以下是可设置属性的说明：

size：字号大小，一般为大写字母的高度。 height：文字的厚度。weight：值为 normal 或 bold，表示是否加粗。 font：字体，默认是 helvetiker，需对应引用的字体文件。 style：值为 normal 或 italics，表示是否斜体 bevelThickness：倒角厚度。 bevelSize：倒角宽度。 curveSegments：弧线分段数，使得文字的曲线更加光滑。 bevelEnabled：布尔值，是否使用倒角，意为在边缘处斜切。

var loader = new THREE.FontLoader();loader.load('gentilis_regular.typeface.json', function (font) {  var textGeo = new THREE.TextGeometry('HELLO WORLD', {    font: font,    size: .8,    height: .8,    curveSegments: .05,    bevelThickness: .05,    bevelSize: .05,    bevelEnabled: true  });  var textMaterial = new THREE.MeshPhongMaterial({ color: 0x03c03c });  var mesh = new THREE.Mesh(textGeo, textMaterial);  mesh.position.set(0, 3.8, 0);  scene.add(mesh);});

使用three.js实现炫酷的酸性风格3D页面效果

优化

现在模型加载已经基本完成了，但是 3D 模型的体积一般比较大，部署之后我发现网页加载非常慢，影响用户体验，减小模型体积是十分必要的，在网上找了很久压缩工具，发现在不需要安装大型 3D建模软件 的情况下，使用 obj2gltf 可以将体积较大的 OBJ 格式模型转化为 gltf 模型，有效优化模型体积，提升网页加载速度。

安装

npm install obj2gltf --save

将obj模型复制到以下目录中

node_modulesobj2gltfbin

执行转码指令

node obj2gltf.js -i demo.obj -o demo.gltf

如图出现类似上述内容，转码完成，对比转化前后的文件体积，本例中 kas.obj 初始文件大小为 9.7M 转化后的文件 kas.gltf 只有 4.6M，体积缩小一半，此时将转化后的模型加载到页面上，肉眼几乎看不出模型效果的变化，同时页面加载速度得到明显提升。

使用three.js实现炫酷的酸性风格3D页面效果

obj2gltf 也可以作为库使用，通过 node服务 实时转化模型，感兴趣的同学可以通过文章末尾链接深入学习。
也可以是使用 3D 建模软件如 blender 等手动通过减少模型 面数 和 缩小体积 等途径对模型压缩优化，这种优化效果更明显。

完整代码

var model = require('@/assets/models/kas.gltfimate () {      var clock = new THREE.Clock()      requestAnimationFrame(animate);      var delta = clock.getDelta();      scene.rotation.y -= 0.015;      renderer.render(scene, camera);      stats.update();    }    // 增加点击事件    //声明raycaster和mouse变量    var raycaster = new THREE.Raycaster();    var mouse = new THREE.Vector2();    function onMouseClick(event) {      // 通过鼠标点击位置计算出raycaster所需要点的位置，以屏幕中心为原点，值的范围为-1到1.      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;      mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster      raycaster.setFromCamera(mouse, camera);      // 获取raycaster直线和所有模型相交的数组集合      var intersects = raycaster.intersectObjects(scene.children);      if (intersects.length > 0) {        alert('HELLO WORLD')      }    }    window.addEventListener('click', onMouseClick, false);  }}