threejs(20)-AI寻路避障自动导航

已于 2024-02-16 12:15:45 修改
阅读量784 收藏 12
点赞数 10
文章标签： 3d
于 2024-01-27 14:23:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woyebuzhidao321/article/details/135881014
版权

一、使用yuka实现路径跟随

yuka官方文档：https://mugen87.github.io/yuka/

在这里插入图片描述

<script setup>
import * as THREE from "three";
import * as YUKA from "yuka";
// 导入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 10, 20);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建地面
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.5;
scene.add(plane);

// 创建灯光
const light = new THREE.SpotLight(0xffffff, 3, 100, Math.PI / 6, 0.5);
light.position.set(10, 40, 10);
light.castShadow = true;
scene.add(light);

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const time = new YUKA.Time();
requestAnimationFrame(function animate() {
  const delta = time.update().getDelta();
  controls.update();
  entityManager.update(delta);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
});

// 创建椎体
// const coneGeometry = new THREE.ConeGeometry(0.2, 1, 32);
// coneGeometry.rotateX(Math.PI / 2);
// const coneMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
// const cone = new THREE.Mesh(coneGeometry, coneMaterial);
// // cone.matrixAutoUpdate = false;
// cone.receiveShadow = true;
// cone.castShadow = true;
// scene.add(cone);

// 加载模型
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/");
loader.setDRACOLoader(dracoLoader);
loader.load("./model/car.gltf", function (gltf) {
  console.log(gltf);
  const car = gltf.scene;
  car.children[0].rotation.y = Math.PI / 2;
  car.children[0].scale.set(0.2, 0.2, 0.2);
  scene.add(car);
  vehicle.setRenderComponent(car, callback);
});

// 创建yuka的车辆
const vehicle = new YUKA.Vehicle();
vehicle.maxSpeed = 5;
// 设置车辆的渲染对象
// vehicle.setRenderComponent(cone, callback);
function callback(entity, renderComponent) {
  // console.log(entity, renderComponent);
  renderComponent.position.copy(entity.position);
  renderComponent.quaternion.copy(entity.rotation);
  // renderComponent.matrix.copy(entity.worldMatrix);
}

// 创建yuka的路径
const path = new YUKA.Path();
path.add(new YUKA.Vector3(0, 0, 0));
path.add(new YUKA.Vector3(0, 0, 10));
path.add(new YUKA.Vector3(10, 0, 10));
path.add(new YUKA.Vector3(10, 0, 0));
path.add(new YUKA.Vector3(0, 0, 0));
// 设置路径的循环模式
path.loop = true;

// 将路径当前的位置设置为车辆的位置
vehicle.position.copy(path.current());

// 跟随路径的行为
const followPathBehavior = new YUKA.FollowPathBehavior(path);
vehicle.steering.add(followPathBehavior);

// 保持在路径中行为
const onPathBehavior = new YUKA.OnPathBehavior(path, 0.1);
onPathBehavior.weight = 10;
vehicle.steering.add(onPathBehavior);

// 创建对实体管理对象
const entityManager = new YUKA.EntityManager();
entityManager.add(vehicle);

showPathLine(path);
function showPathLine(path) {
  console.log(path);
  const positions = [];
  for (let i = 0; i < path._waypoints.length; i++) {
    positions.push(
      path._waypoints[i].x,
      path._waypoints[i].y,
      path._waypoints[i].z
    );
  }
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(positions, 3)
  );
  const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
  const line = new THREE.Line(geometry, material);
  scene.add(line);
}
</script>

<template>
  <div></div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>

二、搜索目标前进与抵达 并避开障碍

在这里插入图片描述

<script setup>
import * as THREE from "three";
import * as YUKA from "yuka";
// 导入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 10, 20);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建地面
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.5;
scene.add(plane);

// 创建灯光
const light = new THREE.SpotLight(0xffffff, 3, 100, Math.PI / 6, 0.5);
light.position.set(10, 40, 10);
light.castShadow = true;
scene.add(light);

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const time = new YUKA.Time();
requestAnimationFrame(function animate() {
  const delta = time.update().getDelta();
  controls.update();
  entityManager.update(delta);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
});

// 创建椎体
// const coneGeometry = new THREE.ConeGeometry(0.2, 1, 32);
// coneGeometry.rotateX(Math.PI / 2);
// const coneMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
// const cone = new THREE.Mesh(coneGeometry, coneMaterial);
// // cone.matrixAutoUpdate = false;
// cone.receiveShadow = true;
// cone.castShadow = true;
// scene.add(cone);

