player looking at mouse in inventory

Author: michaljaz

.gitignore

@@ -0,0 +1 @@
+node_modules

coffee/client/module/FirstPersonControls.coffee

@@ -11,6 +11,7 @@ class FirstPersonControls
 			16:"sneak"
 			82:"sprint"
 		}
+		@pii=options.pii
 		@fov=options.fov
 		@keys={}
 		@canvas=options.canvas
@@ -121,6 +122,10 @@ class FirstPersonControls
 		document.exitPointerLock()
 	state:(state)->
 		@gameState=state
+		if state is "inventory"
+			@pii.show()
+		else
+			@pii.hide() 
 		# console.log "Game state: "+state
 	resetState:()->
 		$(".chat").removeClass("focus")

coffee/client/module/PlayerInInventory.coffee

@@ -0,0 +1,48 @@
+import * as THREE from './build/three.module.js'
+class PlayerInInventory
+	constructor:(options)->
+		@canvas=options.canvas
+		@al=options.al
+		@renderer=new THREE.WebGLRenderer {
+			canvas:@canvas
+			PixelRatio:window.devicePixelRatio
+		}
+		@scene=new THREE.Scene
+		@scene.background = new THREE.Color "black"
+		light = new THREE.AmbientLight( 0xffffff )
+		@scene.add( light );
+
+		player=@al.get "player"
+		playerTex=@al.get "playerTex"
+
+		playerTex.magFilter=THREE.NearestFilter;
+		player.children[0].material.map=playerTex;
+		@scene.add( player )
+		@camera = new THREE.PerspectiveCamera 70, 140/204, 0.1, 1000
+		@camera.rotation.order="YXZ"
+		@camera.position.z = 210
+		@camera.position.y = 120
+		$(window).mousemove (z)->
+			xoff=z.pageX-window.innerWidth/2+112
+			yoff=z.pageY-window.innerHeight/2+170
+			left=xoff/(window.innerWidth/2-112)
+			right=xoff/(window.innerWidth/2+112)
+			top=yoff/(window.innerHeight/2-170)
+			bottom=yoff/(window.innerHeight/2+170)
+			wych_x=Math.PI/3
+			wych_y=Math.PI/4
+			if xoff>0
+				player.rotation.y=wych_x*right
+			else
+				player.rotation.y=wych_x*left
+			if yoff>0
+				player.children[1].children[0].children[2].children[0].children[0].rotation.x=wych_y*bottom
+			else
+				player.children[1].children[0].children[2].children[0].children[0].rotation.x=wych_y*top
+	render:()->
+		@renderer.render @scene, @camera
+	show:()->
+		@canvas.style.display="block"
+	hide:()->
+		@canvas.style.display="none"
+export {PlayerInInventory}

coffee/client/module/World/World.coffee

@@ -98,7 +98,6 @@ class World
 			#Kasowanie Meshy, które mają znacznik .todel
 			for i of cellBlackList
 				if cellBlackList[i] is true
-					console.log @cellMesh[i]
 					@cellMesh[i].geometry.dispose()
 					@cellMesh[i].material.dispose()
 					@scene.remove @cellMesh[i]

coffee/client/module/index.coffee

@@ -11,12 +11,20 @@ import {RandomNick} from './RandomNick.js'
 import {GUI} from './jsm/libs/dat.gui.module.js'
 import {Chat} from './Chat.js'
 import {Entities} from './Entities.js'
+import {PlayerInInventory} from './PlayerInInventory.js'
 
 class Game
 	constructor:(options)->
 		_this=@
 		@al=options.al
 		@canvas=document.querySelector '#c'
+		@pcanvas=document.querySelector '#c_player'
+
+		@pii=new PlayerInInventory {
+			canvas:@pcanvas
+			al:@al
+		}
+
 		@renderer=new THREE.WebGLRenderer {
 			canvas:@canvas
 			PixelRatio:window.devicePixelRatio
@@ -66,6 +74,7 @@ class Game
 			socket:@socket
 			TWEEN
 			fov:70
+			pii:@pii
 		}
 
 		@chat=new Chat {
@@ -188,6 +197,8 @@ class Game
 
 		TWEEN.update()
 		@renderer.render @scene, @camera
+		if @FPC.gameState is "inventory"
+			@pii.render()
 		@inv_bar.tick()
 		return
 new AssetLoader (al)->

src/client/assets/assetLoader.json

@@ -18,5 +18,13 @@
 	"blocksTex":{
 		"path":"assets/blocks/blocks.json",
 		"type":"text"
+	},
+	"player":{
+		"path":"assets/models/player.fbx",
+		"type":"fbx"
+	},
+	"playerTex":{
+		"path":"assets/models/player.png",
+		"type":"texture"
 	}
 }

src/client/assets/models/player.blend

@@ -1,13 +1,22 @@
 
 body { margin: 0; background:black;}
-canvas {
+#c {
   display: block;
   width:100%;
   height:100%;
   position:fixed;
   top:0px;
   left:0px
 }
+#c_player{
+	display:block;
+	position:fixed;
+	width:140px;
+	height:204px;
+	top:calc(50% - 220px);
+	left:calc(50% - 180px);
+	z-index:9999;
+}
 
 .cross{
   z-index:9;
@@ -213,6 +222,7 @@ canvas {
   background-repeat: no-repeat;
   background-size: 750px auto;
   position:fixed;
+	image-rendering:pixelated;
   top:50%;
   left:50%;
   width:515px;
@@ -248,6 +258,7 @@ canvas {
 	background-position: 0px -61px;
 	background-size: 700px auto;
 	position:fixed;
+	image-rendering:pixelated;
 	bottom:-4px;
 	width:66px;
 	height:66px;