分类前端技术下的文章

2024-08-20

在Three.js中，可以通过监听鼠标点击事件，并更新相机的位置来实现点击设备后相机靠近预览的效果。以下是一个简单的示例代码：




// 假设你已经有了一个Three.js场景(scene)和相机(camera)
// 以及渲染器(renderer)和一些3D对象
 
// 监听鼠标点击事件
function onMouseClick(event) {
    // 将鼠标点击位置映射到三维坐标系中
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, 
                                    1 - (event.clientY / window.innerHeight) * 2, 
                                    0.5);
    // 将屏幕坐标转换为raycaster需要的坐标系
    vector.unproject(camera);
 
    // 创建射线对象
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
 
    // 计算物体和射线的交点
    var intersects = raycaster.intersectObjects(scene.children);
 
    // 假设我们预览最近的物体
    if (intersects.length > 0) {
        // 计算新的相机位置
        var target = intersects[0].point; // 选择交点作为我们的目标位置
        var cameraOffset = new THREE.Vector3(0, 0, 50); // 设置一个偏移量，使得相机不会立即与物体相交
        var newCameraPosition = new THREE.Vector3().addVectors(target, cameraOffset);
 
        // 平滑移动相机
        new TWEEN.Tween(camera.position).to(newCameraPosition, 500).start();
    }
}
 
// 添加事件监听
document.addEventListener('click', onMouseClick, false);

在这个例子中，我们定义了一个onMouseClick函数来处理鼠标点击事件。我们首先将鼠标点击坐标转换为raycaster需要的坐标系，然后使用raycaster来检测鼠标点击位置和场景中的物体之间的交叉。如果有物体交叉，我们就计算出新的相机位置，并使用TWEEN.js库来平滑地移动相机到预览位置。

确保在你的Three.js场景初始化代码中包含了TWEEN.js库，以及相应的CSS和JS引用。这个例子假设你已经有了一个基本的Three.js场景设置，并且你的页面已经有了一个用于渲染Three.js场景的canvas元素。

System

2024-08-20

所有,javascript

在Vue 3项目中，你可以使用Vue CLI来创建一个新项目，并且可以通过配置package.json中的main, module, 和 exports字段来定义不同的模块入口。

首先，确保你已经安装了最新版本的Vue CLI。如果没有安装，可以通过以下命令安装：




npm install -g @vue/cli
# 或者
yarn global add @vue/cli

然后，创建一个新的Vue 3项目：




vue create my-vue3-project

在创建过程中，选择Vue 3作为你的版本。

接下来，在你的package.json文件中，你可以指定main字段作为你的主入口文件，module字段指定ES模块格式的入口文件，exports字段定义包的出口。

例如：




{
  "name": "my-vue3-project",
  "version": "1.0.0",
  "main": "dist/main.js",
  "module": "dist/main.esm.js",
  "exports": {
    ".": {
      "import": "./dist/main.esm.js",
      "require": "./dist/main.js"
    }
  },
  // ... 其他配置
}

在这个例子中，当其他项目通过ES模块系统导入你的项目时，它们会获取main.esm.js文件；而当通过CommonJS模块系统或者直接使用require时，它们会获取main.js文件。

请注意，exports字段是在Node.js 12.8+和大多数现代打包工具支持的条件下添加的。

最后，确保你的构建系统（例如webpack或Vue CLI的内置服务）能够生成对应的包。在Vue CLI创建的项目中，通常这些配置都已经设置好了，你只需要运行相应的命令即可。

- 阅读更多 -

next.js 服务端组件 -客户端组件

System

2024-08-20

所有,javascript

在Next.js中，有两种类型的组件：“客户端组件”（Client Components）和“服务器端组件”（Server Components）。

服务器端组件（SSR - Server-Side Rendering）：

这些组件在服务器上渲染为静态的HTML，并发送到客户端。在客户端，它们将接管并转换为可交互的React组件。服务器端渲染的优点是初始加载时的速度更快，因为它不需要下载和执行大量的JavaScript代码。

客户端组件（CSR - Client-Side Rendering）：

这些组件在客户端上渲染为可交互的React组件。它们通常用于那些不需要服务器端渲染的场景，因为它们需要更多的客户端资源。

在Next.js中，默认情况下，所有的组件都是服务器端组件，除非你明确指定它们是客户端组件。

例如，你可以使用next/dynamic来导入一个客户端组件：




import dynamic from 'next/dynamic'
 
const DynamicComponent = dynamic(() => import('../components/test'), { ssr: false })
 