// 加载模型
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/");
loader.setDRACOLoader(dracoLoader);
loader.load("./model/car.gltf", function (gltf) {
  console.log(gltf);
  const car = gltf.scene;
  car.children[0].rotation.y = Math.PI / 2;
  car.children[0].scale.set(0.2, 0.2, 0.2);
  scene.add(car);
  vehicle.setRenderComponent(car, callback);
});

// 创建yuka的车辆
const vehicle = new YUKA.Vehicle();
vehicle.maxSpeed = 5;
// 设置车辆的渲染对象
// vehicle.setRenderComponent(cone, callback);
function callback(entity, renderComponent) {
  // console.log(entity, renderComponent);
  renderComponent.position.copy(entity.position);
  renderComponent.quaternion.copy(entity.rotation);
  // renderComponent.matrix.copy(entity.worldMatrix);
}

// 创建目标小球
const sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff00ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.receiveShadow = true;
sphere.castShadow = true;
scene.add(sphere);
// 创建目标
const target = new YUKA.GameEntity();
target.setRenderComponent(sphere, callback);

target.position.set(Math.random() * 20 - 10, 0, Math.random() * 20 - 10);

const entityManager = new YUKA.EntityManager();
entityManager.add(vehicle);
entityManager.add(target);

// 到达行为
const arriveBehavior = new YUKA.ArriveBehavior(target.position);
vehicle.steering.add(arriveBehavior);

// 搜索目标行为
// const seekBehavior = new YUKA.SeekBehavior(target.position);
// vehicle.steering.add(seekBehavior);

// setInterval(() => {
//   target.position.set(Math.random() * 20 - 10, 0, Math.random() * 20 - 10);
// }, 2000);

function showPathLine(path) {
  console.log(path);
  const positions = [];
  for (let i = 0; i < path._waypoints.length; i++) {
    positions.push(
      path._waypoints[i].x,
      path._waypoints[i].y,
      path._waypoints[i].z
    );
  }
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(positions, 3)
  );
  const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
  const line = new THREE.Line(geometry, material);
  scene.add(line);
}

// 点击将目标移动到点击的位置
const ndc = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
window.addEventListener("pointerdown", (event) => {
  ndc.x = (event.clientX / window.innerWidth) * 2 - 1;
  ndc.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(ndc, camera);
  const intersects = raycaster.intersectObject(plane);
  if (intersects.length > 0) {
    const point = intersects[0].point;
    target.position.set(point.x, 0, point.z);
  }
});

// 创建障碍物
const obstacles = [];

for (let i = 0; i < 5; i++) {
  const boxGeometry = new THREE.BoxGeometry(3, 3, 3);
  const boxMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
  const box = new THREE.Mesh(boxGeometry, boxMaterial);
  box.position.set(Math.random() * 30 - 15, 0, Math.random() * 30 - 5);
  box.receiveShadow = true;
  box.castShadow = true;
  scene.add(box);
  // 创建障碍物
  const obstacle = new YUKA.GameEntity();
  obstacle.position.copy(box.position);

  // 设置障碍物半径
  boxGeometry.computeBoundingSphere();
  obstacle.boundingRadius = boxGeometry.boundingSphere.radius;
  obstacles.push(obstacle);

  entityManager.add(obstacle);
}

// 避障行为
const obstacleAvoidanceBehavior = new YUKA.ObstacleAvoidanceBehavior(obstacles);
vehicle.steering.add(obstacleAvoidanceBehavior);
vehicle.smoother = new YUKA.Smoother(30);
</script>

<template>
  <div></div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>

三、逃避行为

在这里插入图片描述

<script setup>
import * as THREE from "three";
import * as YUKA from "yuka";
// 导入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 10, 20);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建地面
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.5;
scene.add(plane);

// 创建灯光
const light = new THREE.SpotLight(0xffffff, 3, 100, Math.PI / 6, 0.5);
light.position.set(10, 40, 10);
light.castShadow = true;
scene.add(light);

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const time = new YUKA.Time();
requestAnimationFrame(function animate() {
  const delta = time.update().getDelta();
  controls.update();
  entityManager.update(delta);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
});

