JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/examples/js/loaders/OBJLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/examples/js/controls/OrbitControls.js"></script>
<script src="https://objpatroljs-zzcpndkpct.now.sh/patrol.js"></script>
JavaScript
var container;
var camera, scene, renderer, controls;
var raycaster, intersectedObject;
var mouse = new THREE.Vector2();
var startTime = Date.now();
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var lastFrameTime = 0;
var maxFrameTime = 0.03;
var elapsedTime = 0;
var player = new THREE.Object3D();
var level;
init();
animate();
var target;
var playerNavMeshGroup;
var calculatedPath = null;
var pathLines;
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.x = -10;
camera.position.y = 14;
camera.position.z = 10;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0.5, 0.5 );
scene.add( directionalLight );
var objLoader = new THREE.OBJLoader();
objLoader.load( 'https://objpatroljs-zzcpndkpct.now.sh/level.obj', function( object ) {
// object.position.y = 1000;
object.traverse(function (node) {
if (node.type === 'Mesh') level = node;
});
scene.add(level);
});
objLoader.load( 'https://objpatroljs-zzcpndkpct.now.sh/navmesh.obj', function( object ) {
var navmesh;
object.traverse(function (node) {
if (node.type === 'Mesh') navmesh = node;
});
var geometry = new THREE.Geometry();
geometry.fromBufferGeometry(navmesh.geometry);
var zoneNodes = patrol.buildNodes(geometry);
patrol.setZoneData('level', zoneNodes);
Object.assign(navmesh.material, {
color: 0x009688,
opacity: 0.5,
transparent: true
});
scene.add(navmesh);
// Set the player's navigation mesh group
playerNavMeshGroup =...