2024-08-08

置换贴图(displacementMap)、凹凸贴图(bumpMap)和法线贴图(normalMap)是three.js中材质属性,用于增加模型表面的细节。

以下是如何在Three.js中使用这些贴图的示例代码:




// 创建场景、相机和渲染器
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 textureLoader = new THREE.TextureLoader();
const displacementMap = textureLoader.load('displacement_texture.jpg');
const bumpMap = textureLoader.load('bump_texture.jpg');
const normalMap = textureLoader.load('normal_texture.jpg');
 
// 创建材质
const material = new THREE.MeshPhongMaterial({
    displacementMap: displacementMap,
    displacementScale: 0.1, // 置换贴图的缩放系数
    displacementBias: 0, // 置换贴图的偏移量
    bumpMap: bumpMap,
    bumpScale: 0.1, // 凹凸贴图的缩放系数
    normalMap: normalMap,
    normalScale: new THREE.Vector2(0.1, 0.1), // 法线贴图的缩放系数
    // 其他材质参数...
});
 
// 加载模型(以GLTF为例)
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('model.gltf', (gltf) => {
    scene.add(gltf.scene);
    // 设置模型材质
    gltf.scene.traverse((child) => {
        if (child.isMesh) {
            child.material = material;
        }
    });
 
    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
});
 
// 监听窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

在这个例子中,我们首先创建了一个场景、相机和渲染器。然后使用THREE.TextureLoader()加载了置换贴图、凹凸贴图和法线贴图。接着定义了一个材质对象,并将这些贴图应用到材质上。最后,我们加载一个模型,并将定义好的材质应用到模型的所有网格上。

2024-08-08



<template>
  <div>
    <input type="file" @change="compressImage" multiple>
    <div v-for="(img, index) in compressedImages" :key="index">
      <img :src="img" alt="Compressed Image">
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      compressedImages: []
    };
  },
  methods: {
    compressImage(event) {
      this.compressImages(event.target.files);
    },
    compressImages(files) {
      files.forEach(file => {
        if (file.type.match(/image.*/)) {
          this.compressImageFile(file, this.convertToImage, this.compressAndResize);
        } else {
          console.log('Not an image file');
        }
      });
    },
    compressImageFile(file, ...funcs) {
      const promise = new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = e => {
          resolve(e.target.result);
        };
        reader.onerror = error => {
          reject(error);
        };
        reader.readAsDataURL(file);
      });
 
      promise.then(image => {
        funcs.reduce((promise, func) => promise.then(func), image);
      });
    },
    convertToImage(dataUrl) {
      return fetch(dataUrl)
        .then(response => response.blob())
        .then(blob => createImageBitmap(blob));
    },
    compressAndResize(image) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const width = image.width;
      const height = image.height;
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(image, 0, 0, width, height);
      return canvas.toDataURL('image/jpeg', 0.7);
    }
  }
};
</script>

这段代码使用Vue.js创建了一个简单的用户界面,其中包含一个文件输入框和一个用于展示压缩后图片的列表。当用户选择文件后,compressImage 方法被触发,它调用 compressImages 方法,后者对每个选中的图片文件进行压缩处理。compressImageFile 方法用于处理文件读取和压缩过程的异步操作,convertToImagecompressAndResize 分别用于将文件转换为图片并进行压缩。

2024-08-08



// nuxt.config.js
 
module.exports = {
  // ... 其他配置
 
  env: {
    customEnvVar: process.env.CUSTOM_ENV_VAR || 'default value'
  },
 
  // 在插件中使用环境变量
  plugins: [
    '~/plugins/myPlugin.js'
  ],
 
  // 在组件中使用环境变量
  // 在组件中可以直接通过process.env来访问环境变量
}
 



// myPlugin.js
 
export default ({ app }, inject) => {
  // 使用环境变量
  console.log(app.env.CUSTOM_ENV_VAR); // 输出:'default value' 或者用户设置的值
};

在这个例子中,我们在nuxt.config.js中定义了一个环境变量customEnvVar,并且为它设置了一个默认值。如果在运行时没有通过环境变量导出CUSTOM_ENV_VAR,Nuxt.js将会使用默认值。然后我们创建了一个插件myPlugin.js,在插件中我们可以通过Nuxt的上下文访问这个环境变量。这展示了如何在Nuxt.js中配置和使用环境变量。

