Question

Hello Guys我正在尝试使用raycaster选择一个对象，我希望它能够更改所选第一个对象的材质。在我选择对象之前，一切顺利。如果我选择第一个元素，则只有一个对象发生变化。

如果我遍历列表，大部分内容会发生变化，但有时候即使我点击空白部分，部分也会发生变化

我的假设是，我是如何加载模型或光线施法者得到错误的点位置

我已经发布了以下代码，帮助我们不胜感激。

var camera, scene, renderer, loader, controls, play;
var jetEngine = [];
var x = 0;
var texture = THREE.ImageUtils.loadTexture('images/metal2.jpg');
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(10, 10);
var play = false;
var container;
var $container;
var _this;

function Jet($con) {

  $container = $con;
  _this = this;
  width = $con.width();
  height = $con.height();


  renderer = new THREE.WebGLRenderer({alpha: true});
  renderer.setClearColor(0xffffff, 1);
  renderer.setSize(width, height);
  $container.append(renderer.domElement);
  raycaster = new THREE.Raycaster();
  camera = new THREE.PerspectiveCamera(60, width / height, 1, 2000);
  camera.position.z = 200;
  camera.position.y = 0;
  camera.position.x = 30;
  controls = new THREE.TrackballControls(camera,renderer.domElement );
  controls.rotateSpeed = 1.0;
  controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;
  controls.noZoom = false;
  controls.noPan = false;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;
  controls.keys = [65, 83, 68];
  scene = new THREE.Scene();
  loader = new THREE.JSONLoader();

  loader.load("jetengine/fan.json", _this.addmodel);
  loader.load("jetengine/shaft.json", _this.addmodel);
  loader.load("jetengine/nose.json", _this.addmodel);
  loader.load("jetengine/compressor.json", _this.addmodel);
  loader.load("jetengine/compressor2.json", _this.addmodel);
  loader.load("jetengine/combustion.json", _this.addmodel);

  var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(0, 1, 0);
  scene.add(directionalLight);
  var light = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(light);
  window.addEventListener('resize', _this.onWindowResize, false);
  window.addEventListener( 'click', _this.onMouseMove, false );

  _this.animate();
}

Jet.prototype.changeColor = function () {
  for (i = 0; i < jetEngine.length; i++) {
    jetEngine[i].material = new THREE.MeshPhongMaterial({
      // light
      map: texture,
      // dark
      shininess: 50
    });

  }
};

Jet.prototype.playPause = function (btn) {

  play = !play;
  if(play){$(playbtn).html('Puase');}else{$(playbtn).html('Play');}
};

Jet.prototype.reset = function () {
  play = false;
  for (i = 0; i < jetEngine.length; i++) {
    jetEngine[i].material = new THREE.MeshNormalMaterial()
  }

  camera.position.z = 200;
  camera.position.y = 0;
  camera.position.x = 30;
  camera.lookAt(new THREE.Vector3(0,0,0));
};


Jet.prototype.addmodel = function (geometry, materials) {
  var obj = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
  obj.scale.set(15, 15, 15);
  jetEngine[x] = obj;
  scene.add(jetEngine[x]);
  x++;
};

Jet.prototype.onWindowResize = function () {

  width = container.width();
  height = container.height();
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  controls.handleResize();
};

Jet.prototype.animate = function () {
  if (play) {
    if (jetEngine[0] != null) {
      try{
        jetEngine[0].rotateZ(1);
        jetEngine[1].rotateZ(1);
        jetEngine[2].rotateZ(10);
        jetEngine[3].rotateZ(0);
        jetEngine[4].rotateZ(1);
        jetEngine[5].rotateZ(30);
      }catch (err){

      }

    }
  }
  requestAnimationFrame(_this.animate);
  renderer.render(scene, camera);
  controls.update();
};

Jet.prototype.onMouseMove = function( e ) {

  var isHovered = $container.is(":hover");
  console.log(isHovered);
  if (isHovered) {
    mouseVector = new THREE.Vector3();
    mouseVector.x = 2 * (e.clientX / width ) - 1;
    mouseVector.y = 1 - 2 * ( e.clientY / height );
    var vector = mouseVector.clone().unproject(camera);
    var direction = new THREE.Vector3(0, 0, -1).transformDirection(camera.matrixWorld);
    raycaster.set(vector, direction);
    var intersects = raycaster.intersectObjects(jetEngine);
    var intersection = intersects[0];
    obj = intersection.object;
    obj.material = new THREE.MeshPhongMaterial({
        // light
        map: texture,
        // dark
        shininess: 50
      });
  }
}

更新虽然感谢Almaz Vildanov的eventControl脚本非常有用。我决定再看一下代码来确定问题。

问题在于渲染器位于嵌套div中，并且错误地计算了射线的初始坐标。要解决这个问题，请用以下方法替换mousevector：

var mouse = { x: 0, y: 0 };
mouse.x = ((event.clientX - $container.offset().left) /$container.width() ) * 2 - 1;
mouse.y =  -(((event.clientY - $container.offset().top) / $container.innerHeight() ) * 2 - 1);
console.log('x: ' + mouse.x+ '|    y:'+ mouse.y);

vector.set( mouse.x, mouse.y, 0.5 );
vector.unproject( camera );

raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

其中$ container是渲染器所在的嵌套div。

Answer 1

尝试完成此example。查看控制台中的消息。

<script src="js/controls/EventsControls.js"></script>

EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls.draggable = false;

EventsControls.onclick = function() {

   console.log( this.focused.name );

}

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/Tux.js", addModelToScene ); 


function addModelToScene( geometry, materials ) {

   var material = new THREE.MeshFaceMaterial( materials );
   model = new THREE.Mesh( geometry, material );
   model.scale.set( 10, 10, 10 ); model.name = 'Tux';
   model.rotation.x = -Math.PI/2; 
   model.position.set( 175, 45, 125 );
   scene.add( model ); 
   EventsControls.attach( model );

}

Three.js raycaster没有选择正确的对象

1 个答案: