PerspectiveCamera 透视相机

例:

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height,1,1000);
复制代码

  构造函数

  PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

  fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

这些参数一起定义了摄像机的viewing frustum（视锥体）
   正交相机（OrthographicCamera）

例:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
复制代码

  构造器

  OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

  left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

这些参数一起定义了摄像机的viewing frustum（视锥体）。
   让相机跟随鼠标移动

   首先监听鼠标事件 window.addEventListener 中的 mousemove利用 这个方法我们可以得到当我们鼠标移动的时候XY 坐标

let cursor={
    x:0,
    y:0
}
window.addEventListener('mousemove',function(event){
  cursor.x=event.clientX/sizes.width-0.5       
 //按照 视口大小来渲染比例 -0.5是为了让其可以有正负值
  cursor.y=-(event.clientY/sizes.height-0.5)
  console.log(cursor)
})
复制代码

 将XY带入 camera坐标中

const tick=()=>{
  camera.position.x=cursor.x*3;
  camera.position.y=cursor.y*3;
  camera.lookAt(new THREE.Vector3())    
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick)
}
tick()
复制代码

利用正弦余弦定理来设置旋转大小的值

const tick=()=>{
  camera.position.x=Math.sin(cursor.x*Math.PI*2)*3;
  camera.position.z=Math.cos(cursor.x*Math.PI*2)*3;
  camera.position.y=cursor.y*5;
  // camera.lookAt(new THREE.Vector3())
  camera.lookAt(mesh.position)
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick)
}
tick()
复制代码

效果:

import "./style.css";import * as THREE from "three";import gsap from 'gsap'const scene = new THREE.Scene();const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });const mesh = new THREE.Mesh(geometry, material);scene.add(mesh);const sizes = {  width: 800,  height: 600,};let cursor={  x:0,  y:0}window.addEventListener('mousemove',function(event){  cursor.x=event.clientX/sizes.width-0.5  cursor.y=-(event.clientY/sizes.height-0.5)  console.log(cursor)})const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);camera.position.z = 3;scene.add(camera);const canvas = document.querySelector("canvas.webgl");const renderer = new THREE.WebGLRenderer({  canvas,});renderer.setSize(sizes.width, sizes.height);// gsap.to(mesh.rotation,{duration:1,delay:1,y:2})const tick=()=>{
  camera.position.x=Math.sin(cursor.x*Math.PI*2)*3;
  camera.position.z=Math.cos(cursor.x*Math.PI*2)*3;
  camera.position.y=cursor.y*5;
  // camera.lookAt(new THREE.Vector3())
  camera.lookAt(mesh.position)
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick)
}
tick()
复制代码

 OrbitControls 轨道控制

   动态观察控件允许相机围绕目标动态观察。 要使用它，就像/examples目录中的所有文件一样，您必须将该文件单独包含在您的HTML中。
 
  Constructor OrbitControls( object : Camera, domElement : HTMLDOMElement ) object: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself. domElement: (optional) The HTML element used for event listeners. By default this is the whole document, however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
  翻译
构造函数 OrbitControls( object : Camera，domElement : HTMLDOMElement)
  @param | object必选)要控制的摄像机。摄像机不能是另一个对象的子对象，除非该对象是场景本身。
  @param | domElement可选)用于事件侦听器的HTML元素。默认情况下，这是整个文档，但是如果您只想控制特定的元素(例如画布)，您可以在这里指定。
   在webpack 中引入示例:

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
const controls =new OrbitControls( camera, renderer.domElement );
//controls.update() must be called after any manual changes to the camera's transform
controls.update();
复制代码

完整代码: 

import "./style.css";
import * as THREE from "three";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import gsap from 'gsap'
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const sizes = {
  width: 800,
  height: 600,
};
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3;
scene.add(camera);
const canvas = document.querySelector("canvas.webgl");
const renderer = new THREE.WebGLRenderer({
  canvas,
});
renderer.setSize(sizes.width, sizes.height);
var controls =new OrbitControls( camera, canvas );
//controls.update() must be called after any manual changes to the camera's transform
controls.update();
// gsap.to(mesh.rotation,{duration:1,delay:1,y:2})
const tick=()=>{
 
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick)
}
tick()
复制代码

效果:

阻尼(衰减) enableDamping
 

   Controls.enableDamping=true 
  
  .enableDamping : Boolean Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Default is false. Note that if this is enabled, you must call .update () in your animation loop.
  。enableDamping:布尔值 设定为true以启用阻尼(惯性)，这可用于给控件一种重量感。默认值为false。 请注意，如果启用了此选项，您必须调用。动画循环中的update()。

const controls =new OrbitControls( camera, canvas );
controls.enableDamping=true    //开启衰弱
// gsap.to(mesh.rotation,{duration:1,delay:1,y:2})
const tick=()=>{
 
  controls.update();//每一帧都需要更新
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick)
}
tick()
复制代码

重点每一帧都需要去更新 controls.update()
效果:

 最后推荐看一遍文档来熟悉其他API

three.js中文文档

来源：SketchUpBBS
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

扫一扫

学习了，谢谢分享、、、

锄禾日当午，发帖真辛苦。

帮帮顶顶！！

小手一抖，积分到手！

感谢分享！

帮你顶下哈！！

好帖，来顶下

相当不错，感谢无私分享精神！