three.js学习:点光源+动画的实现
2024-09-12 20:20:00
与前几个教程类似,场景和相机等设置就不再重复声明了。这里只列出新学的内容。
1、圆柱体(圆锥体)的初始化
function initObject() { var geometry = new THREE.CylinderGeometry(0, 10, 50); var material = new THREE.MeshLambertMaterial({ color: 0x483D8B }); cylinder = new THREE.Mesh(geometry, material); cylinder.rotation.x = 0.15 * Math.PI; scene.add(cylinder); }
new THREE.CylinderGeometry的三个参数含义依次为:圆柱体上平面的圆的半径、圆柱体下平面的圆的半径、圆柱体的长。
2、点光源
var light; function initLight() { light = new THREE.PointLight(0xffffff); light.position.set(0, 0, 200); scene.add(light); }
点光源的使用可以使得3D图形具有立体感,主要体现在阴影的效果方面,如下图:
3、动画效果的实现
function animation3D() { cylinder.position.x -= 0.2; renderer.render(scene, camera); requestAnimationFrame(animation3D); }
修改相机的位置后,需要重新渲染,否则不生效。不断循环修改相机的位置,即可形成动画的效果。
最新文章
- 12月8日phpcms添加子栏目后的读取
- useful tips for win7--close the noise volume(关掉win7开机、系统操作的声音)
- EC笔记,第一部分:3.尽量使用const
- iOS并发编程指南之同步
- ORM之PetaPoco入门(一)--Petapoco简介
- 使用grub硬盘重装ubuntu
- css position 相对定位
- ZOJ 3601 Unrequited Love 【STL__pair_的应用】
- HTML5 开发APP
- scrolling 优化 避免卡顿
- Postgresql 启动could not create listen socket for ";localhost";错误的解决
- boost学习目录
- C# 关于X86/X64/AnyCpu 的关系
- React 记录(5)
- 常用vi命令
- SQL Server死锁的解决过程
- 设置头像、商品、轮播图为背景图时需要的css
- 调用微信的扫一扫功能详解说明---(java 排坑版)
- castle动态代理的使用
- 42. Trapping Rain Water *HARD*