【问题标题】:Can a camera be a texture?相机可以是纹理吗?
【发布时间】: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


【解决方案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/

【讨论】:

  • 嗯 :( 我们的教授告诉我们先让相机移动并给我们评分。那我得问问他这应该怎么做......
  • “让相机移动”并不意味着“给相机一个可见的纹理”。
  • 那么你甚至不需要添加汽车。想象一下,你是一辆车,相机是你的眼睛。当你在移动时,不需要看到自己
  • 也许这就是他想要的 :D 我会看到 ;P 但无论如何感谢您的帮助。现在我知道相机不能有纹理:D
  • 不客气,我认为这个答案可以满足您的问题。如果您的教授会问其他问题,请添加新问题
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-12-16
  • 2019-07-08
  • 2013-09-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多