// 创建椎体
// const coneGeometry = new THREE.ConeGeometry(0.2, 1, 32);
// coneGeometry.rotateX(Math.PI / 2);
// const coneMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
// const cone = new THREE.Mesh(coneGeometry, coneMaterial);
// // cone.matrixAutoUpdate = false;
// cone.receiveShadow = true;
// cone.castShadow = true;
// scene.add(cone);

// 加载模型
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/");
loader.setDRACOLoader(dracoLoader);
loader.load("./model/car.gltf", function (gltf) {
  console.log(gltf);
  const car = gltf.scene;
  car.children[0].rotation.y = Math.PI / 2;
  car.children[0].scale.set(0.2, 0.2, 0.2);
  scene.add(car);
  vehicle.setRenderComponent(car, callback);
});

// 创建yuka的车辆
const vehicle = new YUKA.Vehicle();
vehicle.maxSpeed = 5;
// 设置车辆的渲染对象
// vehicle.setRenderComponent(cone, callback);
function callback(entity, renderComponent) {
  // console.log(entity, renderComponent);
  renderComponent.position.copy(entity.position);
  renderComponent.quaternion.copy(entity.rotation);
  // renderComponent.matrix.copy(entity.worldMatrix);
}

// 创建目标小球
const sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff00ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.receiveShadow = true;
sphere.castShadow = true;
scene.add(sphere);
// 创建目标
const target = new YUKA.GameEntity();
target.setRenderComponent(sphere, callback);

target.position.set(Math.random() * 20 - 10, 0, Math.random() * 20 - 10);

const entityManager = new YUKA.EntityManager();
entityManager.add(vehicle);
entityManager.add(target);

// 到达行为
// const arriveBehavior = new YUKA.ArriveBehavior(target.position);
// vehicle.steering.add(arriveBehavior);

// 搜索目标行为
// const seekBehavior = new YUKA.SeekBehavior(target.position);
// vehicle.steering.add(seekBehavior);

// setInterval(() => {
//   target.position.set(Math.random() * 20 - 10, 0, Math.random() * 20 - 10);
// }, 2000);

function showPathLine(path) {
  console.log(path);
  const positions = [];
  for (let i = 0; i < path._waypoints.length; i++) {
    positions.push(
      path._waypoints[i].x,
      path._waypoints[i].y,
      path._waypoints[i].z
    );
  }
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(positions, 3)
  );
  const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
  const line = new THREE.Line(geometry, material);
  scene.add(line);
}

// 点击将目标移动到点击的位置
const ndc = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
window.addEventListener("pointerdown", (event) => {
  ndc.x = (event.clientX / window.innerWidth) * 2 - 1;
  ndc.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(ndc, camera);
  const intersects = raycaster.intersectObject(plane);
  if (intersects.length > 0) {
    const point = intersects[0].point;
    target.position.set(point.x, 0, point.z);
  }
});

// 创建障碍物
const obstacles = [];

for (let i = 0; i < 5; i++) {
  const boxGeometry = new THREE.BoxGeometry(3, 3, 3);
  const boxMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
  const box = new THREE.Mesh(boxGeometry, boxMaterial);
  box.position.set(Math.random() * 30 - 15, 0, Math.random() * 30 - 5);
  box.receiveShadow = true;
  box.castShadow = true;
  scene.add(box);
  // 创建障碍物
  const obstacle = new YUKA.GameEntity();
  obstacle.position.copy(box.position);

  // 设置障碍物半径
  boxGeometry.computeBoundingSphere();
  obstacle.boundingRadius = boxGeometry.boundingSphere.radius;
  obstacles.push(obstacle);

  entityManager.add(obstacle);
}

// 避障行为
const obstacleAvoidanceBehavior = new YUKA.ObstacleAvoidanceBehavior(obstacles);
vehicle.steering.add(obstacleAvoidanceBehavior);
vehicle.smoother = new YUKA.Smoother(30);

// 逃离行为
const fleeBehavior = new YUKA.FleeBehavior(target.position, 3);
vehicle.steering.add(fleeBehavior);
</script>

<template>
  <div></div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>

四、追击行为

在这里插入图片描述

<script setup>
import * as THREE from "three";
import * as YUKA from "yuka";
// 导入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 10, 20);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建地面
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.5;
scene.add(plane);

