用3D帆布球replace一个div(带有球形图片)

我想制作一个游戏,你必须把球保持在一个绿色的平台上。 在这一点上,球是一个球的形象。 你可以在球场上移动球,一切都很好。

在这里看到它(首先点击1)。

当你使用箭头键,你可以移动球(实际上你移动一个div )。 这看起来有点假,所以我想用一个真正的3D帆布球。 我在这里看到一个很好的例子。 (向下滚动到页面的一半,在标题上方会看到一个带有球的笑脸:平滑)

那么我怎么能用这个球进入我的比赛? 我有以下代码的球:

  // build the ball and draw its texture with a 2d canvas ------------------------------------------- var buildBall = function() { // create a canvas to draw the ball's texture var ballCanvas = document.createElement('canvas'); ballCanvas.width = 64; ballCanvas.height = 64; var ballContext = ballCanvas.getContext('2d'); // draw 2 colored halves of the 2d canvas ballContext.fillStyle = "#f8ae44"; ballContext.fillRect(0, 0, ballCanvas.width, ballCanvas.height/2); ballContext.fillStyle = "#ffda4e"; ballContext.fillRect(0, ballCanvas.height/2, ballCanvas.width, ballCanvas.height/2); // create the THREE texture object with our canvas var ballTexture = new THREE.Texture( ballCanvas ); ballTexture.needsUpdate = true; // create the physijs-enabled material with some decent friction & bounce properties var ballMaterial = Physijs.createMaterial( new THREE.MeshLambertMaterial({ map: ballTexture, shininess: 10, color: 0xdddddd, emissive: 0x111111, side: THREE.FrontSide }), .6, // mid friction .5 // mid restitution ); ballMaterial.map.wrapS = ballMaterial.map.wrapT = THREE.RepeatWrapping; ballMaterial.map.repeat.set( 1, 1 ); //THIS PART IS FOR QUESTION 2 // create the physics-enabled sphere mesh, and start it up in the air ball = new Physijs.SphereMesh( new THREE.SphereGeometry( 30, 32, 32 ), ballMaterial, 100 ); ball.position.y = 500; ball.receiveShadow = true; ball.castShadow = true; scene.add( ball ); }; 

我知道我必须实现three.js来完成这个工作,但是我怎样才能让div取代这个3Dcanvas球,保持所有其他的工作(使用箭头移动,移动球的速度,平台等)?

那么,这些是非常不同的东西。 你应该扔掉你当前的代码,直接重写为three.js。

但:

逻辑应该与渲染分离。 只要你有你的“球位置”variables,你可以在3D上使用它们。

创建一个three.js场景,添加一个平面,一个相机和一个球体,然后根据键盘input移动球体。

当它出来的时候检测(如果你不想打扰物理,你可以检测到它的坐标是否在绿色的地形之外,然后以小的速度开始下降)。 你不需要物理引擎。