翼度科技»论坛 编程开发 JavaScript 查看内容

threejs安装与开始

9

主题

9

帖子

27

积分

新手上路

Rank: 1

积分
27
安装导入

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)
  4. scene.add(cube)
  5. 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)
  6. scene.add(cube)
  7. camera.position.z = 5function animate() {
  8.   requestAnimationFrame(animate)
  9.   cube.rotation.x += 0.1
  10.   cube.rotation.y += 0.1
  11.   renderer.render(scene, camera)
  12. }
  13. animate()
复制代码
来源:https://www.cnblogs.com/tingzhong/p/17741843.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具