【发布时间】:2018-12-18 08:02:36
【问题描述】:
我想通过 Three.js 使用 html / javascript 制作游戏。 我添加了移动道路并制作了移动相机的功能,就像您使用箭头键移动汽车一样。
现在我需要相机具有汽车的纹理,这样我们才能真正移动汽车。 我已经搜索了互联网并没有找到任何有用的想法。 有一个代码:
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xDDDDDD, 1);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
var camera = new THREE.PerspectiveCamera(50, WIDTH/HEIGHT, 0.1, 10000);
camera.position.z = 50;
scene.add(camera);
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
var Texture = new THREE.TextureLoader().load( "images/road1.jpg" );
Texture.wrapS = THREE.RepeatWrapping;
Texture.wrapT = THREE.RepeatWrapping;
Texture.repeat.set( 1, 5 );
var Material = new THREE.MeshBasicMaterial( { map: Texture, side: THREE.DoubleSide } );
var Geometry = new THREE.PlaneGeometry(10, 50, 1, 1);
var plane = new THREE.Mesh(Geometry, Material);
plane.rotation.set(90, 0, 0);
plane.material.map.offset.y = 1.5;
scene.add(plane);
function render() {
requestAnimationFrame(render);
if(up==true)
{
speed+=0.0004;
if(speed>max)
{
speed=max;
}
console.log("speed"+speed );
}
if(down==true)
{
speed-=0.0001;
if(speed<0.001)
{
speed=0;
}
}
if(left==true)
{
camera.position.x-=0.05;
console.log("camera left" +camera.position.x );
}
if(right==true)
{
camera.position.x+=0.05;
console.log("camera right" +camera.position.x );
}
if(up==false)
{
if(speed>0)
{
speed-=0.0003;
}
}
plane.material.map.offset.y -=speed;
renderer.render(scene, camera);
}
render();
我删除了大部分代码,以便您可以看到我在做什么以及我需要什么帮助。 /////之间是相机的代码。我需要这台相机有纹理:)
【问题讨论】:
-
您是否尝试找到汽车的 obj 文件?您需要使用 OBJLoader2 加载 obj 文件并添加对象并将相机和汽车对象一起移动
-
我的文件夹中有一张汽车图像,仅此而已。我得到了 60% 的代码,我必须添加图形 + 动作。我不擅长 javascript。
标签: javascript html three.js