JS17

案例:日历
案例: 评分
案例:封装运动函数
案例:简易轮播图

知识点:事件默认行为
onclick 点击
onpaste 粘贴
oncopy 复制
oncontextmenu 鼠标右键

如何阻止默认行为?
e.preventDefault();或者
return false;

### 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、付费专栏及课程。

余额充值