Skip to content

Commit dfbb468

Browse files
michaljazmichaljaz
committed
raycasting
1 parent ff6984d commit dfbb468

File tree

3 files changed

+120
-42
lines changed

3 files changed

+120
-42
lines changed

‎index.html‎

Lines changed: 118 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,35 @@
99
</head>
1010
<body>
1111
<canvas id="c"></canvas>
12-
<script src="js/jq.js"></script>
12+
<script src="js/jq2.js"></script>
1313
<script src="js/1pc.js"></script>
1414
<script type="module">
1515

1616
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
1717
import { BufferGeometryUtils } from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/utils/BufferGeometryUtils.js';
18-
var canvas,renderer,scene,camera;
18+
var canvas,renderer,scene,camera,raycaster;
1919

2020

21-
init()
21+
canvas=document.querySelector('#c');
22+
renderer= new THREE.WebGLRenderer({
23+
canvas
24+
});
25+
26+
scene = new THREE.Scene();
27+
scene.background = new THREE.Color('lightblue');
28+
scene.fog= new THREE.Fog(new THREE.Color('lightblue'),0.0025, 100)
29+
30+
camera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);
31+
camera.rotation.order="YXZ"
32+
camera.position.set(25,25,25)
33+
FirstPersonControls(canvas,camera,0.07)
34+
35+
36+
var ambientLight = new THREE.AmbientLight( 0xcccccc );
37+
scene.add( ambientLight );
38+
raycaster = new THREE.Raycaster();
39+
var mouse = {x:0,y:0};
40+
2241
animate()
2342

2443
class Terrain{
@@ -29,6 +48,13 @@
2948
this.cellSize=options.cellSize;
3049
this.cells={};
3150
this.cells_meshes={};
51+
this.neighbours=[
52+
[-1,0,0],
53+
[1,0,0],
54+
[0,-1,0],
55+
[0,1,0],
56+
[0,0,-1],
57+
[0,0,1]]
3258
}
3359
parseVec(x,y,z){
3460
return `${x}:${y}:${z}`;
@@ -47,6 +73,13 @@
4773
const cellZ = Math.floor(z / cellSize);
4874
return `${cellX}:${cellY}:${cellZ}`
4975
}
76+
getCellId(x,y,z){
77+
const {cellSize} = this;
78+
const cellX = Math.floor(x / cellSize);
79+
const cellY = Math.floor(y / cellSize);
80+
const cellZ = Math.floor(z / cellSize);
81+
return [cellX,cellY,cellZ]
82+
}
5083
getCellForVoxel(x,y,z){
5184
return this.cells[this.computeCellId(x, y, z)];
5285
}
@@ -60,6 +93,11 @@
6093
this.cells[cellId][this.parseVec(...voxel)]=v;
6194
}
6295
this.cells[cellId].needsUpdate=true;
96+
for(var i=0;i<this.neighbours;i++){
97+
var neigh=this.neighbours[i];
98+
cellIdX=this.computeCellId(x+neigh[0],y+neigh[1],z+neigh[2]);
99+
this.cells[cellIdX].needsUpdate=true;
100+
}
63101
}
64102
getVoxel(x,y,z){
65103
var voxel=this.computeVoxelOffset(x,y,z);
@@ -74,7 +112,6 @@
74112
}else{
75113
return 0;
76114
}
77-
78115
}
79116
updateCellGeometry(x,y,z){
80117
const {textureAtlas}=this;
@@ -96,7 +133,6 @@
96133
}catch(e){}
97134

