利用HTML5构筑物理模拟环境3.5【转】

会飞的鱼

例２－５：TUTORIAL2_5.HTML（纹理）
利用Three.js 能够非常简单就实现纹理的粘贴。


到这里指定颜色物体的材质中，按照选择的纹理就能够自动进行纹理粘贴。 具体的代码如下。
var sphere, sphere2 ;

function initObject(){

  var texture1  = new THREE.ImageUtils.loadTexture('earthmap1k.jpg');

  sphere1 = new THREE.Mesh(

    new THREE.SphereGeometry(50,50,50),

    new THREE.MeshLambertMaterial({map: texture1})

  );

  scene.add(sphere1);

  sphere1.position.set(0,0,0);

  var texture2  = new THREE.ImageUtils.loadTexture('moonmap1k.jpg');

  sphere2 = new THREE.Mesh(

    new THREE.SphereGeometry(5,20,20),

    new THREE.MeshLambertMaterial({map: texture2})

  );

  scene.add(sphere2);

}但是，因为WebGL禁止使用跨域纹理资源，所以也不能读取本地的纹理资源。
鼠标事件

鼠标事件例

事件名 意思

onmousedown 鼠标被按下的时候

onmouseup 鼠标弹上的时候

onmousemove 鼠标移动的时候

onmouseover 鼠标移动到物体的上面的时候

onmouseout 鼠标从物体上面移出物体范围的时候
利用鼠标事件，在浏览器中进行特定的动作时， 就能够调用Javascript功能。 而且，事件发生时鼠标的位置也能够获取到。 关于鼠标事件的处理，具体参照下面。
window.onmousedown = function (ev){

  var x1 = ev.clientX; //マウスのx座標（ブラウザ上の座標）の取得

  var y1 = ev.clientY; //マウスのy座標（ブラウザ上の座標）の取得

  var x2 = ev.screenX; //マウスのx座標（ディスプレイ上の座標）の取得

  var y2 = ev.screenY; //マウスのy座標（ディスプレイ上の座標）の取得