three.js实例webgl_decals注解

最新推荐文章于 2023-02-26 10:15:57 发布

花火纷飞

最新推荐文章于 2023-02-26 10:15:57 发布

阅读量548

点赞数

文章标签： three.js 3d渲染 webgl

本文链接：https://blog.csdn.net/weixin_49141333/article/details/121563323

版权

本文深入探讨了three.js库中的webgl_decals技术，详细介绍如何在3D场景中应用贴花效果，通过实例展示其在3D渲染中的应用。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - decal splatter</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="${ctxStatic}/common/three/css/main.css">
</head>
<body>

<div id="container"></div>
<div id="info" style="text-align: left;width: 20%;">
    <h1 style="text-align: center;">这是人体标本实例图一</h1>
    <p style="text-indent: 30px;width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden;">
        此图向我们展示了，人体标本模型的实例，您可以点击所选部位进行缩放查看，也可旋转查看您所需要查看的部位</p><hr>
    <div id="progress"></div>

</div>

<script type="module">

    import * as THREE from '${ctxStatic}/common/three/build/three.module.js';

    import Stats from '${ctxStatic}/common/three/examples/jsm/libs/stats.module.js';  //fps检测
    import { GUI } from '${ctxStatic}/common/three/examples/jsm/libs/dat.gui.module.js';//gui交互
    //添加轨道控制器，引入后可用鼠标进行旋转、平移，缩放
    import { OrbitControls } from '${ctxStatic}/common/three/examples/jsm/controls/OrbitControls.js';
    // 引入可加载 glTF 格式的模型
    import { GLTFLoader } from '${ctxStatic}/common/three/examples/jsm/loaders/GLTFLoader.js';
    //引入贴花效果，双击喷漆
    // import { DecalGeometry } from '${ctxStatic}/common/three/examples/jsm/geometries/DecalGeometry.js';

    const container = document.getElementById( 'container' );//选择容器

    let renderer, scene, camera, stats;  //渲染器，场景，照相机，性能监视器
    let mesh;       //gltf模型
    let raycaster;  //拾取射线
    let line;       //跟随鼠标
    //向量操作x,y,z
    const intersection = {//存储交叉点信息
        intersects: false,
        point: new THREE.Vector3(),   //鼠标点击屏幕后要转化为3D坐标的时候用到的定义和描述
        normal: new THREE.Vector3()   //两个物体之间的相对距离，或者说偏移量的变量类型
    };
    const mouse = new THREE.Vector2();    //定义和描述2D游戏内部的一些参数，像刚体的速度等等
    const intersects = [];
    //图像纹理加载，引入模型
    const textureLoader = new THREE.TextureLoader();
    const decalDiffuse = textureLoader.load( '${ctxStatic}/common/three/textures/decal/decal-diffuse.png' );
    const de