示例

HTML

<body><h1>use WASD to move the cube</h1><div class="three"></div>
</body>

CSS

three{width: 800px;height: 800px;background: grey;
}

JS

// https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-sceneconst three = document.querySelector('.three');var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );var renderer = new THREE.WebGLRenderer();
// renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( 800, 800);three.appendChild( renderer.domElement );var geometry = new THREE.BoxGeometry( 6, 6, 6);
var material = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
var cube = new THREE.Mesh( geometry, material );
cube.position.y = 25;
scene.add( cube );var geometry = new THREE.TorusKnotGeometry( 3.0, .9, 100, 16 );
var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
var torusKnot = new THREE.Mesh( geometry, material );
torusKnot.position.y = 30;
torusKnot.position.x = -30;
scene.add( torusKnot );var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );const pointLight =new THREE.PointLight(0xFFFFFF);// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;// add to the scene
scene.add(pointLight);camera.position.z = 50;function animate() {requestAnimationFrame( animate );torusKnot.rotation.x += 0.01;torusKnot.rotation.y += 0.01;// cube.rotation.x += 0.01;// cube.rotation.y += 0.01;renderer.render( scene, camera );
}
animate();const step = 2;window.addEventListener('keydown', e => {if (e.code === 'KeyW') cube.position.y += step;if (e.code === 'KeyS') cube.position.y -= step;if (e.code === 'KeyA') cube.position.x -= step;if (e.code === 'KeyD') cube.position.x += step;// if (e.code === 'ArrowUp'){//   cube.position.y += 1;// }
})

使用WASD键移动对象相关推荐

python字典中的键是什么_在python字典中作为键的对象
我试图在python字典中使用一个对象作为键,但是它的行为方式让我无法完全理解. 首先,我创建一个以对象为键的字典:package_disseminators = { ContentType(&quo ...
WASD键控制物体移动
脚本挂在物体上 using System.Collections; using System.Collections.Generic; using UnityEngine; public class ...
EF ObjectStateManager 中已存在具有同一键的对象。ObjectStateManager 无法跟踪具有相同键的多个对象...
今天编码过程中遇到这个问题,用EF 更新数据库,将组织好的数据传递到ef的上下文中,本以为附加上去更新,一切就ok了,不过事实证明没这么顺利 ----------------------------- ...
java 上下键_java-同时使用WASD和方向键
我正在开发Processing(在 Java上运行)中的两人游戏.一个用户将使用WASD键控制其角色,而另一个用户将使用箭头键控制移动.我遇到的问题是,当按下箭头时,使用keyPressed会否定WA ...
containskey java_Java Map.containsKey()方法：判断Map集合对象中是否包含指定的键名
搜索热词 Java 集合类中的 Map.containsKey() 方法判断 Map 集合对象中是否包含指定的键名.如果 Map 集合中包含指定的键名,则返回 true,否则返回 false. 语法: ...
threejs以第一人称进行人物漫游，以wasd来控制人的模型，不使用PointerLockControls，需要碰撞检测。可以使用插件
Model: GPT-4 3 / 3 我想在threejs以第一人称进行人物漫游,以wasd来控制人的模型.如何做,不适用PointerLockControls,需要碰撞检测.可以使用插件. 要在Th ...
Asp.net 内置对象
(1)简述ASP．NET内置对象. 答:ASP．NET提供了内置对象有Page.Request.Response.Application.Session.Server.Mail和Cookies.这些对 ...
将嵌套的Python字典转换为对象？
我正在寻找一种优雅的方法来获取数据,该数据使用具有一些嵌套字典和列表(例如javascript样式的对象语法)的字典进行属性访问. 例如: >>> d = {'a': 1, 'b': ...
INPUT type=password 元素 | input type=password 对象
INPUT type=password 元素 | input type=password 对象属性描述 ACCESSKEY accessKey 设置或获取对象的快捷键. ATOMICSEL ...

使用WASD键移动对象

使用WASD键移动对象

示例

HTML

CSS

JS

使用WASD键移动对象相关推荐

最新文章

热门文章