three.js尝试（⼆）模拟游戏开发：3D⼈物在地图上⾏⾛
本次尝试，模拟了⼀个⼩⼈物在场景中⾏⾛，使⽤简单模型建⽴了森林，图⽚纹理模拟草地，加载3D模型呈现⼈物，使⽤按键asdw模拟⼈物的⾏⾛，⾏⾛和站⽴时⼈物的切换等。
主要⽤到点：3D模型的加载，模型的动画（⾏⾛与站⽴）之间的切换。
不⾜之处：没有检测碰撞与边界。
需要注意的是，代码需要运⾏在服务器端，切记。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta chart="UTF-8">
<style>
</style>
<title>测试</title>
<script src="../js/three.js"></script>
<script src="../js/dat.gui.min.js"></script>
<script src="../js/OrbitControls.js"></script>
<script src="../js/util.js"></script>
<script src="../js/GLTFLoader.js"></script>
</head>
<body>
<script>
var scene, camera, renderer, controls, flag = 1;
电视剧人间正道是沧桑var target;
var trees; // 荧光棒
var role; // 主⾓
var textPlane;
var stateList = {};
var actionMap = {
大红袍茶叶多少钱一斤up: { direction: 'up', rotation: Math.PI, axes: 'z' },
down: { direction: 'down', rotation: 0, axes: 'z' },
left: { direction: 'left', rotation: - Math.PI / 2, axes: 'x' },
right: { direction: 'right', rotation: Math.PI / 2, axes: 'x' }
};
var nopeAction = { direction: null };
var nextAction = { direction: 'down', rotation: 0 };
var clock, mixer, currentAction, previousAction, lastkey;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500);
成长故事camera.position.z = 20;
camera.lookAt(scene.position);
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.tSize(window.innerWidth, window.innerHeight);胡佛
abled = true;
pe = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();
clock = new THREE.Clock();
window.addEventListener('resize', onWindowResize, fal);
var axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
renderer.tSize(window.innerWidth, window.innerHeight);
}
function run() {
init();
createRole(); //创建⾓⾊
createAmbientLight(); // 绘制环境光
// createSpotlist(new THREE.Vector3(50, 50, 50), role);
createPlane(); // 创建舞台平⾯
createTrees(20);
window.addEventListener('keydown', keyPresd, fal);
window.addEventListener('keyup', keyUp, fal)
render();
}
function render() {
var dt = Delta();
if (mixer) mixer.update(dt);
requestAnimationFrame(render);
controls.update();
handleRoleAction();
}
run();
function createAmbientLight() {
var light = new THREE.AmbientLight(0xdddddd); // soft white light
scene.add(light);
}
function createPlane() {
//Create a plane that receives shadows (but does not cast them)
var planeGeometry = new THREE.PlaneBufferGeometry(1000, 1000);
var texture = new THREE.TextureLoader().load('../images/grasslight-big.jpg');
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
一帆风顺年年好的下联是什么
var planeMaterial = new THREE.MeshStandardMaterial({ map: texture, side: THREE.DoubleSide }); var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.y = -16;
scene.add(plane);
}
function createSpotlist(Vector3, target) {
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.t(Vector3.x, Vector3.y, Vector3.z);
spotLight.castShadow = true;
spotLight.angle = Math.PI / 18;
spotLight.shadow.mapSize.width = 512;
spotLight.shadow.mapSize.height = 512;
spotLight.ar = 0.5;
spotLight.shadow.camera.far = 500;
spotLight.shadow.camera.fov = 30;
spotLight.target = target;
scene.add(spotLight);
// Create a helper for the spotlight
// var helper = new THREE.SpotLightHelper(spotLight);
// scene.add(helper);
// //Create a helper for the shadow camera (optional)
/
/ var helper = new THREE.CameraHelper(spotLight.shadow.camera);
// scene.add(helper);
}
function createTrees(num) {
for (let i = 0; i < num; i++) {
let treeNode = new THREE.Object3D();
var treeTopGeo = new THREE.CylinderGeometry(0, 10, 20, 32);
var treeTopMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
墨西哥历史var treeTop = new THREE.Mesh(treeTopGeo, treeTopMaterial);
treeTop.position.y = 4; // 树底部中⼼点⾼度是-11，底部的上边⾼度是-6，这样树顶部中⼼点⾼度默认是0的话，下边是-10，如果想让下边⾼度为-6，则中⼼点⾼度为4
var treeBottomGeo = new THREE.CylinderGeometry(5, 5, 10, 32);
var treeBottomMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var treeBottom = new THREE.Mesh(treeBottomGeo, treeBottomMaterial);
treeBottom.position.y = -11; // 底⾯位置是-16，底部圆柱体中⼼点⾼度默认是0的话，底边⾼度是-5，所以将position.y设置为-11，这样下边⾼度是-16
的味道
treeNode.add(treeTop);
treeNode.add(treeBottom);
treeNode.position.ateRandomPos(-250, 250), 0, ateRandomPos(-250, 250));
scene.add(treeNode);
}
}
function createRole() {
// model
var loader = new THREE.GLTFLoader();
loader.load('../models/RobotExpressive.glb', function (gltf) {
role = gltf.scene;
role.position.y = -16;
mixer = new THREE.AnimationMixer(role);
stateList.Walking = mixer.clipAction(gltf.animations[10]);
stateList.Standing = mixer.clipAction(gltf.animations[8]);
// 设置下⾯两项主要是站着的时候，别抖了
stateList.Standing.clampWhenFinished = true;
stateList.Standing.loop = THREE.LoopOnce;
currentAction = stateList.Standing;
currentAction.play();
scene.add(role);
createSpotlist(new THREE.Vector3(50, 50, 50), role);
}, undefined, function (e) {
<(e);
});
}
function keyPresd(e) {
var key = event.keyCode;
if (lastkey != key) {
lastkey = key;
fadeToAction('Walking', 0.2);
}
switch (key) {
ca 87:
/*w*/
nextAction = actionMap.up;
break;
ca 65:
/*a*/
nextAction = actionMap.left;
break;
ca 83:
/*s*/
nextAction = actionMap.down;
break;
ca 68:
/*d*/
nextAction = actionMap.right;
break;
}
if (role) ation.y = ation;
}
function keyUp() {
lastkey = null;
nextAction = nopeAction;
fadeToAction('Standing', 0.2);
}
function handleRoleAction() {
if (role) {
if (nextAction.direction == 'down' || nextAction.direction == "right") {
flag = 1;
} el if (nextAction.direction == 'up' || nextAction.direction == "left") {
flag = -1;
}
el {
flag = 0;
}
role.position[nextAction.axes] += 0.2 * flag;
}
}
function fadeToAction(name, duration) {
previousAction = currentAction;
currentAction = stateList[name];
if (previousAction !== currentAction) {
previousAction.fadeOut(duration);
}
if (currentAction) {
currentAction
.ret()
.tEffectiveTimeScale(1)
.tEffectiveWeight(1)
.fadeIn(duration)
.play();
象征主义名词解释}
}
</script>
</body>
</html>
附上github链接：记得在服务端启动，直接浏览器运⾏是看不到图⽚、纹理以及动画原型的。
