taro.js实现一个三维重力操作小球撞击方块倒下代码

代码语言:html

所属分类:三维

代码描述:taro.js实现一个三维重力操作小球撞击方块倒下代码,这个官方的一个示例代码,演示如何通过taro创建一个三维游戏场景,按上下左右键操作小球,wasd键进行三维空间控制。

代码标签: taro.js 三维 重力 操作 小球 撞击 方块 倒下 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>Example</title>
		<style>
			html,
			body {
				margin: 0;
				height: 100%;
			}

			#c {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<canvas id="c"></canvas>
		<script type="module">
			import * as TARO from "//repo.bfw.wiki/bfwrepo/js/module/taro.module.js";

			let entity, geo, mat, mesh;

			const app = new TARO.App({canvas: document.getElementById("c")});

			TARO.registerComponent(
				"cameraController",
				class CameraController {
					init() {
						this.direction = new TARO.Vector3();
						this.input = this.entity.scene.app.input;
						this.entity.rotation.order = "YXZ";
						this.ball = this.entity.scene.getEntityByName("ball");

						window.addEventListener("pointerdown", () => {
							this.entity.app.renderer.domElement.requestPointerLock();
						});
						this.ball.getComponent('rigidbody').ref.addEventListener("collide", (c) => {
							console.log(c);
							this.ball.getComponent('audio').ref.play();
						});
					}
					update() {
						const ball = this.ball;

						if (this.input.getKeyDown("ArrowUp")) {
							ball.getComponent("rigidbody").ref.applyForce(
								new TARO.Vector3(0, 0, -200)
							);
						}
						if (this.input.getKeyDown("ArrowDown")) {
							ball.getComponent("rigidbody").ref.applyForce(
								new TARO.Vector3(0, 0, 200)
							);
						}
						if (this.input.getKeyDown("ArrowLeft")) {
							ball.getComponent("rigidbody").ref.applyForce(
								new TARO.Vector3(-200, 0, 0)
							);
						}
						if (this.input.getKeyDown("ArrowRight")) {
							ball.getComponent("rigidbody").ref.applyForce(
								new TARO.Vector3(200, 0, 0)
							);
						}

						if (this.input.getKey("KeyG")) {
							ball.scale.set(0.1, 0.1, 0.1);
						}

						if (this.input.getKey("KeyW")) {
							this.entity.translateZ(-0.1);
						}
						if (this.input.getKey("KeyS")) {
							this.entity.translateZ(0.1);
						}
						if (this.input.getKey("KeyA")) {
							this.entity.translateX(-0.1);
						}
						if (this.input.getKey("KeyD")) {
							this.entity.translateX(0.1);
						}
						if (this.input.getKey("Space")) {
							this.entity.translateY(0.1);
						}
						if (this.input.getKey("ShiftLeft")) {
							this.entity.translateY(-0.1);
						}
						this.entity.rotation.x -=
							this.input.pointerDelta.y * 0.001;
						this.entity.rotation.y -=
							this.input.pointerDelta.x * 0.001;
					}
				}
			);

			const scene = new TARO.Scene("scene");
			scene.background = new TARO.Color("skyblue");
			app.setScene(scene);
	.........完整代码请登录后点击上方下载按钮下载查看

网友评论0