// 创建灯光
const light = new THREE.SpotLight(0xffffff, 3, 100, Math.PI / 6, 0.5);
light.position.set(10, 40, 10);
light.castShadow = true;
scene.add(light);

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const time = new YUKA.Time();
requestAnimationFrame(function animate() {
  const delta = time.update().getDelta();
  controls.update();
  entityManager.update(delta);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
});

// 创建椎体
// const coneGeometry = new THREE.ConeGeometry(0.2, 1, 32);
// coneGeometry.rotateX(Math.PI / 2);
// const coneMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
// const cone = new THREE.Mesh(coneGeometry, coneMaterial);
// // cone.matrixAutoUpdate = false;
// cone.receiveShadow = true;
// cone.castShadow = true;
// scene.add(cone);

// 加载模型
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/");
loader.setDRACOLoader(dracoLoader);
let c1, c2;
c1 = loader.loadAsync("./model/car.gltf");
c2 = loader.loadAsync("./model/truck.gltf");
Promise.all([c1, c2]).then((res) => {
  const car = res[0].scene;
  const truck = res[1].scene;
  car.children[0].rotation.y = Math.PI / 2;
  car.children[0].scale.set(0.2, 0.2, 0.2);
  const vehicle = new YUKA.Vehicle();
  vehicle.maxSpeed = 3;
  vehicle.position.set(Math.random() * 20 - 10, 0, Math.random() * 20 - 10);
  vehicle.setRenderComponent(car, callback);
  entityManager.add(vehicle);

  truck.children[0].rotation.y = Math.PI / 2;
  truck.children[0].scale.set(0.2, 0.2, 0.2);
  const vehicle2 = new YUKA.Vehicle();
  vehicle2.maxSpeed = 6;
  vehicle2.position.set(Math.random() * 20 - 10, 0, Math.random() * 20 - 10);
  vehicle2.setRenderComponent(truck, callback);
  entityManager.add(vehicle2);

  scene.add(car);
  scene.add(truck);

  // 设置追击行为
  const pursuitBehavior = new YUKA.PursuitBehavior(vehicle2, 5);
  vehicle.steering.add(pursuitBehavior);

  // 设置卡车到达目标行为
  const arriveBehavior = new YUKA.ArriveBehavior(target.position);
  vehicle2.steering.add(arriveBehavior);

  setInterval(() => {
    target.position.set(Math.random() * 50 - 25, 0, Math.random() * 50 - 25);
  }, 3000);
});
function callback(entity, renderComponent) {
  // console.log(entity, renderComponent);
  renderComponent.position.copy(entity.position);
  renderComponent.quaternion.copy(entity.rotation);
  // renderComponent.matrix.copy(entity.worldMatrix);
}

// 创建目标小球
const sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff00ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.receiveShadow = true;
sphere.castShadow = true;
scene.add(sphere);
// 创建目标
const target = new YUKA.GameEntity();
target.setRenderComponent(sphere, callback);

target.position.set(Math.random() * 20 - 10, 0, Math.random() * 20 - 10);

const entityManager = new YUKA.EntityManager();
entityManager.add(target);
</script>

<template>
  <div></div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>

五、候鸟群集聚散效果

在这里插入图片描述

<script setup>
import * as THREE from "three";
import * as YUKA from "yuka";
// 导入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 10, 20);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建地面
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.5;
scene.add(plane);

// 创建灯光
const light = new THREE.SpotLight(0xffffff, 3, 100, Math.PI / 6, 0.5);
light.position.set(10, 40, 10);
light.castShadow = true;
scene.add(light);

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const time = new YUKA.Time();
requestAnimationFrame(function animate() {
  const delta = time.update().getDelta();
  controls.update();
  entityManager.update(delta);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
});

// 创建椎体
// const coneGeometry = new THREE.ConeGeometry(0.2, 1, 32);
// coneGeometry.rotateX(Math.PI / 2);
// const coneMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
// const cone = new THREE.Mesh(coneGeometry, coneMaterial);
// // cone.matrixAutoUpdate = false;
// cone.receiveShadow = true;
// cone.castShadow = true;
// scene.add(cone);

