网页量子纠缠笔记

锈maker

已于 2024-01-04 00:58:47 修改

阅读量410

点赞数 9

文章标签：笔记 javascript

于 2024-01-04 00:58:18 首次发布

本文链接：https://blog.csdn.net/m0_62661793/article/details/135376152

版权

文章介绍了如何使用Three.js库在网页上创建3D动画，包括设置场景、相机、渲染立方体，以及如何监听和响应WebStorage的变化。还展示了如何在不同浏览器环境下实现Storage监听功能。

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

项目github地址：https://github.com/bgstaal/multipleWindow3dScene

作者：bgstaal

three.js

>>Three.js是一个跨浏览器的JavaScript库和应用程序接口（API），用于创建和显示动画的3D计算机图形在网页上。这个库提供了大量的3D图形功能，使得开发者能够在不需要深入了解WebGL的情况下，使用JavaScript来创建复杂的3D场景。

<!DOCTYPE html>  
<html>  
<head>  
    <title>My first three.js app</title>  
    <style>  
        body { margin: 0; }  
        canvas { display: block; }  
    </style>  
</head>  
<body>  
    <script src="https://threejs.org/build/three.js"></script>  
    <script>  
        var scene = new THREE.Scene();  
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
  
        var renderer = new THREE.WebGLRenderer();  
        renderer.setSize(window.innerWidth, window.innerHeight);  
        document.body.appendChild(renderer.domElement);  
  
        var geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体几何体  
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个基本材质，颜色为绿色  
        var cube = new THREE.Mesh(geometry, material); // 创建一个网格，将几何体和材质结合在一起  
        scene.add(cube); // 将网格添加到场景中  
  
        camera.position.z = 5; // 将相机向后移动一点，以便我们可以看到立方体  
  
        var animate = function () {  
            requestAnimationFrame(animate); // 循环渲染场景  
            cube.rotation.x += 0.01; // 每帧稍微旋转立方体  
            cube.rotation.y += 0.01;  
            renderer.render(scene, camera); // 使用相机和场景进行渲染  
        };  
        animate(); // 开始动画循环  
    </script>  
</body>  
</html>

绿色立方体

首先引入了Three.js库，然后设置了场景、相机和渲染器。接下来，创建了一个立方体几何体和一个基本材质，并将它们结合成一个网格对象，最后将网格添加到场景中。最后一部分是一个动画循环，不断更新立方体的旋转并重新渲染场景。

JS摄影机

<!DOCTYPE html>  
<html>  
<body>  
  
<video autoplay="true" id="videoElement">  
</video>  
  
<script>  
 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {  
  navigator.mediaDevices.getUserMedia({ video: true })  
    .then(function (stream) {  
      var videoElement = document.getElementById('videoElement');  
      videoElement.srcObject = stream;  
    })  
    .catch(function (error) {  
      console.log('Something went wrong: ' + error);  
    });  
} else {  
  console.log('Your browser doesn\'t support getUserMedia');  
}  
</script>  
  
</body>  
</html>

Storage监听

>>storage监听的主要用途是跟踪和响应Web Storage（包括sessionStorage和localStorage）中的数据变化。

当使用Web Storage API存储数据时，如果存储的数据发生变化，会触发window对象的storage事件。通过监听这个事件并指定相应的事件处理函数，可以定义当其他页面修改sessionStorage或localStorage中的值时所需要执行的操作。

示例代码

window.addEventListener("storage", function onStorageChange(event) {  
  console.log(event.key);  
});

在同一标签页内修改storage的值是无法监听到变化，可以通过在localStorage或sessionStorage的setItem方法中手动触发setItemEvent事件来实现监听

let originalSetItem = localStorage.setItem;  
localStorage.setItem = function(key, newValue) {  
  let setItemEvent = new Event('setItemEvent');  
  setItemEvent.newValue = newValue;  
  window.dispatchEvent(setItemEvent);  
  originalSetItem.apply(this, arguments);  
};  
// sessionStorage相同写法

另外，在IE浏览器中，StorageEvent对象保存在window.event里面。因此，在回调函数中需要判断参数e是否为StorageEvent对象，如果不是则从window.event中获取。