demo案例
方法签名
object.lookAt(target)
参数
target：目标点的坐标，可以是一个 Three.js 的Vector3对象，也可以是包含x、y、z坐标的普通 JavaScript 对象。
返回值
该方法没有返回值。
功能
该方法将当前对象的 z 轴指向目标点，并调整对象的旋转使其朝向目标点。具体来说，该方法会根据对象当前的位置和目标点的位置，计算出一个新的旋转方向，然后将当前对象的旋转调整为这个方向。
使用示例
// 创建一个对象
const object = new THREE.Object3D();
// 设置对象的位置
object.position.set(0, 0, 0);
// 创建一个目标点
const target = new THREE.Vector3(10, 10, 10);
// 让对象朝向目标点
object.lookAt(target);
在上面的示例中，object 对象将会朝向坐标为 (10, 10, 10) 的目标点。
所有源码
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js misc - lookAt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
background-color: #fff;
color: #444;
}
a {
color: #08b;
}
</style>
</head>
<body>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Object3D.lookAt() example</div>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js", // 导入 three.js 库文件
"three/addons/": "./jsm/" // 导入 three.js 的附加模块
}
}
</script>
<script type="module">
import * as THREE from 'three'; // 导入 three.js 库
import Stats from 'three/addons/libs/stats.module.js'; // 导入性能统计模块
let camera, scene, renderer, stats;
let sphere;
let mouseX = 0, mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove ); // 监听鼠标移动事件
init(); // 初始化
animate(); // 开始动画循环
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 ); // 创建透视相机
camera.position.z = 3200; // 设置相机位置
scene = new THREE.Scene(); // 创建场景
scene.background = new THREE.Color( 0xffffff ); // 设置场景背景色
sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() ); // 创建球体
scene.add( sphere ); // 将球体添加到场景中
const geometry = new THREE.CylinderGeometry( 0, 10, 100, 12 ); // 创建圆柱几何体
geometry.rotateX( Math.PI / 2 ); // 旋转几何体
const material = new THREE.MeshNormalMaterial(); // 创建材质
for ( let i = 0; i < 1000; i ++ ) { // 创建1000个随机位置的圆柱体
const mesh = new THREE.Mesh( geometry, material ); // 创建圆柱体
mesh.position.x = Math.random() * 4000 - 2000; // 设置随机位置
mesh.position.y = Math.random() * 4000 - 2000;
mesh.position.z = Math.random() * 4000 - 2000;
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 2; // 设置随机缩放
scene.add( mesh ); // 将圆柱体添加到场景中
}
renderer = new THREE.WebGLRenderer( { antialias: true } ); // 创建 WebGL 渲染器
renderer.setPixelRatio( window.devicePixelRatio ); // 设置像素比
renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器大小
document.body.appendChild( renderer.domElement ); // 将渲染器添加到页面中
stats = new Stats(); // 创建性能统计对象
document.body.appendChild( stats.dom ); // 将性能统计对象添加到页面中
window.addEventListener( 'resize', onWindowResize ); // 监听窗口大小变化事件
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2; // 计算窗口一半的宽度
windowHalfY = window.innerHeight / 2; // 计算窗口一半的高度
camera.aspect = window.innerWidth / window.innerHeight; // 设置相机的宽高比
camera.updateProjectionMatrix(); // 更新相机投影矩阵
renderer.setSize( window.innerWidth, window.innerHeight ); // 更新渲染器大小
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 10; // 计算鼠标在窗口中的位置
mouseY = ( event.clientY - windowHalfY ) * 10;
}
function animate() {
requestAnimationFrame( animate ); // 请求执行下一帧动画
render(); // 渲染场景
stats.update(); // 更新性能统计信息
}
function render() {
const time = Date.now() * 0.0005; // 计算时间
sphere.position.x = Math.sin( time * 0.7 ) * 2000; // 计算球体位置
sphere.position.y = Math.cos( time * 0.5 ) * 2000;
sphere.position.z = Math.cos( time * 0.3 ) * 2000;
for ( let i = 1, l = scene.children.length; i < l; i ++ ) { // 循环遍历场景中的物体
scene.children[ i ].lookAt( sphere.position ); // 使物体朝向球体
}
camera.position.x += ( mouseX - camera.position.x ) * .05; // 相机位置跟随鼠标
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position ); // 相机朝向场景
中心
renderer.render( scene, camera ); // 渲染场景
}
</script>
</body>
</html>
本内容来源于小豆包，想要更多内容请跳转小豆包 》
