javascript - 相机可以是纹理吗？

Question

我想使用 html/javascript 和 Three.js 制作游戏。我添加了移动道路并制作了移动相机的功能，就像您使用箭头键移动汽车一样。

现在我需要相机具有汽车的纹理，这样我们才能实际移动汽车。我已经在互联网上搜索过，但没有找到任何有用的想法。有一个代码:

    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/