2024-08-08

首先确保你的系统已经安装了Node.js和npm。

  1. 使用npm安装软件:



npm install <package_name>

<package_name> 替换为你想要安装的软件包名。

  1. 安装Vue的脚手架(Vue CLI):



npm install -g @vue/cli
  1. 使用Vue CLI创建一个新项目:



vue create <project_name>

<project_name> 替换为你的项目名。

这些命令需要在命令行(例如:终端、命令提示符、PowerShell)中运行。

2024-08-08

在JavaScript中,数组去重可以通过多种方法实现。以下是9种常见的去重方法:

  1. 使用 Set
  2. 使用 filter 和 indexOf
  3. 使用 reduce
  4. 使用 Map 或 Object
  5. 使用 Recurse
  6. 使用 Array.from 和 new Set
  7. 使用 for 循环和 includes
  8. 使用 while 循环和 splice
  9. 使用 sort 和 last

以下是每种方法的示例代码:

  1. 使用 Set



const array = [1, 2, 1, 3, 5, 5, 4];
const uniqueArray = [...new Set(array)];
  1. 使用 filter 和 indexOf



const array = [1, 2, 1, 3, 5, 5, 4];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
  1. 使用 reduce



const array = [1, 2, 1, 3, 5, 5, 4];
const uniqueArray = array.reduce((acc, current) => {
  if (acc.indexOf(current) === -1) {
    acc.push(current);
  }
  return acc;
}, []);
  1. 使用 Map 或 Object



const array = [1, 2, 1, 3, 5, 5, 4];
const uniqueArray = [];
const check = {};
array.forEach(item => {
  if (!check[item]) {
    check[item] = true;
    uniqueArray.push(item);
  }
});
  1. 使用 Recurse



const array = [1, 2, 1, 3, 5, 5, 4];
 
function removeDuplicates(arr, index) {
  if (index >= arr.length) return arr;
  if (arr.indexOf(arr[index]) !== index) {
    arr.splice(index, 1);
  }
  return removeDuplicates(arr, index + 1);
}
 
const uniqueArray = removeDuplicates(array.slice(), 0);
  1. 使用 Array.from 和 new Set



const array = [1, 2, 1, 3, 5, 5, 4];
const uniqueArray = Array.from(new Set(array));
  1. 使用 for 循环和 includes



const array = [1, 2, 1, 3, 5, 5, 4];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
  if (!uniqueArray.includes(array[i])) {
    uniqueArray.push(array[i]);
  }
}
  1. 使用 while 循环和 splice



const array = [1, 2, 1, 3, 5, 5, 4];
for (let i = 0; i < array.length; i++) {
  while (array.indexOf(array[i]) !== array.lastIndexOf(array[i]) && array.indexOf(array[i]) !== i) {
    array.splice(array.indexOf(array[i]), 1);
  }
}
  1. 使用 sort 和 last