98135
}
99-
100136
}
101137
generateCellGeometry(x,y,z){
102138
const {textureAtlas,cellSize}=this;
@@ -110,7 +146,6 @@
110146
for(var l=0;l<voxelGeometries.length;l++){
111147
geometries.push(voxelGeometries[l]);
112148
}
113-
114149
}
115150
}
116151
}
@@ -121,8 +156,6 @@
121156
}else{
122157
var geometry=null;
123158
}
124-
125-
126159
return geometry;
127160
}
128161
generateVoxelGeometry(x,y,z){
@@ -156,12 +189,6 @@
156189
var pzGeometry=this.generateFace("pz");
157190
geometries.push( pzGeometry.applyMatrix4( matrix ) )
158191
}
159-
// geometries.push( nxGeometry.applyMatrix4( matrix ) )
160-
// geometries.push( pxGeometry.applyMatrix4( matrix ) )
161-
// geometries.push( nyGeometry.applyMatrix4( matrix ) )
162-
// geometries.push( pyGeometry.applyMatrix4( matrix ) )
163-
// geometries.push( nzGeometry.applyMatrix4( matrix ) )
164-
// geometries.push( pzGeometry.applyMatrix4( matrix ) )
165192
return geometries;
166193
}else{
167194
return []
@@ -227,8 +254,79 @@
227254
geometry.attributes.uv.array[ 3 ] = textureSizeY+textureSizeY*y;
228255
}
229256
}
257+
258+
}
259+
function precision(number){
260+
var precision = (number + "").split(".")[1].length;
261+
return precision;
262+
}
263+
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
264+
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
265+
var cube = new THREE.Mesh( geometry, material );
266+
// cube.material.visible=false;
267+
scene.add( cube );
268+
function raycast(){
269+
raycaster.setFromCamera( mouse, camera );
270+
// calculate objects intersecting the picking ray
271+
var intersects = raycaster.intersectObjects( scene.children );
272+
var miniDist=-1
273+
var mini=null;
274+
for ( var i = 0; i < intersects.length; i++ ) {
275+
var ter=intersects[i]
276+
if(ter.object.uuid!=cube.uuid){
277+
if(miniDist==-1){
278+
miniDist=ter.distance
279+
mini=ter
280+
}else if(miniDist>ter.distance){
281+
miniDist=ter.distance
282+
mini=ter;
283+
}
284+
}
285+
286+
}
287+
if(mini!=null){
288+
var xd=Math.round(mini.point.x)
289+
var yd=Math.round(mini.point.y)
290+
var zd=Math.round(mini.point.z)
291+
if(precision(mini.point.x)==1){
292+
console.log("x")
293+
var x1=Math.ceil(mini.point.x);
294+
var x2=Math.floor(mini.point.x);
295+
if(!world.getVoxel(x1,yd,zd)){
296+
cube.position.set(x1,yd,zd)
297+
}else if(!world.getVoxel(x2,yd,zd)){
298+
cube.position.set(x2,yd,zd)
299+
}
300+
}
301+
if(precision(mini.point.y)==1){
302+
console.log("y")
303+
var y1=Math.ceil(mini.point.y);
304+
var y2=Math.floor(mini.point.y);
305+
if(!world.getVoxel(xd,y1,zd)){
306+
cube.position.set(xd,y1,zd)
307+
}else if(!world.getVoxel(xd,y2,zd)){
308+
cube.position.set(xd,y2,zd)
309+
}
310+
}
311+
if(precision(mini.point.z)==1){
312+
console.log("z")
313+
var z1=Math.ceil(mini.point.z);
314+
var z2=Math.floor(mini.point.z);
315+
if(!world.getVoxel(xd,yd,z1)){
316+
cube.position.set(xd,yd,z1)
317+
}else if(!world.getVoxel(xd,yd,z2)){
318+
cube.position.set(xd,yd,z2)
319+
}
320+
}
321+
// console.log(mini.point)
322+
}
323+
230324
}
231325

326+
setInterval(function (){
327+
raycast()
328+
})
329+
232330

233331
var texture = new THREE.TextureLoader().load( 'atla.png' );
234332
texture.magFilter = THREE.NearestFilter;
@@ -238,10 +336,9 @@
238336
textureCols:16,
239337
cellSize:16,
240338
})
241-
242339
var vari=50
243340
for (let y = 0; y < vari; ++y) {
244-
for (let z = 0; z < vari; ++z) {
341+
for (let z = 0; z < vari*4; ++z) {
245342
for (let x = 0; x < vari; ++x) {
246343
const height = (Math.sin(x / vari * Math.PI * 2) + Math.sin(z / vari * Math.PI * 3)) * (vari / 6) + (vari / 2);
247344
if (y < height) {
@@ -251,34 +348,14 @@
251348
}
252349
}
253350
// console.log(world.cells["0:0:0"])
254-
for(var i=0;i<5;i++){
255-
for(var j=0;j<5;j++){
256-
for(var k=0;k<5;k++){
257-
world.updateCellGeometry(i,j,k);
351+
for(var i=0;i<10;i++){
352+
for(var j=0;j<10;j++){
353+
for(var k=0;k<10;k++){
354+
world.updateCellGeometry(i,j,k);
258355
}
259356
}
260357
}
261358

262-
// world.generateMeshForCell(0,0,1);
263-
264-
function init(){
265-
canvas=document.querySelector('#c');
266-
renderer= new THREE.WebGLRenderer({
267-
canvas
268-
});
269-
270-
scene = new THREE.Scene();
271-
scene.background = new THREE.Color('lightblue');
272-
273-
camera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);
274-
camera.rotation.order="YXZ"
275-
camera.position.set(25,25,25)
276-
FirstPersonControls(canvas,camera,0.04)
277-
278-
279-
var ambientLight = new THREE.AmbientLight( 0xcccccc );
280-
scene.add( ambientLight );
281-
}
282359

283360

284361
function animate() {
@@ -311,6 +388,7 @@
311388

312389

313390

391+
314392
</script>
315393
</body>
316394
</html>

‎js/jq.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎js/jq2.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)