Three 探索 03

🗡

这一节我接触了Webpack

vue-cli  内部用的 是 webpack  运行在 node 环境
vite 运行在 浏览器环境，依赖 es6模块化  node  语法，直接在 vite里面 跑，会报错~

首先安装Node环境

---

Webpack支持从js里导入css文件
但原生的js就无法做到

并且允许直接引入npm库的在线JS库，哦这真的很好用

import './style.css'
import * as THREE from 'three'
console.log(THREE.PerspectiveCamera);
//我可没有安装three，但是依然可以引用成功

---

位置的改变应该放在 渲染器正式工作之前

---

向位置传递数据 使用
物体.position.distanceTo(一个向量)

---

重置坐标
物体.position.normlize()

---

设置物体的坐标有两种方法
物体.position.x = 一个数
物体.position.set(x（数）,y,z)

---

显示xyz坐标轴
new THREE.AxesHelper()

---

绕着X轴旋转：
物体.rotation.x
（逆时针）
旋转通常结合 Math.PI

多个旋转调整xyz旋转的工作顺序
物体.rotation.reorder(‘YXZ’)

---

Threejs 相机对象 Camera 的 .lookAt() 方法用来设置相机对象看向的位置，比如在Threejs三维场景中通过相机对象.lookAt()方法指向场景中的一个球体，球体渲染出来后会显示在Canvas画布的正中间，.lookAt() 方法就是旋转相机对象以面向世界空间中的某个点，本质上改变的是相机对象的视图矩阵，具体点说是视图矩阵的旋转部分，

---

模块化 使用new Group()
可以把一堆东西封装在一个group同时调用

---

动画
最初的目的是调用函数

window.requestAnimationFrame(函数名字不带括号)
//这是原生JS 动画循环的函数

---

gsap动画库

gsap.to(mesh.position,{duration:1,delay:1,x:2})
//第一个参数物体的原位置，{持续，延迟，目的位置}