const array = [1, 2, 1, 3, 5, 5, 4];
array.sort();
for (let i = 0; i < array.length - 1; i++) {
  if (array[i] 
2024-08-08

这个问题似乎是在寻求一个关于Node.js的旅游管理系统或者学术项目的源代码。在Stack Overflow上,我们通常不提供完整的源代码,但我可以提供一个简单的Node.js服务器框架作为示例,该框架可以作为旅游管理系统的起点。




const express = require('express');
const app = express();
const port = 3000;
 
// 设置模板引擎
app.set('view engine', 'ejs');
 
// 主页路由
app.get('/', (req, res) => {
  res.render('index', { title: '主页' });
});
 
// 登录路由
app.get('/login', (req, res) => {
  res.render('login', { title: '登录' });
});
 
// 注册路由
app.get('/register', (req, res) => {
  res.render('register', { title: '注册' });
});
 
// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

在这个简单的示例中,我们使用Express框架创建了一个Node.js服务器,并定义了三个路由:主页、登录和注册。这些可以作为旅游管理系统的起点,并且可以根据需求扩展。记得要安装Express (npm install express) 和EJS模板引擎 (npm install ejs) 来运行这个示例。

请注意,这只是一个基础框架,实际的旅游管理系统需要更复杂的功能,如用户认证、管理旅游产品、订单处理等。这个示例旨在展示如何开始构建一个简单的Node.js应用程序。

2024-08-08

在macOS中,你可以使用nvm(Node Version Manager)来管理和切换不同版本的Node.js。以下是安装nvm和切换Node.js版本的步骤:

  1. 安装nvm:

    打开终端,并运行以下命令:

    
    
    
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
    # 或者使用wget:
    wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  2. 安装完成后,关闭并重新打开终端,或者运行以下命令来启用nvm

    
    
    
    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
  3. 列出所有可用的Node.js版本:

    
    
    
    nvm ls-remote
  4. 安装你想要的Node.js版本,例如安装Node.js 14.17.0:

    
    
    
    nvm install 14.17.0
  5. 切换到特定版本的Node.js,例如切换到Node.js 14.17.0:

    
    
    
    nvm use 14.17.0
  6. 如果你想设置默认的Node.js版本:

    
    
    
    nvm alias default 14.17.0
  7. 验证当前使用的Node.js版本:

    
    
    
    node -v

以上步骤可以帮助你在macOS上管理和切换不同版本的Node.js。

2024-08-08

在JavaScript中,实现Excel的读取和展示通常需要使用第三方库,例如SheetJS js-xlsx库。对于导出Excel,可以使用SheetJS库进行操作。

以下是使用SheetJS库读取和展示Excel文件的示例代码:




// 引入SheetJS库
const XLSX = require('xlsx');
 
// 读取Excel文件
function readExcel(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, {type: 'array'});
 
    // 假设我们只读取第一个工作表
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
 
    // 在这里处理json数据,例如显示在表格中
    console.log(json);
  };
  reader.readAsArrayBuffer(file);
}
 
// 用于文件输入的DOM元素
const inputElement = document.getElementById('input-excel');
inputElement.addEventListener('change', function(e) {
  const file = e.target.files[0];
  readExcel(file);
});

导出Excel的示例代码:




// 导出Excel
function exportToExcel(data, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  
  const excelBuffer = XLSX.write(workbook, {bookType: 'xlsx', type: 'array'});
  const dataBlob = new Blob([excelBuffer], {type: ''});
  FileSaver.saveAs(dataBlob, fileName + '.xlsx');
}
 
// 假设我们有一些数据需要导出
const dataToExport = [
  { name: 'Alice', email: 'alice@example.com' },
  { name: 'Bob', email: 'bob@example.com' }
];
 
// 触发导出操作
exportToExcel(dataToExport, 'users');

注意:上述代码示例中使用了FileReader和SheetJS库来处理文件读取和Excel操作,以及FileSaver库来实现Excel的导出。在实际应用中,你需要确保这些库已经通过npm或其他方式安装到你的项目中。

2024-08-08



// 引入Calendar.js库
<script src="path/to/calendar.js"></script>
 
// 创建一个日历实例,并绑定到DOM元素
<div id="myCalendar"></div>
<script>
  var calendar = new Calendar({
    element: document.getElementById('myCalendar'), // 绑定的DOM元素
    type: 'date', // 日历类型:日期选择
    weekStart: 1, // 一周开始于星期一
    format: 'YYYY-MM-DD' // 日期格式化字符串
  });
</script>

这个例子展示了如何创建一个基本的日期选择日历,并将其绑定到页面上的一个div元素。通过设置type'date',用户可以选择一个日期。weekStart属性设置为1,表示一周从星期一开始,format属性定义了日期的输出格式。这个例子简洁地展示了如何使用Calendar.js库创建一个实用的日历组件。

2024-08-08



const WebSocket = require('ws');
 
// 创建WebSocket服务器实例,监听端口3000
const wss = new WebSocket.Server({ port: 3000 });
 
wss.on('connection', function connection(ws) {
  // 当客户端发送消息时触发
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
 
    // 将接收到的消息发送回客户端
    ws.send('something');
  });
 
  // 当WebSocket连接关闭时触发
  ws.on('close', function close() {
    console.log('disconnected');
  });
 
  // 当出现错误时触发
  ws.on('error', function error(e) {
    console.log('error: %s', e);
  });
});
 
console.log('WebSocket server is running on ws://localhost:3000');

这段代码创建了一个WebSocket服务器,监听3000端口。当有客户端连接时,它会打印出连接信息,并将接收到的消息回传给客户端。同时,它还处理了关闭事件和错误事件。这个例子简单直观地展示了如何使用ws模块创建一个基本的WebSocket服务器。