// 加载模型
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/");
loader.setDRACOLoader(dracoLoader);
loader.load("./model/car.gltf", function (gltf) {
  // console.log(gltf);
  // 创建群体随机行走行为
  const wanderBehavior = new YUKA.WanderBehavior(3);

  // 设置整齐群体转向
  const alignmentBehavior = new YUKA.AlignmentBehavior();
  alignmentBehavior.weight = 5;

  // 设置聚集行为
  const cohesionBehavior = new YUKA.CohesionBehavior();
  cohesionBehavior.weight = 5;

  // 设置分离行为
  const separationBehavior = new YUKA.SeparationBehavior();
  separationBehavior.weight = 0.5;

  for (let i = 0; i < 40; i++) {
    // 创建yuka的车辆
    const vehicle = new YUKA.Vehicle();
    vehicle.position.set(Math.random() * 20 - 10, 0, Math.random() * 20 - 10);
    vehicle.rotation.fromEuler(0, Math.random() * Math.PI, 0);
    vehicle.maxSpeed = 3;
    const car = gltf.scene.clone();
    car.children[0].rotation.y = Math.PI / 2;
    car.children[0].scale.set(0.2, 0.2, 0.2);
    scene.add(car);
    vehicle.setRenderComponent(car, callback);
    entityManager.add(vehicle);

    vehicle.steering.add(wanderBehavior);
    vehicle.steering.add(alignmentBehavior);
    vehicle.steering.add(cohesionBehavior);
    vehicle.steering.add(separationBehavior);
  }
});

// 设置车辆的渲染对象
// vehicle.setRenderComponent(cone, callback);
function callback(entity, renderComponent) {
  // console.log(entity, renderComponent);
  renderComponent.position.copy(entity.position);
  renderComponent.quaternion.copy(entity.rotation);
  // renderComponent.matrix.copy(entity.worldMatrix);
}

// 创建对实体管理对象
const entityManager = new YUKA.EntityManager();
</script>

<template>
  <div></div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
