• three.js

    概念

    indices 顶点
    PBR 基于物理的渲染
    贴图库 poliigon
    资源：Threejs/examples/js

    Float32Array 32位浮点数数组

    几何体

    BufferGeometry 几何体，每三个点组成一个三角形面
    attributes.position.count 顶点数量，多个三角形面之间重合的顶点分别算
    attributes.position.array 顶点坐标数组，一个顶点占三个轴坐标
    attributes.position.uv    几何体展开图，用于确定贴图位置
    attributes.position.normal 确定姿态

    BoxGeometry 立方体 attributes.position.count 是24，估计是顶点复用

    1. html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>Titletitle>
    6. 	<script src="three.min.js">script>
    7. 	
    8. 	<script src="../examples/js/controls/OrbitControls.js">script>
    9. 	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js">script>
    10. head>
    11. <body>
    12. <script>
    13.     // 场景
    14.     const scene = new THREE.Scene();
    15.  
    16.     // 物体
    17.     const geometry = new THREE.BoxGeometry(100, 150, 200);  // 几何体
    18.     const material = new THREE.MeshLambertMaterial({ // 材质
    19.         color: 0x00ff00,
    20.         transparent: true,
    21.         opacity: 0.6
    22.     });
    23.     const mesh = new THREE.Mesh(geometry, material);   // 物体（由几何体和材质确定）
    24.     mesh.position.set(0, 0, 100);   // 物体质心的位置
    25.     mesh.scale.set(2, 1, 3);  // 缩放
    26.     mesh.rotateX(Math.PI / 4);  // 旋转弧度，绕着穿过质心的轴线旋转
    27.     scene.add(mesh);  // 往场景里添加物体
    28.  
    29.     // 光源
    30.     const light = new THREE.PointLight(0xffffff, 1, 10000);  // 点光源
    31.     light.position.set(300, 400, 500);  // 光源位置
    32.     scene.add(light);
    33.  
    34.     // 坐标轴
    35.     const axesHelper = new THREE.AxesHelper(500); // x红 y绿 z蓝
    36.     scene.add(axesHelper);
    37.  
    38.     // 可视化点光源
    39.     const pointLightHelper = new THREE.PointLightHelper(light, 1);
    40.     scene.add(pointLightHelper);
    41.  
    42.     // 透视相机（fov水平视场角，fov和aspect间接确定了垂直视场角，near和far确定了相机观察的距离区间）
    43.     const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    44.     camera.position.set(600, 600, 600);  // 相机位置
    45.     camera.lookAt(0, 0, 0);  // 拍摄目标，即朝向
    46.  
    47.     // 渲染器，即canvas画布
    48.     const renderer = new THREE.WebGLRenderer();
    49.     renderer.setSize(window.innerWidth, window.innerHeight);  // canvas 尺寸，单位为像素，与场景里的尺寸无关
    50.     renderer.setClearColor(0xffffff);  // 画布颜色
    51.     renderer.render(scene, camera);
    52.     document.body.appendChild(renderer.domElement);  // 将canvas加入到 dom
    53.  
    54.     // 相机控制器，改变的是相机的位置
    55.     // 滚轮，改变位置-朝向保持不变（即相机在朝向上移动，始终朝向拍摄目标）
    56.     // 鼠标左键拖动，改变位置-与拍摄目标距离保持不变（即相机在球面上移动，始终朝向拍摄目标）
    57.     // 鼠标左键平移，改变朝向
    58.     const controls = new THREE.OrbitControls(camera, renderer.domElement);
    59.     controls.target.set(0, 0, 0); // 拍摄目标，即朝向
    60.     controls.update();  // 会覆盖 camera.lookAt
    61.     controls.addEventListener("change", () => {
    62.         renderer.render(scene, camera);   // 移动相机后，重新渲染画布
    63.     });
    64.  
    65.     // 动画
    66.     const clock = new THREE.Clock();
    67.  
    68.     function animate() {
    69.         // console.log(clock.getDelta());  // 间隔时间，用于获取渲染耗时
    70.         renderer.render(scene, camera);
    71.         mesh.rotateY(0.01);
    72.         window.requestAnimationFrame(animate)
    73.     }
    74.  
    75.     animate();
    76.  
    77.     // GSAP 动画库
    78.     let animate1 = gsap.to(mesh.position, {
    79.         x: 300,
    80. 		duration: 5,
    81. 		ease: "bounce.inOut", // 速度曲线
    82. 		delay: 2,
    83. 		repeat: 2,
    84. 		yoyo: true,   // 往返
    85. 		onStart: ()=>{
    86.             console.log('动画开始');
    87. 		},
    88. 		onComplete: () => {
    89.             console.log('动画结束');
    90.         }
    91.     });
    92.     window.addEventListener('click', (event) => {
    93.         if(animate1.isActive){
    94.             animate1.pause();  // 暂停动画
    95. 		}
    96.         else{
    97.             animate1.resume();  // 恢复动画
    98. 		}
    99.     });
    100.  
    101.     // 画布点投射，即画布上的一点沿着视锥线画一条射线；用于寻找与射线交汇的物体，即鼠标拾取，进而实现交互
    102.     window.addEventListener('click', (event) => {
    103.         const pointer = new THREE.Vector2();      // 画布点
    104.         pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
    105.         pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
    106.  
    107.         const raycaster = new THREE.Raycaster();  // 射线
    108.         raycaster.setFromCamera(pointer, camera);
    109.  
    110.         const intersects = raycaster.intersectObjects(scene.children);  // 找出与射线交汇的物体
    111.         for (let i = 0; i < intersects.length; i++) {
    112.             console.log(intersects[i]);
    113.         }
    114.     });
    115. script>
    116. body>
    117. html>
  • 相关阅读:
    机器学习入门（1）
    【附源码】计算机毕业设计SSM食疗养生服务平台
    Docker 入门及实践
    软件项目管理期中准备（自用，仅供参考）
    【Linux】ASCII码表-256个
    探索科技地图：通向未来的科技之路
    第一章初识微服务
    LIO-SAM源码解析（四）：imuPreintegration.cpp
    微信录屏怎么录？微信聊天记录怎么录制下来
    智驾发展的前世今生|为高阶自动驾驶而生的千寻FindAUTO NSSR解决方案
  • 原文地址：https://blog.csdn.net/saoraozhe3hao/article/details/126147841