1. 首页
  2. 分类
  3. 前端技术
three.js如何实现简易3D机房？点击事件+呼吸灯效果
System
2024-08-08
所有,javascript



// 引入必要的Three.js组件
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
// 场景、相机、渲染器以及对象
let scene, camera, renderer, mesh, controls;
 
// 初始化场景、相机和渲染器
function initScene() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera.position.set(0, 5, 10);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
}
 
// 加载3D模型
function loadModel() {
    const loader = new GLTFLoader();
    loader.load('models/machine_room.glb', (gltf) => {
        mesh = gltf.scene;
        scene.add(mesh);
    });
}
 
// 添加灯光
function addLights() {
    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);
}
 
// 添加呼吸灯效果
function addLightsEffect() {
    const lights = mesh.getObjectByName('Lights');
    lights.traverse(function(child) {
        if (child.isMesh) {
            child.castShadow = true;
            setInterval(function() {
                child.material.emissive.setHex(Math.random() * 0xffffff);
            }, 1000);
        }
    });
}
 
// 监听鼠标点击事件
function addClickEvent() {
    renderer.domElement.addEventListener('click', function() {
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(scene.children);
        if (intersects.length > 0) {
            // 如果点击的是机房门，执行相关操作
            if (intersects[0].object.name === 'door') {
                // 这里可以添加门开关的逻辑处理
                console.log('门被点击了！');
            }
        }
    }, false);
}
 
// 初始化轨道控制器
function addOrbitControls() {
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
- 阅读更多 -
为什么js无法通过contentDocument获取到iframe内容
System
2024-08-08
所有,javascript

JavaScript 无法通过 contentDocument 获取到 iframe 内容的原因可能有几个：

  1. 跨域限制：如果 iframe 内容来自一个与父文档不同的域，出于安全考虑，浏览器会阻止访问 contentDocument。
  2. 浏览器兼容性：在某些情况下，即使是同源 iframe，也可能因为浏览器的兼容性问题导致无法访问 contentDocument。
  3. iframe还未加载完成：如果 iframe 还未完全加载内容，contentDocument 也会是不可用的。

解决方法：

  • 检查跨域策略：确保 iframe 内容来自允许的域。如果跨域，可能需要通过同源服务器代理来间接获取内容。
  • 检查浏览器兼容性：确保使用的方法在目标浏览器上有效。
  • 确保iframe加载完成：可以在 iframe 加载完成后再尝试访问 contentDocument。可以通过监听 load 事件来知道 iframe 何时加载完成。

示例代码：




var iframe = document.getElementById('myIframe');
 
iframe.onload = function() {
    var contentDocument = iframe.contentDocument || iframe.contentWindow.document;
    // 现在可以安全地使用contentDocument了
};

以上代码首先获取了 id 为 myIframe 的 iframe 元素，然后设置了一个 onload 事件处理函数，在 iframe 加载完成后再尝试访问 contentDocument。这样可以确保不会在 iframe 未完全加载内容时尝试访问它。

- 阅读更多 -
html + css + js 实现简易轮播图
System
2024-08-08
所有,javascript

以下是一个使用HTML、CSS和JavaScript实现的简易轮播图的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Slider</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
  }
  .slider img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .slider img.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img class="active" src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
 
<script>
window.onload = function() {
  var currentIndex = 0;
  var images = document.querySelectorAll('.slider img');
  var imageCount = images.length;
 
  setInterval(function() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % imageCount;
    images[currentIndex].classList.add('active');
  }, 3000); // Change image every 3 seconds
};
</script>
 
</body>
</html>

这段代码实现了一个简单的轮播图功能。它使用了setInterval函数来定期切换图片，并使用CSS进行样式设置。每张图片都是<img>标签，并且都在.slider容器内。JavaScript脚本用于切换.active类以显示当前图片，并隐藏其他图片。这个例子假设有三张图片，分别命名为image1.jpg、image2.jpg和image3.jpg放在与HTML同一个文件夹内。

- 阅读更多 -
【JS+H5+CSS实现烟花特效】
System
2024-08-08
所有,javascript

以下是一个简单的烟花特效实现的代码示例：




<!DOCTYPE html>
<html>
<head>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
  }
  .confetti {
    --size-min: 1px;
    --size-max: 6px;
    --speed-min: 0.5s;
    --speed-max: 2s;
    --density: 2000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: confetti-animation linear infinite;
  }
  @keyframes confetti-animation {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(
        calc(
          (var(--size-max) - var(--size-min)) * 
            (random() - 0.5) * 2 + var(--size-min)
        ),
        calc(
          (var(--size-max) - var(--size-min)) * 
            (random() - 0.5) * 2 + var(--size-min) + 
          var(--size-max) * 2
        ),
        0
      );
      opacity: 0;
    }
  }
