1，介紹
該示例使用的是 r95版本Three.js庫。這裡利用A*算法實作室内室外尋路、導航功能。
效果圖如下：
2，主要說明
1，初始化路網
2，設定路障，我這裡是使用滑鼠點選設定路障，如下圖
3，調用算法傳入路網資料實作導航
3，源碼
<!DOCTYPE html>
<html>
<head>
<title>Threejs中使用A*算法尋路導航，Threejs室内室外地圖導航</title>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/OrbitControls.js"></script>
<script type="text/javascript" charset="UTF-8" src="libs/other/Tween.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="libs/three/loaders/GLTFLoader.js"></script>
<script type="text/javascript" src="libs/OBJLoader.js"></script>
<script type="text/javascript" src="libs/MTLLoader.js"></script>
<script type="text/javascript" src="libs/util.js"></script>
<script type="text/javascript" src="libs/util/dat.gui.js"></script>
<script type="text/javascript" src="libs/astar.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="webgl-output"></div>
<script type="text/javascript">
var camera;
var renderer;
var clock = new THREE.Clock();
var mixer = new THREE.AnimationMixer();
var clipAction;
var animationClip;
var length = 36;
var ws = 2;
var graph = []; // 記錄地圖
var meshArr = new Array(); // 記錄障礙物對象資料
var meshxy = [{
"x": 35,
"y": 7
},
{
"x": 35,
"y": 7
},
{
"x": 35,
"y": 9
},
{
"x": 35,
"y": 11
},
{
"x": 29,
"y": 11
},
{
"x": 29,
"y": 13
},
{
"x": 33,
"y": 13
},
{
"x": 33,
"y": 11
},
{
"x": 33,
"y": 9
},
{
"x": 33,
"y": 5
},
{
"x": 33,
"y": 7
},
{
"x": 29,
"y": 5
},
{
"x": 31,
"y": 5
},
{
"x": 31,
"y": 11
},
{
"x": 27,
"y": 5
},
{
"x": 25,
"y": 5
},
{
"x": 25,
"y": 7
},
{
"x": 25,
"y": 9
},
{
"x": 25,
"y": 11
},
{
"x": 25,
"y": 13
},
{
"x": 23,
"y": 9
},
{
"x": 21,
"y": 9
},
{
"x": 19,
"y": 9
},
{
"x": 19,
"y": 11
},
{
"x": 19,
"y": 13
},
{
"x": 15,
"y": 9
},
{
"x": 13,
"y": 7
},
{
"x": 13,
"y": 9
},
{
"x": 13,
"y": 11
},
{
"x": 11,
"y": 7
},
{
"x": 13,
"y": 5
},
{
"x": 11,
"y": 5
},
{
"x": 7,
"y": 5
},
{
"x": 5,
"y": 5
},
{
"x": 5,
"y": 7
},
{
"x": 7,
"y": 7
},
{
"x": 7,
"y": 9
},
{
"x": 7,
"y": 11
},
{
"x": 5,
"y": 11
},
{
"x": 5,
"y": 9
},
{
"x": 7,
"y": 15
},
{
"x": 7,
"y": 17
},
{
"x": 7,
"y": 19
},
{
"x": 11,
"y": 23
},
{
"x": 11,
"y": 17
},
{
"x": 11,
"y": 21
},
{
"x": 11,
"y": 19
},
{
"x": 17,
"y": 25
},
{
"x": 17,
"y": 27
},
{
"x": 17,
"y": 29
},
{
"x": 19,
"y": 25
},
{
"x": 21,
"y": 25
},
{
"x": 17,
"y": 21
},
{
"x": 17,
"y": 23
},
{
"x": 17,
"y": 19
},
{
"x": 15,
"y": 19
},
{
"x": 13,
"y": 19
},
{
"x": 7,
"y": 29
},
{
"x": 7,
"y": 31
},
{
"x": 7,
"y": 33
},
{
"x": 9,
"y": 33
},
{
"x": 13,
"y": 33
},
{
"x": 11,
"y": 33
},
{
"x": 13,
"y": 31
},
{
"x": 13,
"y": 29
},
{
"x": 15,
"y": 33
},
{
"x": 17,
"y": 33
},
{
"x": 19,
"y": 33
},
{
"x": 21,
"y": 33
},
{
"x": 25,
"y": 29
},
{
"x": 25,
"y": 31
},
{
"x": 25,
"y": 33
},
{
"x": 27,
"y": 29
},
{
"x": 29,
"y": 29
},
{
"x": 29,
"y": 23
},
{
"x": 27,
"y": 23
},
{
"x": 25,
"y": 23
},
{
"x": 29,
"y": 21
},
{
"x": 29,
"y": 19
},
{
"x": 33,
"y": 19
},
{
"x": 33,
"y": 21
},
{
"x": 33,
"y": 23
},
{
"x": 33,
"y": 25
},
{
"x": 33,
"y": 27
},
{
"x": 33,
"y": 29
},
{
"x": 33,
"y": 31
},
{
"x": 33,
"y": 33
},
{
"x": 31,
"y": 35
},
{
"x": 29,
"y": 35
},
{
"x": 27,
"y": 35
},
{
"x": 25,
"y": 35
},
{
"x": 7,
"y": 23
},
{
"x": 11,
"y": 15
},
{
"x": 9,
"y": 15
},
{
"x": 35,
"y": 9
},
{
"x": 35,
"y": 11
},
{
"x": 29,
"y": 11
},
{
"x": 29,
"y": 13
},
{
"x": 33,
"y": 13
},
{
"x": 33,
"y": 11
},
{
"x": 33,
"y": 9
},
{
"x": 33,
"y": 5
},
{
"x": 33,
"y": 7
},
{
"x": 29,
"y": 5
},
{
"x": 31,
"y": 5
},
{
"x": 31,
"y": 11
},
{
"x": 27,
"y": 5
},
{
"x": 25,
"y": 5
},
{
"x": 25,
"y": 7
},
{
"x": 25,
"y": 9
},
{
"x": 25,
"y": 11
},
{
"x": 25,
"y": 13
},
{
"x": 23,
"y": 9
},
{
"x": 21,
"y": 9
},
{
"x": 19,
"y": 9
},
{
"x": 19,
"y": 11
},
{
"x": 19,
"y": 13
},
{
"x": 15,
"y": 9
},
{
"x": 13,
"y": 7
},
{
"x": 13,
"y": 9
},
{
"x": 13,
"y": 11
},
{
"x": 11,
"y": 7
},
{
"x": 13,
"y": 5
},
{
"x": 11,
"y": 5
},
{
"x": 7,
"y": 5
},
{
"x": 5,
"y": 5
},
{
"x": 5,
"y": 7
},
{
"x": 7,
"y": 7
},
{
"x": 7,
"y": 9
},
{
"x": 7,
"y": 11
},
{
"x": 5,
"y": 11
},
{
"x": 5,
"y": 9
},
{
"x": 7,
"y": 15
},
{
"x": 7,
"y": 17
},
{
"x": 7,
"y": 19
},
{
"x": 11,
"y": 23
},
{
"x": 11,
"y": 17
},
{
"x": 11,
"y": 21
},
{
"x": 11,
"y": 19
},
{
"x": 17,
"y": 25
},
{
"x": 17,
"y": 27
},
{
"x": 17,
"y": 29
},
{
"x": 19,
"y": 25
},
{
"x": 21,
"y": 25
},
{
"x": 17,
"y": 21
},
{
"x": 17,
"y": 23
},
{
"x": 17,
"y": 19
},
{
"x": 15,
"y": 19
},
{
"x": 13,
"y": 19
},
{
"x": 7,
"y": 29
},
{
"x": 7,
"y": 31
},
{
"x": 7,
"y": 33
},
{
"x": 9,
"y": 33
},
{
"x": 13,
"y": 33
},
{
"x": 11,
"y": 33
},
{
"x": 13,
"y": 31
},
{
"x": 13,
"y": 29
},
{
"x": 15,
"y": 33
},
{
"x": 17,
"y": 33
},
{
"x": 19,
"y": 33
},
{
"x": 21,
"y": 33
},
{
"x": 25,
"y": 29
},
{
"x": 25,
"y": 31
},
{
"x": 25,
"y": 33
},
{
"x": 27,
"y": 29
},
{
"x": 29,
"y": 29
},
{
"x": 29,
"y": 23
},
{
"x": 27,
"y": 23
},
{
"x": 25,
"y": 23
},
{
"x": 29,
"y": 21
},
{
"x": 29,
"y": 19
},
{
"x": 33,
"y": 19
},
{
"x": 33,
"y": 21
},
{
"x": 33,
"y": 23
},
{
"x": 33,
"y": 25
},
{
"x": 33,
"y": 27
},
{
"x": 33,
"y": 29
},
{
"x": 33,
"y": 31
},
{
"x": 33,
"y": 33
},
{
"x": 31,
"y": 35
},
{
"x": 29,
"y": 35
},
{
"x": 27,
"y": 35
},
{
"x": 25,
"y": 35
},
{
"x": 7,
"y": 23
},
{
"x": 11,
"y": 15
},
{
"x": 9,
"y": 15
},
{
"x": 35,
"y": 9
},
{
"x": 35,
"y": 11
},
{
"x": 29,
"y": 11
},
{
"x": 29,
"y": 13
},
{
"x": 33,
"y": 13
},
{
"x": 33,
"y": 11
},
{
"x": 33,
"y": 9
},
{
"x": 33,
"y": 5
},
{
"x": 33,
"y": 7
},
{
"x": 29,
"y": 5
},
{
"x": 31,
"y": 5
},
{
"x": 31,
"y": 11
},
{
"x": 27,
"y": 5
},
{
"x": 25,
"y": 5
},
{
"x": 25,
"y": 7
},
{
"x": 25,
"y": 9
},
{
"x": 25,
"y": 11
},
{
"x": 25,
"y": 13
},
{
"x": 23,
"y": 9
},
{
"x": 21,
"y": 9
},
{
"x": 19,
"y": 9
},
{
"x": 19,
"y": 11
},
{
"x": 19,
"y": 13
},
{
"x": 15,
"y": 9
},
{
"x": 13,
"y": 7
},
{
"x": 13,
"y": 9
},
{
"x": 13,
"y": 11
},
{
"x": 11,
"y": 7
},
{
"x": 13,
"y": 5
},
{
"x": 11,
"y": 5
},
{
"x": 7,
"y": 5
},
{
"x": 5,
"y": 5
},
{
"x": 5,
"y": 7
},
{
"x": 7,
"y": 7
},
{
"x": 7,
"y": 9
},
{
"x": 7,
"y": 11
},
{
"x": 5,
"y": 11
},
{
"x": 5,
"y": 9
},
{
"x": 7,
"y": 15
},
{
"x": 7,
"y": 17
},
{
"x": 7,
"y": 19
},
{
"x": 11,
"y": 23
},
{
"x": 11,
"y": 17
},
{
"x": 11,
"y": 21
},
{
"x": 11,
"y": 19
},
{
"x": 17,
"y": 25
},
{
"x": 17,
"y": 27
},
{
"x": 17,
"y": 29
},
{
"x": 19,
"y": 25
},
{
"x": 21,
"y": 25
},
{
"x": 17,
"y": 21
},
{
"x": 17,
"y": 23
},
{
"x": 17,
"y": 19
},
{
"x": 15,
"y": 19
},
{
"x": 13,
"y": 19
},
{
"x": 7,
"y": 29
},
{
"x": 7,
"y": 31
},
{
"x": 7,
"y": 33
},
{
"x": 9,
"y": 33
},
{
"x": 13,
"y": 33
},
{
"x": 11,
"y": 33
},
{
"x": 13,
"y": 31
},
{
"x": 13,
"y": 29
},
{
"x": 15,
"y": 33
},
{
"x": 17,
"y": 33
},
{
"x": 19,
"y": 33
},
{
"x": 21,
"y": 33
},
{
"x": 25,
"y": 29
},
{
"x": 25,
"y": 31
},
{
"x": 25,
"y": 33
},
{
"x": 27,
"y": 29
},
{
"x": 29,
"y": 29
},
{
"x": 29,
"y": 23
},
{
"x": 27,
"y": 23
},
{
"x": 25,
"y": 23
},
{
"x": 29,
"y": 21
},
{
"x": 29,
"y": 19
},
{
"x": 33,
"y": 19
},
{
"x": 33,
"y": 21
},
{
"x": 33,
"y": 23
},
{
"x": 33,
"y": 25
},
{
"x": 33,
"y": 27
},
{
"x": 33,
"y": 29
},
{
"x": 33,
"y": 31
},
{
"x": 33,
"y": 33
},
{
"x": 31,
"y": 35
},
{
"x": 29,
"y": 35
},
{
"x": 27,
"y": 35
},
{
"x": 25,
"y": 35
},
{
"x": 7,
"y": 23
},
{
"x": 11,
"y": 15
},
{
"x": 9,
"y": 15
},
{
"x": 19,
"y": 21
},
{
"x": 21,
"y": 21
},
{
"x": 21,
"y": 19
},
{
"x": 29,
"y": 27
},
{
"x": 29,
"y": 25
}
]; // 記錄障礙坐标物資料
var lineArr = new Array(); // 記錄路網資料
var meshbool = false; // 顯示障礙物
var linebool = false; // 顯示路網
var resultArray = new Array();
var isCaculate = false;
function init() {
// 建立一個場景，它将包含我們所有的元素，如物體，相機和燈光。
var scene = new THREE.Scene();
var urls = [
'assets/textures/cubemap/flowers/posx.jpg',
'assets/textures/cubemap/flowers/negx.jpg',
'assets/textures/cubemap/flowers/posy.jpg',
'assets/textures/cubemap/flowers/negy.jpg',
'assets/textures/cubemap/flowers/posz.jpg',
'assets/textures/cubemap/flowers/negz.jpg'
];
var cubeLoader = new THREE.CubeTextureLoader();
scene.background = cubeLoader.load(urls);
// 建立一個錄影機，它定義了我們正在看的地方
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
// 将錄影機對準場景的中心
camera.position.x = 60;
camera.position.y = 35;
camera.position.z = 60;
camera.lookAt({
x: 0,
y: 5,
z: -20
});
var orbit = new THREE.OrbitControls(camera);
orbit.target = camera.position;
orbit.update();
// 建立一個渲染器并設定大小，WebGLRenderer将會使用電腦顯示卡來渲染場景
// initialize basic renderer
renderer = initRenderer({
antialias: true,
logarithmicDepthBuffer: true,
});
// 将平面添加到場景中
var plane = createPlaneGeometryBasicMaterial();
scene.add(plane);
// 在螢幕上顯示坐标軸
var axes = new THREE.AxesHelper(100);
scene.add(axes);
scene.add(new THREE.AmbientLight(0x666666));
scene.add(new THREE.AmbientLight("#ffffff", 1));
initModel();
// initPeople();
initGround();
initGrid();
var i = 0;
function tweenComplete() {
if (i < points.length) {
switch (i) {
case 0:
aaa.rotateY(Math.PI);
break;
case 1:
case 5:
case 8:
case 9:
aaa.rotateY(-0.5 * Math.PI);
break;
case 2:
case 3:
case 4:
case 6:
case 7:
aaa.rotateY(0.5 * Math.PI);
break;
case 10:
mixer.stopAllAction();
break;
}
tween = new TWEEN.Tween(points[i])
.to(points[i + 1], 3000)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function() {
aaa.position.set(this.x, this.y, this.z);
})
.onComplete(tweenComplete)
.start();
i++;
}
}
// 使用GUI調試庫
var controls = new function() {
this.clickBool = false;
this.displayRoadGrid = function() {
for (var i = 0; i < lineArr.length; i++) {
if (linebool) {
// 顯示路網
scene.add(lineArr[i].obj);
} else {
// 隐藏路網
var obj = scene.getObjectByName(lineArr[i].name);
scene.remove(obj);
}
}
linebool = !linebool
}
this.displayObstacles = function() {
for (var i = 0; i < meshArr.length; i++) {
if (meshbool) {
// 顯示障礙物
scene.add(meshArr[i].obj);
} else {
// 隐藏障礙物
var obj = scene.getObjectByName(meshArr[i].name);
scene.remove(obj);
}
}
meshbool = !meshbool
}
this.outputObstacles = function() {
for (var i = 0; i < meshArr.length; i++) {
meshxy.push({
x: meshArr[i].x,
y: meshArr[i].y
})
}
console.log(meshArr)
console.log(lineArr)
console.log(meshxy)
localStorage.setItem('meshArr', JSON.stringify(meshArr));
localStorage.setItem('lineArr', JSON.stringify(lineArr));
localStorage.setItem('meshxy', JSON.stringify(meshxy));
}
}
var gui = new dat.GUI();
// 隐藏顯示障路網
gui.add(controls, 'displayRoadGrid');
// 隐藏顯示障礙物
gui.add(controls, 'displayObstacles');
// 輸出障礙物對象
gui.add(controls, 'outputObstacles');
gui.add(controls, "clickBool");
// 啟動動畫
renderScene();
// 添加模型
function initModel() {
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath("assets/models/obj_mtl/")
mtlLoader.load('city.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('assets/models/obj_mtl/city.obj', function(object) {
var mesh = object;
mesh.scale.set(3, 3, 3);
mesh.position.set(18, 0, 18);
scene.add(mesh);
});
});
}
// 添加人物模型
function initPeople() {
var loader = new THREE.GLTFLoader();
loader.load('assets/models/CesiumMan/CesiumMan.gltf', function(result) {
result.scene.scale.set(1, 1, 1);
result.scene.translateY(0);
aaa = result.scene;
scene.add(result.scene);
tweenComplete();
mixer = new THREE.AnimationMixer(result.scene);
animationClip = result.animations[0];
clipAction = mixer.clipAction(animationClip).play();
animationClip = clipAction.getClip();
});
}
// 建立一個地面并設定草坪材質
function createPlaneGeometryBasicMaterial() {
var textureLoader = new THREE.TextureLoader();
var cubeMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("assets/textures/stone/cd.jpg"),
});
cubeMaterial.map.wrapS = THREE.RepeatWrapping;
cubeMaterial.map.wrapT = THREE.RepeatWrapping;
cubeMaterial.map.repeat.set(18, 18)
// 建立地平面并設定大小
var planeGeometry = new THREE.PlaneGeometry(500, 500);
var plane = new THREE.Mesh(planeGeometry, cubeMaterial);
// 設定平面位置并旋轉
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.z = 0;
return plane;
}
// 繪制線路
function initLine(pArr) {
var points = [];
var geometry = new THREE.Geometry();
for (var i = 0; i < pArr.length; i++) {
var randomX = pArr[i].x;
var randomY = pArr[i].y;
var randomZ = pArr[i].z;
var vector = new THREE.Vector3(randomX, randomY, randomZ);
geometry.vertices.push(vector);
points.push(vector);
}
var material = new THREE.LineBasicMaterial({
color: 0x0000FF
});
var line = new THREE.Line(geometry, material);
scene.add(line);
return points;
}
// 繪制路網
function initGround() {
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(length, 0, 0));
for (var i = 0; i <= length / ws; i++) {
var material = new THREE.LineBasicMaterial({
color: 0x808080
});
var line = new THREE.Line(geometry, material);
line.position.z = i * ws;
line.name = "line_" + i;
lineArr.push({
name: "line_" + i,
obj: line
});
scene.add(line);
var line = new THREE.Line(geometry, material);
line.position.x = i * ws;
line.position.z = length;
line.rotation.y = 90 * Math.PI / 180;
line.name = "line_" + i + 180;
lineArr.push({
name: "line_" + i + 180,
obj: line
});
scene.add(line);
}
}
// 初始化障礙物随機
function initGrid() {
for (var i = 0; i < length / ws; i++) {
var nodeRow = [];
for (var j = 0; j < length / ws; j++) {
nodeRow.push(1);
}
graph.push(nodeRow);
}
if (meshxy.length > 0) {
for (var i = 0; i < meshxy.length; i++) {
initObstacles(meshxy[i].x, meshxy[i].y);
}
} else {
for (var i = 0; i < length / ws; i++) {
var nodeRow = [];
for (var j = 0; j < length / ws; j++) {
var salt = Math.random() * 7;
if (salt > 2) {
nodeRow.push(1);
} else {
nodeRow.push(0);
}
if (salt <= 2) {
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE
.MeshBasicMaterial({
color: 0xC0C0C0
}));
let x = ws * j + ws / 2;
let z = ws * i + ws / 2;
cube.position.set(x, 1.2, z);
scene.add(cube);
}
}
graph.push(nodeRow);
}
}
}
//計算路徑
function caculatePath(resultArray) {
var maps = new Graph(graph); // 地圖
var startX = parseInt(resultArray[0].position.z / ws);
var startY = parseInt(resultArray[0].position.x / ws);
var endX = parseInt(resultArray[1].position.z / ws);
var endY = parseInt(resultArray[1].position.x / ws);
var start = maps.grid[startX][startY];
var end = maps.grid[endX][endY];
result = astar.search(maps, start, end);
if (result.length == 0) {
alert("無可到達路徑");
cleanSphere();
return;
}
var nArr = [{
x: resultArray[0].position.x,
z: resultArray[0].position.z,
y: 1.2
}];
for (var i = 0; i < result.length; i++) {
let d = {
x: result[i].y * ws + ws / 2,
y: 1.2,
z: result[i].x * ws + ws / 2,
}
nArr.push(d);
}
initLine(nArr);
}
//清除小球
function cleanSphere() {
let child = scene.children; //擷取場景中的所有子對象
for (var i = 0; i < child.length; i++) {
if (child[i].geometry instanceof THREE.SphereGeometry) { //幾何對象是球體幾何
scene.remove(child[i]); //從場景中移除
i--;
}
}
isCaculate = false;
}
//初始球體
function initSphere(x, z) {
if (isCaculate) {
cleanSphere();
}
var geometry = new THREE.SphereGeometry(ws / 2, 30, 30); //球體幾何
var material = new THREE.MeshBasicMaterial({
color: 0xffff00
}); //網格基礎材料
if (resultArray.length == 0) {
var sphere = new THREE.Mesh(geometry, material);
sphere.position.x = x;
sphere.position.y = 1;
sphere.position.z = z;
resultArray.push(sphere);
scene.add(sphere);
} else if (resultArray[0].position.x != x || resultArray[0].position.z != z) {
var sphere = new THREE.Mesh(geometry, material);
sphere.position.x = x;
sphere.position.y = 1;
sphere.position.z = z;
resultArray.push(sphere);
scene.add(sphere);
caculatePath(resultArray);
isCaculate = true;
resultArray = new Array();
}
}
// 繪制障礙物
function initObstacles(x, z) {
var name = "mesh_" + x + z;
var obj = scene.getObjectByName(name);
if (obj) {
scene.remove(obj);
for (var i = 0; i < meshArr.length; i++) {
if (meshArr[i].name == name) {
meshArr.splice(i, 1);
}
}
graph[parseInt(z / ws)][parseInt(x / ws)] = 1;
} else {
var geometry = new THREE.BoxGeometry(ws, ws, ws); //球體幾何
var material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
var sphere = new THREE.Mesh(geometry, material);
sphere.position.x = x;
sphere.position.y = 1;
sphere.position.z = z;
sphere.name = name;
scene.add(sphere);
meshArr.push({
name: name,
obj: sphere,
x: x,
y: z,
});
graph[parseInt(z / ws)][parseInt(x / ws)] = 0;
}
}
// 拾取對象
function pickupObjects(event) {
// 點選螢幕建立一個向量
var raycaster = new THREE.Raycaster();
var vector = new THREE.Vector2((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
.innerHeight) * 2 + 1);
var fxl = new THREE.Vector3(0, 1, 0);
var groundplane = new THREE.Plane(fxl, 0);
raycaster.setFromCamera(vector, camera);
var ray = raycaster.ray;
let intersects = ray.intersectPlane(groundplane);
let x = intersects.x;
let z = intersects.z;
if (x < 0 || z < 0 || length < z || length < x) {
return;
}
var k, m;
for (var i = 0; i < length; i += ws) {
if (x >= i && x < i + ws) {
k = i + ws / 2;
}
}
for (var j = 0; j < length; j += ws) {
if (z >= j && z < j + ws) {
m = j + ws / 2;
}
}
if (controls.clickBool) {
initSphere(k, m); //初始化球體
} else {
initObstacles(k, m);
}
}
document.addEventListener('click', pickupObjects, false); //監聽單擊拾取對象初始化球體
// 動畫渲染
var step = 5;
function renderScene() {
TWEEN.update();
var delta = clock.getDelta();
orbit.update();
mixer.update(delta);
// 使用requestAnimationFrame函數進行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// 渲染的場景
renderer.render(scene, camera);
// 建立一個球形幾何體
function createSphereGeometryLambertMaterial(point) {
// 建立一個球體
var sphereGeometry = new THREE.SphereGeometry(0.2, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x7777ff,
wireframe: true
});
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// 設定該物體投射陰影
sphere.castShadow = true;
// 位置範圍
sphere.position.x = point.x;
sphere.position.y = point.y;
sphere.position.z = point.z;
return sphere;
}
}
window.onload = init;
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 監聽調整大小事件
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>
需要完整代碼請留言或者聯系我微信：1171053128