js17

1.动画

  (1)css样式提供了运动

   过渡的属性transition从一种情况到另一种情况叫过渡

   Transition:attr    time    linear  delay;

   Attr是变化的属性

   Time是花费的时间

   Linear变化的速度

   Delay是延迟

复习background:url()no-repeat  50% 50% red;

  background-image

  background-repeat

  background-position

  background-color

  (2.)js提供的运动

    元素的client   offset   scroll   三个系列

    clientWidth/clientHeight/clientTop/clientLeft

    offsetWidth/offsetHeight/offsetLeft/offsetTop/offsetParent

    scrollWidth/scrollHeight/scrollTop/scrollLeft

    这十三个属性,前面是一个是自读属性,scrollTop和scrollLeft是即可读也可写

  获取浏览器的body属性是有兼容的

  var dd=document.body || documenet.documentElement

  sccrollTop和scrollLeft的最小值是0

  句哦去body的整个文档的高

  document.body.scrollHeight || document.documentElement.scrollHeight

  获取浏览器一屏幕的高(浏览器的可视区)

  document.body.clientHeight || document.documentElement.clienHeight

  Window   下的两个事件

    onscroll当滚动条滚动的时候触发

    onresize当窗口发生改变时触发

转载于:https://www.cnblogs.com/LXW2002326/p/10038982.html

### Three.js 版本 17 的功能和更新 Three.js 是一个用于在网页上渲染 3D 图形的强大库。版本 17 的发布引入了一些关键的功能和改进,以下是一些主要的特性: #### 新增功能 - **WebGL2 支持**:从版本 17 开始,Three.js 提供了对 WebGL2 的实验性支持[^4]。这使得开发者可以利用更先进的图形功能,如多渲染目标、更复杂的着色器等。 - **材质优化**:在版本 17 中,`MeshStandardMaterial` 和其他材质得到了显著优化[^4]。这些优化提升了渲染性能,并允许开发者创建更加逼真的材质效果。 #### 更新和改进 - **动画系统增强**:版本 17 引入了更强大的动画系统,允许开发者更轻松地实现复杂的动画效果[^2]。例如,通过 `THREE.Clock` 类,可以精确控制对象的旋转和其他动态属性。 ```javascript const clock = new THREE.Clock(); function tick() { const elapsedTime = clock.getElapsedTime(); mesh.rotation.y = elapsedTime; renderer.render(scene, camera); } ``` - **几何体生成器改进**:版本 17 对几何体生成器进行了改进,使创建复杂几何形状变得更加简单和高效[^4]。 #### 已知问题和注意事项 - 在某些浏览器中,WebGL2 的支持可能不完全稳定。开发者需要确保目标用户使用的浏览器支持 WebGL2。 #### 示例代码 以下是一个简单的示例,展示如何在 Three.js 版本 17 中创建一个旋转的立方体: ```javascript 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.BoxBufferGeometry(); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const elapsedTime = clock.getElapsedTime(); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值