</style>
</head>
<body>
<div class="confetti" style="--size-min: 2px; --size-max: 4px; --speed-min: 0.2s; --speed-max: 1s; --density: 5000;"></div>
<script>
  const confetti = document.querySelector('.confetti');
  const random = (min, max) => Math.random() * (max - min) + min;
  const range = (min, max) => new Array(max - min + 1).fill(min).map((n, i) => n + i);
  const createConfetti = () => {
    const size = `${random(2, 6)}px`; // min and max size
    const speed = `${random(0.5, 2)}s`; // min and max animation duration
    const style = `
      width: ${size};
      height: ${size};
      background: rgba(255, 255, 255, ${random(0.2, 0.8)});
      animation-duration: ${speed};
      animation-delay: ${random(0, 10)}s;
    `;
    return `<div style="${style}"></div>`;
  };
  const density = confetti.style['--density'];
  const confettiCount = document.querySelectorAll('.confetti div').length;
  if (confettiCount < density) {
    const confettiFragments = range(density - confettiCount).map(createConfetti).join('');
    confetti.insertAdjacentHTML('beforeend', confettiFragments);
  }
</script>
</body>
</html>

这段代码会在页面上

- 阅读更多 -
vue、uniapp 使用crypto-js库进行AES加密
System
2024-08-08
所有,vue.js

在Vue或UniApp项目中使用CryptoJS库进行AES加密，首先需要安装CryptoJS库。

  1. 安装CryptoJS库：



npm install crypto-js
  1. 在Vue或UniApp组件中引入CryptoJS库并使用AES加密功能：



// 引入CryptoJS库
import CryptoJS from 'crypto-js'
 
export default {
  methods: {
    encryptData(data) {
      // 设置密钥和向量
      const key = CryptoJS.enc.Utf8.parse('1234567812345678');
      const iv = CryptoJS.enc.Utf8.parse('1234567812345678');
 
      // 数据需要是字符串
      const stringData = JSON.stringify(data);
 
      // 使用AES加密
      const encrypted = CryptoJS.AES.encrypt(stringData, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
 
      // 返回Base64编码的字符串
      return encrypted.toString();
    },
 
    decryptData(encryptedData) {
      // 解码Base64数据
      const base64Decrypted = CryptoJS.enc.Base64.parse(encryptedData);
 
      // 设置密钥和向量
      const key = CryptoJS.enc.Utf8.parse('1234567812345678');
      const iv = CryptoJS.enc.Utf8.parse('1234567812345678');
 
      // 使用AES解密
      const decrypted = CryptoJS.AES.decrypt({ ciphertext: base64Decrypted }, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
 
      // 将解密后的数据转换为字符串
      return decrypted.toString(CryptoJS.enc.Utf8);
    }
  }
}

在上述代码中，encryptData方法用于加密数据，而decryptData方法用于解密数据。密钥和向量需要保密，确保安全性。在实际应用中，应该从安全的地方获取这些密钥和向量，例如服务器端。

- 阅读更多 -
TransformControls 是 Three.js 中的一个类，用于在网页中进行 3D 场景中物体的交互式操作。
System
2024-08-08
所有,javascript

TransformControls 是 Three.js 中的一个类，它用于在 Web 页面上操作和变换 3D 场景中的物体。这个类提供了一种交互式的方式，允许用户在浏览器中通过鼠标或触摸操作来移动、旋转和缩放物体。

以下是一个简单的使用 TransformControls 的例子：




// 假设我们已经有了一个Three.js的场景(scene)和相机(camera)
// 创建一个渲染器并将其附加到DOM元素
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建TransformControls对象
const controls = new THREE.TransformControls(camera, renderer.domElement);
scene.add(controls);
 
// 加载一个模型（例如一个3D对象）
const loader = new THREE.GLTFLoader();
loader.load('path/to/model.glb', (gltf) => {
  scene.add(gltf.scene);
 
  // 当模型加载完成后，我们选中这个模型
  controls.attach(gltf.scene);
});
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update(); // 更新TransformControls的状态
}
animate();

在这个例子中，我们首先创建了一个Three.js场景和相机，然后创建了一个 TransformControls 对象并将其添加到场景中。我们使用 GLTFLoader 加载一个3D模型，并在模型加载完成后，我们用 controls.attach(object) 方法将模型与 TransformControls 关联起来。最后，我们进入一个渲染循环，在循环中我们调用 controls.update() 方法来更新 TransformControls 的状态。

- 阅读更多 -
nodejs用config库实现配置文件读取(详解)
System
2024-08-08
所有,javascript



// 引入Node.js内置的path模块用于处理路径
const path = require('path');
// 引入config库
const config = require('config');
 
// 获取默认配置文件的路径
const defaultConfigFile = path.join(__dirname, '..', 'config.json');
 
// 使用config库读取配置文件
const configData = config.util.loadFileConfigs(defaultConfigFile);
 
// 打印读取到的配置信息
console.log(configData);
 
// 获取特定配置项的值
const someSetting = config.get('someSetting');
console.log(someSetting);
 
// 输出配置文件中的数据库连接字符串
console.log(config.get('db.url'));

这段代码展示了如何使用Node.js中的config库来读取配置文件。首先，我们使用path.join来构造配置文件的路径。然后，我们使用config.util.loadFileConfigs方法来加载配置文件。最后，我们使用config.get方法来获取特定的配置项。这个例子简单明了地展示了如何使用config库，并且可以作为开发者在实际项目中使用配置文件的参考。

- 阅读更多 -
Three.js中的Raycasting技术：实现3D场景交互事件的Raycaster详解
System
2024-08-08
所有,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);
 
