threejs安装与开始

用户军魂

安装导入

npm

1. npm i three

复制代码

导入

并非所有功能都在three，还需从子目录导入

1. // three模块
2. import * as three from 'three'
3. // 一些不在three模块的功能，这里是OrbitControls导入示例
4. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

复制代码

静态页面/CDN

three是一个esm模块，需要按模块导入方法导入，

1. // 不是所有浏览器都支持ems模块，这是一个esm模块兼容库

复制代码

npm包查看

build目录有5个js文件，大致分为three.js与three.module.js，three.js中提示已经弃用，现在应该使用three.module.js
开始

环境

场景

1. const scene = new three.Scene()

复制代码

相机

1. const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)

复制代码

相机有多种，这里是透视相机

• 视野角度。就是你能看到的场景范围
  
• 宽高比。注意不是宽高，是宽高比，宽高比及分辨率在渲染器设置
  
• 近视距。相机与目标物体小于此值，此物体将不会渲染
  
• 远视距。相机与目标物体大于此值，此物体将不会渲染
  

帧渲染器

1. const renderer = new three.WebGLRenderer()
2. renderer.setSize(window.innerWidth, window.innerHeight)
3. document.body.append(renderer.domElement)

复制代码

setSize 函数

• 宽
  
• 高
  
• 布尔。默认true，宽高既是高度也是分辨率。false 仅设置分辨率
  直接设置canvas的宽高后，就不用在这里设置宽高了，这里设置分辨率就行。
  

动画都是基于canvas标签的，示例中的renderer.domElement就是一个canvas标签，所以可以直接设置宽高。

动画编写

1. const geometry = new three.BoxGeometry(1, 1, 1)
2. const material = new three.MeshBasicMaterial({ color: 0xf1f1aa })
3. const cube = new three.Mesh(geometry, material)
5. scene.add(cube)
6. camera.position.z = 5

复制代码

• 形状。一个几何立体形状
  
• 材质。一个内置的普通材质
  
• 物体。创建物体对象
  
• 添加到场景
  
• 移动相机。任何物体在场景的初始位置都是(0, 0, 0)，包括相机，所以移动一下相机，不然看不到这个物体，当然，你也可以不移动相机，而去移动物体，这样
  

1. // camera.position.z = 5
2. cube.position.z = -5

复制代码

渲染动画

1. function animate() {
2.   requestAnimationFrame(animate)
3.   cube.rotation.x += 0.1
4.   cube.rotation.y += 0.1
5.   renderer.render(scene, camera)
6. }
7. animate()

复制代码

你将看到一个不断旋转的立方体。
rotation 是旋转属性
renderer.render() 是一次性的渲染器
requestAnimationFrame(callback) 是属于window的，辅助渲染动画的一次性方法。

• 因为一次性，所以需要将你的动画函数，传入它的回调参数，且每次都要调用它，以达到不断变化的动画效果。
  
• 我认为它和定时器的功能差不多，我进行尝试过
  

1. function animate() {
2.   cube.rotation.x += 0.1
3.   cube.rotation.y += 0.1
4.   renderer.render(scene, camera)
5. }
6. setInterval(() => {
7.   animate()
8. }, 20);

复制代码

不过它是js内置的用来专门渲染动画的，使用requestAnimationFrame()肯定更好
完整示例

1. import * as three from 'three'const scene = new three.Scene()const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)const renderer = new three.WebGLRenderer()
2. renderer.setSize(window.innerWidth, window.innerHeight)
3. document.body.append(renderer.domElement)const geometry = new three.BoxGeometry(1, 1, 1)
4. const material = new three.MeshBasicMaterial({ color: 0xf1f1aa })
5. const cube = new three.Mesh(geometry, material)
7. scene.add(cube)
8. camera.position.z = 5function animate() {
9.   requestAnimationFrame(animate)
10.   cube.rotation.x += 0.1
11.   cube.rotation.y += 0.1
12.   renderer.render(scene, camera)
13. }
14. animate()

复制代码

来源:https://www.cnblogs.com/tingzhong/p/17741843.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！