function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <Footer />
    </div>
  )
}
 
export default Home

在这个例子中，Header 和 Footer 是服务器端渲染的，而 DynamicComponent 是客户端渲染的。

另外，你也可以使用next/head来控制页面的head部分，比如添加meta标签：




import Head from 'next/head'
 
function Home() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Header />
      <Content />
      <Footer />
    </div>
  )
}
 
export default Home

在这个例子中，Header 和 Footer 是服务器端渲染的，而 Content 是客户端渲染的。

以上就是Next.js中服务器端组件和客户端组件的基本使用方法。

- 阅读更多 -

nodejs，JSDOM 补 window环境

System

2024-08-20

所有,javascript

在Node.js中，如果你想要模拟一个类似于浏览器的window环境，你可以使用jsdom库。以下是如何安装和使用jsdom来补全window环境的步骤：

安装jsdom：




npm install jsdom

使用jsdom创建一个虚拟的window环境：




const jsdom = require("jsdom");
const { JSDOM } = jsdom;
 
// 创建一个虚拟的DOM环境
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
 
// 获取window对象
const window = dom.window;
 
// 现在你可以在window上添加属性或者使用它提供的DOM API
window.document.querySelector("p").textContent = "Hello, jsdom!";
 
console.log(window.document.body.innerHTML); // 输出虚拟DOM的内容

在这个例子中，我们创建了一个包含HTML内容的虚拟DOM，并且可以在这个虚拟的window环境中访问document、navigator等属性，以及执行JavaScript代码。这对于测试或者在Node.js环境下需要模拟DOM操作的场景非常有用。

- 阅读更多 -

《WebGL编程指南》学习笔记 0着色器获取js数据

System

2024-08-20

所有,javascript




// 定义着色器代码
var vertexShaderSource = `
    // ... 省略其他定义 ...
    attribute vec4 a_Position; // 位置属性
    attribute vec2 a_TexCoord; // 纹理坐标属性
    varying vec2 v_TexCoord; // 传递给片元着色器的纹理坐标
    // ... 省略其他定义 ...
 
    void main() {
        // 设置位置
        gl_Position = u_ModelViewMatrix * u_ProjectionMatrix * a_Position;
        // 传递纹理坐标到片元着色器
        v_TexCoord = a_TexCoord;
    }
`;
 
var fragmentShaderSource = `
    // ... 省略其他定义 ...
    precision mediump float; // 设置浮点数的计算精度
    varying vec2 v_TexCoord; // 从顶点着色器接收纹理坐标
    uniform sampler2D u_Sampler; // 纹理单元
    // ... 省略其他定义 ...
 
    void main() {
        // 获取纹理颜色
        vec4 color = texture2D(u_Sampler, v_TexCoord);
        // 输出颜色
        gl_FragColor = color;
    }
`;
 
// 创建着色器程序的函数
function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
    // ... 省略创建着色器和程序的代码 ...
}
 
// 使用函数创建着色器程序
var program = createProgram(gl, vertexShaderSource, fragmentShaderSource);

这个例子展示了如何在WebGL中定义着色器代码，并使用JavaScript函数创建着色器程序。在着色器中，我们定义了attribute变量来接收位置和纹理坐标数据，并使用uniform来接收纹理和矩阵数据。在顶点着色器中，我们设置了顶点的位置，并将纹理坐标传递到片元着色器。在片元着色器中，我们使用texture2D函数来对纹理坐标进行纹理查询，并设置片元的最终颜色。最后，我们使用一个JavaScript函数来创建着色器程序，这个函数应该包括创建着色器、附加着色器源码、编译着色器以及链接着色器程序的步骤。

System

2024-08-20

所有,javascript




// 引入CryptoJS库
const CryptoJS = require("crypto-js");
 
// AES加密函数
function encryptAES(data, secretKey) {
    return CryptoJS.AES.encrypt(data, secretKey).toString();
}
 
// AES解密函数
function decryptAES(ciphertext, secretKey) {
    const bytes  = CryptoJS.AES.decrypt(ciphertext, secretKey);
    return bytes.toString(CryptoJS.enc.Utf8);
}
 
// 使用示例
const secretKey = 'your-256-bit-secret-key'; // 应该是一个复杂的密钥，不要公开
const message = 'Hello World!';
 
// 加密
const encrypted = encryptAES(message, secretKey);
console.log('Encrypted:', encrypted);
 
// 解密
const decrypted = decryptAES(encrypted, secretKey);
console.log('Decrypted:', decrypted);