// 创建一个3D对象，例如一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建一个raycaster实例并设置光线
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
 
function onMouseClick(event) {
  // 将鼠标位置转换成归一化设备坐标(-1 到 +1)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
 
  // 使用相机和鼠标位置更新光线
  raycaster.setFromCamera(mouse, camera);
 
  // 计算物体和光线的交点
  const intersects = raycaster.intersectObjects(scene.children);
 
  for (const intersect of intersects) {
    // 对交集的物体进行操作，例如改变颜色
    intersect.object.material.color.set(0xff0000);
    // 渲染场景
    renderer.render(scene, camera);
  }
}
 
// 监听鼠标点击事件
window.addEventListener('click', onMouseClick, false);
 
// 渲染初始场景
renderer.render(scene, camera);

这段代码展示了如何在Three.js中使用Raycaster来处理鼠标点击事件。当用户点击屏幕时，代码会计算出从摄像机发出的光线，并检查这条光线与场景中的哪些物体相交。如果发生了碰撞，代码会改变碰撞的物体的颜色。这是一个基本的示例，但在实际应用中，可以在intersects数组中找到的物体信息可以用来触发更复杂的交互效果。

- 阅读更多 -
vue3引入three.js渲染3D模型图
System
2024-08-08
所有,javascript

在Vue 3中引入Three.js来渲染3D模型图，你可以按照以下步骤操作：

  1. 安装Three.js：



npm install three
  1. 创建一个Vue组件，并在mounted生命周期钩子中初始化Three.js场景、相机、渲染器和3D模型：



<template>
  <div ref="threeContainer"></div>
</template>
 
<script setup>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
const threeContainer = ref(null);
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);
threeContainer.value.appendChild(renderer.domElement);
 
let controls;
const loader = new GLTFLoader();
loader.load('path/to/your/model.glb', (gltf) => {
  scene.add(gltf.scene);
  gltf.scene.position.set(0, -2, 0);
  animate();
}, undefined, (error) => {
  console.error(error);
});
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls && controls.update();
}
 
onMounted(() => {
  controls = new OrbitControls(camera, renderer.domElement);
  animate();
});
</script>
 
<style>
/* 确保Three.js渲染区域全屏 */
div {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

在这个例子中，我们创建了一个Vue组件，在组件挂载后，使用GLTFLoader加载一个3D模型（.glb格式），并将其添加到Three.js的场景中。我们还初始化了相机和渲染器，并使用OrbitControls来允许用户通过鼠标滚轮和鼠标拖动来控制模型的视图。最后，我们在组件的mounted生命周期钩子中启动动画循环。

请确保替换path/to/your/model.glb为你的3D模型文件的实际路径。这个Vue组件可以被嵌入到你的Vue应用的任何页面中，以渲染3D模型。

- 阅读更多 -
使用js操作xpath
System
2024-08-08
所有,javascript

在JavaScript中，操作XPath通常是为了在DOM（文档对象模型）中查找特定的节点。然而，JavaScript的核心库不包含XPath解析器，因此你需要使用外部库，如xpath.js。

以下是使用xpath.js库来查找DOM中的节点的步骤：

  1. 引入xpath.js库。
  2. 使用document对象创建一个domHelper实例。
  3. 使用xpath.eval函数执行XPath表达式。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>XPath Example</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/xpath.js/dist/xpath.min.js"></script>
</head>
<body>
 
<div id="content">
    <p>Hello, World!</p>
</div>
 
<script type="text/javascript">
    // 引入xpath.js库
    // ...
 
    // 使用domHelper来查找节点
    var domHelper = xpath.domHelper;
    var select = xpath.select;
 
    // 获取页面内容区域的DOM元素
    var content = document.getElementById('content');
 
    // 使用XPath选择器查找子节点
    var result = select("p", content)[0]; // 返回第一个匹配的节点
 
    // 输出结果
    console.log(result);
</script>
 
</body>
</html>

在这个例子中，我们使用了xpath.js库来查找ID为content的元素下的所有<p>元素。这个库需要通过CDN引入，或者你可以从npm安装。

请注意，xpath.js不是标准库的一部分，所以在使用之前你需要确认它已经正确加载。如果你的项目不允许使用外部库，你可能需要寻找其他解决方案，如使用document.evaluate方法（如果浏览器支持）。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号