added some webgl boxes

2025-12-20 10:47:35 -05:00 · 2022-04-14 15:43:00 -05:00
parent 44c6d51497
commit 520fe84a86
13 changed files with 126451 additions and 0 deletions
--- a/pyscriptjs/examples/webgl/boxes/js/demo.js
+++ b/pyscriptjs/examples/webgl/boxes/js/demo.js
@@ -0,0 +1,134 @@
+var scene, camera, renderer, mesh;
+var meshFloor, ambientLight, light;
+
+var crate, crateTexture, crateNormalMap, crateBumpMap;
+
+var keyboard = {};
+var player = { height:1.8, speed:0.2, turnSpeed:Math.PI*0.02 };
+var USE_WIREFRAME = false;
+
+function init(){
+	scene = new THREE.Scene();
+	camera = new THREE.PerspectiveCamera(90, 1280/720, 0.1, 1000);
+
+	mesh = new THREE.Mesh(
+		new THREE.BoxGeometry(1,1,1),
+		new THREE.MeshPhongMaterial({color:0xff4444, wireframe:USE_WIREFRAME})
+	);
+	mesh.position.y += 1;
+	mesh.receiveShadow = true;
+	mesh.castShadow = true;
+	scene.add(mesh);
+
+	meshFloor = new THREE.Mesh(
+		new THREE.PlaneGeometry(20,20, 10,10),
+		new THREE.MeshPhongMaterial({color:0xffffff, wireframe:USE_WIREFRAME})
+	);
+	meshFloor.rotation.x -= Math.PI / 2;
+	meshFloor.receiveShadow = true;
+	scene.add(meshFloor);
+
+	ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
+	scene.add(ambientLight);
+
+	light = new THREE.PointLight(0xffffff, 0.8, 18);
+	light.position.set(-3,6,-3);
+	light.castShadow = true;
+	light.shadow.camera.near = 0.1;
+	light.shadow.camera.far = 25;
+	scene.add(light);
+
+
+	var textureLoader = new THREE.TextureLoader();
+	crateTexture = textureLoader.load("crate0/crate0_diffuse.jpg");
+	crateBumpMap = textureLoader.load("crate0/crate0_bump.jpg");
+	crateNormalMap = textureLoader.load("crate0/crate0_normal.jpg");
+
+	crate = new THREE.Mesh(
+		new THREE.BoxGeometry(3,3,3),
+		new THREE.MeshPhongMaterial({
+			color:0xffffff,
+			map:crateTexture,
+			bumpMap:crateBumpMap,
+			normalMap:crateNormalMap
+		})
+	);
+	scene.add(crate);
+	crate.position.set(2.5, 3/2, 2.5);
+	crate.receiveShadow = true;
+	crate.castShadow = true;
+
+	// Model/material loading!
+	var mtlLoader = new THREE.MTLLoader();
+	mtlLoader.load("models/Tent_Poles_01.mtl", function(materials){
+
+		materials.preload();
+		var objLoader = new THREE.OBJLoader();
+		objLoader.setMaterials(materials);
+
+		objLoader.load("models/Tent_Poles_01.obj", function(mesh){
+
+			mesh.traverse(function(node){
+				if( node instanceof THREE.Mesh ){
+					node.castShadow = true;
+					node.receiveShadow = true;
+				}
+			});
+
+			scene.add(mesh);
+			mesh.position.set(-5, 0, 4);
+			mesh.rotation.y = -Math.PI/4;
+		});
+
+	});
+
+
+	camera.position.set(0, player.height, -5);
+	camera.lookAt(new THREE.Vector3(0,player.height,0));
+
+	renderer = new THREE.WebGLRenderer();
+	renderer.setSize(1280, 720);
+
+	renderer.shadowMap.enabled = true;
+	renderer.shadowMap.type = THREE.BasicShadowMap;
+
+	document.body.appendChild(renderer.domElement);
+
+	animate();
+}
+
+function animate(){
+	requestAnimationFrame(animate);
+
+	mesh.rotation.x += 0.01;
+	mesh.rotation.y += 0.02;
+	crate.rotation.y += 0.01;
+
+	if(keyboard[87]){ // W key
+		camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
+		camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;
+	}
+	if(keyboard[83]){ // S key
+		camera.position.x += Math.sin(camera.rotation.y) * player.speed;
+		camera.position.z += -Math.cos(camera.rotation.y) * player.speed;
+	}
+	if(keyboard[65]){ // A key
+		camera.position.x += Math.sin(camera.rotation.y + Math.PI/2) * player.speed;
+		camera.position.z += -Math.cos(camera.rotation.y + Math.PI/2) * player.speed;
+	}
+	if(keyboard[68]){ // D key
+		camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed;
+		camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed;
+	}
+
+	if(keyboard[37]){ // left arrow key
+		camera.rotation.y -= player.turnSpeed;
+	}
+	if(keyboard[39]){ // right arrow key
+		camera.rotation.y += player.turnSpeed;
+	}
+
+	renderer.render(scene, camera);
+}
+
+window.onload = init;