拾荒李
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threejs室内导航之自动寻路 - 障碍物标注
langtian2007的专栏
01-08 1539
threejs 3D室内导航 - 导航网格障碍物标注
使用Three.JS以及A*寻路算法制作自动寻路场景（一）DEMO简介及环境部署
每天学习一点点
07-19 5032
先上一波完成效果图，由于是自学，在此仅仅分享自己的一些见解，有不当之处还请大家指教！ 1.DEMO简介 本DEMO使用Three.js作为主要开发工具，开发过程主要分为两个部分： 首先是使用Three.js实现A*寻路算法，效果图如下： 具体功能： 1.自动生成地图 2.根据选定开始及结束位置计算路线（涉及构造器，raycaster的使用） 3.播放寻路动画（requestA...
Threejs路径规划_基于A*算法案例V2
最新发布
Baker的博客
05-24 842
下面来说下大概得逻辑，假设有30*30的方格，从1,1点要到25,20点，会先从1,1出发，查询1,1能到达的点，假设1,1能够到达（0,1),(1,0),(1,2),(2,1)这四个点，那么求出四个点中哪个点距离目标点(25,20)的曼哈顿距离最近，得到这个这里距离最近的点之后，再找出这个点能够到达的点，从它能够到达的点中再求出四个点中哪个点距离目标点(25,20)的曼哈顿距离最近。可以同样用上个章节的加入element的输入框来实现动态规划，并在每次规划后清除上一次规划的路线。
three.js算法寻路示例
10-28
居于three.js+vue的算法避障寻路示例,A*算法，深度优先，广度优先搜索
threejs-kibus:aStar寻路
07-02
Kibus 3D 在这个 repo 中只执行算法 A * 来寻找最短路径，它与其他 repository 不同，因为它是使用 Three.js 制作的。 笔记 在推送之前，完整的 repo 留在损坏的计算机上
three.js自定义路径漫游
12-27
基于three.js封装的自定义漫游小代码，传入最少两点三维坐标，即可实现飞行漫游。
Threejs中使用astar(A*)算法寻路导航，Threejs寻路定位导航
左本Web3D
07-07 2435
1，介绍 该示例使用的是 r95版本Three.js库。利用A*算法实现寻路、导航功能。添加坐标轴。 效果图如下： 2，主要说明 引入A*算法astar.js <script type="text/javascript" src="libs/astar.js"></script> 初始化路网、障碍物，记录路网、障碍物位置信息 // 绘制路网 function initGround() { var geometry = new THREE.Geom.
THREEJS - 基于A*算法实现自动避障的功能
04-19
1. 使用平面交叉的思路结合A*算法，计算对应的矩阵...4. 最后点击寻径，即可实现自动路径的计算； 详细的代码见压缩包内，下载代码后有不清楚的地方，可以私聊我！！！ 欢迎各位大佬指导，互相学习，共同进步！！！
行业文档-设计装置-一种自动避障机器人平台.zip
08-19
行业文档-设计装置-一种自动避障机器人平台.zip
人工智能-机器学习-智能轮椅自动避障方法研究与实现.pdf
06-01
智能轮椅自动避障方法是基于人工智能和机器学习技术的一项创新应用，旨在提升残障人士或行动不便者的生活质量和自由度。随着社会老龄化和意外事故导致的肢体残疾人数增加，智能轮椅的需求日益增长。本研究针对这一...
Pathfinding-Visualizer-ThreeJS：用于迷宫生成，第一人称视角和设备摄像头输入的3D寻路算法的可视化器
02-04
寻路可视化工具ThreeJS :1st_place_medal: AlgoExpert上的冠军 :1st_place_medal: 用于3D寻路算法的可视化工具。 现场演示 现场演示可以在找到。 产品特点 加权和非加权算法 Dijkstra的算法（加权） 寻路算法之父，它创建了从起始顶点（源）到图中所有其他点的最短路径树。 保证最短的路径！ A *搜索算法（加权） 启发式路径查找和图形遍历中使用的最好且最受欢迎的技术之一。 保证最短的路径！ 广度优先搜索（未展开） 该算法从树的根部开始，并在移动到下一个深度级别的节点之前探索当前深度的所有邻居节点。 保证最短的路径！ 深度优先搜索（未展开） 该算法从根节点开始，并在回溯之前尽可能沿着每个分支进行探
虚幻4简单AI的实现：自动寻路，场景查询自动躲避，行为树
01-10
实现了AI机器人自动巡逻，发现敌人互相通知并追赶攻击，受伤自动躲避，失去敌人恢复巡逻等简单AI。
基于Threejs/Webgl三维实时数据&车辆路径导航功能 项目实战一
06-16
针对webgl的库threejs框架项目功能实战讲解实时数据功能：对生产设备设施、传感器、开关控制的实时数据和运行状态查看，在三维场景中实时数据和状态，根据报警级别显示不同设备颜色。车辆路径导航：工厂车辆位置坐标做定位监控，根据车辆定位坐标在三维场景中可以展现车辆实时位置分布、车辆行驶运行状态；同时也可以仿真模拟车辆运行轨迹。threejs 98版本开发环境（IDE） WebStorm 2019.2 版本
3种寻路算法演示程序及源码
12-17
深度优先，广度优先，A*算法，演示程序及源码
自动寻路算法（JS）
06-24
是使用JS编写的自动寻路算法...............................................................................
Threejs中使用A*算法寻路导航，Threejs室内室外地图导航
左本Web3D
07-08 2627
1，介绍 该示例使用的是 r95版本Three.js库。这里利用A*算法实现室内室外寻路、导航功能。 效果图如下： 2，主要说明 1，初始化路网 2，设置路障，我这里是使用鼠标点击设置路障，如下图 3，调用算法传入路网数据实现导航 3，源码 <!DOCTYPE html> <html> <head> <title>Threejs中使用A*算法寻路导航，Threejs室内室外地图导航</title> ...
使用Three.JS以及A*寻路算法制作自动寻路场景（五）使用多view绘图实现小地图功能
每天学习一点点
07-22 3314
本节内容： 使用多view渲染同一场景方法简介 套用此方法，实现小地图功能，完成本DEMO 本节最终效果图： 使用多view渲染同一场景方法简介 主要参考的three.js官方案例（https://threejs.org/examples/?q=orb#webgl_multiple_views），效果如下： 查看本案例源代码，要实现多view渲染，需要定义一个views数组，存放...
基于WebGL/Threejs AI寻路
ALLENJIAO的专栏
06-17 2966
Threejs 寻路算法，可以帮助AI在你的场景世界里导航。它使用A*和漏斗算法来计算导航网格上的路径。 简介 传统上，游戏和3D应用程序使用路标来帮助它们的人工智能代理导航。这是不好的，有很多问题，但通常比导航网格更容易实现。导航网格要精确得多，速度也要快得多，并且考虑到AI代理的大小(例如坦克比士兵更需要移动空间)。 效果 感兴趣的可以留言或发邮件1985692469@q...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值