在这段代码中，我们首先引入了crypto-js库，然后定义了encryptAES和decryptAES两个函数来分别处理加密和解密。在使用时，你需要替换your-256-bit-secret-key为你自己的密钥，并确保该密钥在解密时可用。这段代码提供了一个简单的示例，展示了如何使用AES算法来加密和解密数据。

System

2024-08-20

所有,javascript

Auto.js 是一个基于 Android 平台的自动化工具，可以用于编写脚本来模拟各种操作，比如点击、滑动等。Auto.js Pro 是其升级版，增加了一些高级功能，如无障碍检测等。AutoX.js 是一个基于 Auto.js Pro 的扩展库，提供了更多功能，如 ADB 操作等。

以下是一个使用 AutoX.js 来实现 ADB 自动化测试脚本的简单示例：




// 引入 AutoX 库
auto();
 
// 设定设备序列号
devices('1234567');
 
// 进行 ADB 命令操作
adb.shell('input text "Hello, AutoX!"', function(){
    console.log('文本输入成功');
});
 
// 等待 2 秒
sleep(2000);
 
// 执行 ADB 命令进行点击操作
adb.click(100, 200, function(){
    console.log('点击操作成功');
});

在这个例子中，我们首先引入 AutoX.js 库，并指定要操作的设备序列号。然后使用 adb.shell 方法输入文本，sleep 方法等待一段时间，最后使用 adb.click 方法进行点击操作。

请注意，实际使用时需要确保设备已经连接到电脑，并且 AutoX.js 库已经正确安装在项目中。此外，执行 ADB 命令时需要设备的 adb 调试权限。

System

2024-08-20

所有,javascript




import { readFileSync } from 'fs';
import { resolve } from 'path';
import { writeFile } from 'fs/promises';
import { fileURLToPath } from 'url';
 
const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
// 假设这是我们的入口文件路径
const entryPath = resolve(__dirname, 'src/index.html');
 
// 读取入口文件
const entryContent = readFileSync(entryPath, 'utf-8');
 
// 替换脚本和链接标签，以便在微前端环境中工作
const microFrontendEntryContent = entryContent
  .replace(/<script(.|\n)*?<\/script>/g, '')
  .replace(/<link(.|\n)*?rel="stylesheet"/, '');
 
// 将修改后的内容写入新文件
await writeFile(resolve(__dirname, 'dist/index.html'), microFrontendEntryContent, 'utf-8');

这段代码展示了如何读取一个HTML文件，移除其中的<script>和<link rel="stylesheet">标签，并将处理后的内容写入一个新文件。这是构建微前端时常用的一种策略，用以隔离微应用之间的资源依赖。

System

2024-08-20

所有,javascript




// 引入必要的Three.js组件
import * as THREE from 'three';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建几何体、材质和网格对象
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
 
// 将几何体添加到场景中
scene.add(cube);
 
// 设置相机位置并查看场景
camera.position.z = 5;
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  // 渲染场景
  renderer.render(scene, camera);
}
 
animate(); // 开始动画循环

这段代码创建了一个简单的3D场景，包含一个绿色的立方体，并且会持续旋转。这是学习Three.js的一个很好的起点，它演示了如何设置场景、相机、渲染器，以及如何添加和动画处理几何体。

- 阅读更多 -

Vue3网站用户引导功能【Intro.js】

System

2024-08-20

所有,javascript




<template>
  <div>
    <button @click="startIntro">开始用户引导</button>
    <div class="introjs-tooltiptext">
      这是引导工具提示文本示例。
    </div>
  </div>
</template>
 
<script>
import introJs from 'intro.js';
import 'intro.js/introjs.css';
 
export default {
  methods: {
    startIntro() {
      // 初始化intro.js
      introJs().setOptions({
        steps: [
          {
            element: '.introjs-tooltiptext', // 指定引导元素的CSS类
            intro: '欢迎使用本网站！这是第一步的引导。' // 引导文本
          },
          // 添加更多步骤...
        ]
      }).start(); // 开始引导
    }
  }
}
</script>
 
<style>
/* 添加样式 */
.introjs-tooltiptext {
  background-color: #ddd;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  /* 其他样式 */
}
</style>

这个代码实例展示了如何在Vue 3应用中集成intro.js库来添加用户引导功能。通过定义一个按钮，在点击按钮时触发引导开始函数startIntro，该函数使用intro.js的设置选项来配置引导步骤。每个步骤中定义了要引导的元素和相应的文本。同时，还展示了如何为引导提示框添加自定义CSS样式。

- 阅读更多 -