第一天学习threejs
threejs下载地址:
引入方法
1 | <script type="module"> |
Scene:
场景对象
创建场景
1 | var scene = new THREE.Scene() |
Camera:
摄像机对象
摄像机分为很多种,例如 远景相机 正交相机
摄像机参数:(fov,aspect ratio,near,far)
可视角度,宽高比,近截面,远截面
创建摄像机
1 | var camera=new Three.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000) |
renderer:
渲染器对象
创建webGL渲染器
1 | var renderer=new WebGLRenderer() |
创建完成之后,会存储在renderer的domElement中
向body中插入渲染器
1 | document.body.appendChild(domElement) |
然后设置渲染器的画布大小
1 | renderer.setSize(window.innerWidth,window.innerHeight) |
创建一个立方体
1 | var geometry=new THREE.BoxGeometry(1,1,1) |
创建一个材质
1 | var material=new THREE.MeshBasicMaterial({color:0x00ff00}) |
将立方体和材质放在一个网格内
创建网格
1 | var cube =new THREE.Mesh(geomerty,material) |
在画布内添加这个已经组合起来的立方体
1 | scene.add(cube) |
现在立方体和摄像机贴在了一起,将摄像机的z轴调整,距离立方体远点
1 | Camera.position.z=1 |
然后渲染器渲染(场景,摄像机)
1 | renderer.render(scene,camera) |
最后设置立方体旋转
这里利用到了window全局对象上挂载的requestAnimationFrame(callback)函数,
他会在浏览器切换页面时自动暂停动画,并且动画是按照显示器的帧率来的
1 | function animate(){ |
完整代码:
1 |
|
- 标题: 第一天学习threejs
- 作者: Voun
- 创建于 : 2024-09-29 15:52:00
- 更新于 : 2024-09-30 00:30:03
- 链接: http://www.voun.top/2024/09/29/26-threejs学习01/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论