Question

我想使用带有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();

我删除了很多代码，因此您可以看到我在做什么以及我需要什么帮助。在/////之间是相机代码。我需要此相机具有纹理：）

Answer 1

不，相机不能具有纹理，但您需要添加汽车对象并将相机放置在汽车内部或汽车顶部。我发现几个示例可以帮助您完成工作：

https://github.com/JunyiYang0925/Car_game_threejs

https://threejs.org/examples/webgl_materials_cars.html

https://github.com/Caesor/racing-game

http://learningthreejs.com/blog/2012/05/21/sport-car-in-webgl/

相机可以是纹理吗？

1 个答案: