`Object3D.lookAt()` 是 Three.js 中 `Object3D` 类的一个方法,用于让一个对象朝向指定的目标点。

demo案例

方法签名

javascript 复制代码
object.lookAt(target)

参数

  • target:目标点的坐标,可以是一个 Three.js 的 Vector3 对象,也可以是包含 xyz 坐标的普通 JavaScript 对象。

返回值

该方法没有返回值。

功能

该方法将当前对象的 z 轴指向目标点,并调整对象的旋转使其朝向目标点。具体来说,该方法会根据对象当前的位置和目标点的位置,计算出一个新的旋转方向,然后将当前对象的旋转调整为这个方向。

使用示例

javascript 复制代码
// 创建一个对象
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) 的目标点。

所有源码

html 复制代码
<!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>

本内容来源于小豆包,想要更多内容请跳转小豆包 》

相关推荐
I_Am_Me_15 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
重生之我是数学王子25 分钟前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
℘团子এ26 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
Ai 编码助手27 分钟前
使用php和Xunsearch提升音乐网站的歌曲搜索效果
开发语言·php
学习前端的小z31 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
神仙别闹39 分钟前
基于C#和Sql Server 2008实现的(WinForm)订单生成系统
开发语言·c#
XINGTECODE40 分钟前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue