Question

如何通过交互（特别是单击）更新Three.js对象的属性？例如，选择svg后如何关闭线框？

我已经阅读了How to Update Things上的three.js文档以及this question的答案，而我正竭尽全力共同回答自己的问题。

这是codepen和代码：

var container, camera, scene, renderer, geometry, cylinder1, material1, mesh1, stats;

function init() {

  container = document.getElementById( 'canvas' );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000);
    camera.position.z = 1000;
  scene.add(camera);

  var axis = new THREE.Vector3(1, 0, 0);
  var rad = THREE.Math.degToRad(90);
  var axesHelper = new THREE.AxesHelper( 500 );
  scene.add( axesHelper );

  cylinder1 = new THREE.CylinderGeometry(275, 275, 50, 100);
    material1 = new THREE.MeshBasicMaterial( {color: 'blue', wireframe: true} );
    mesh1 = new THREE.Mesh(cylinder1, material1);
  mesh1.rotateOnAxis(axis, rad);
  mesh1.position.set(0,0,25);
    scene.add(mesh1);
  mesh1.material.needsUpdate = true;


  $("#maj1").focus( function() {
    material1 = THREE.MeshBasicMaterial( {wireframe: false });
  })

    renderer = new THREE.WebGLRenderer({alpha: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

  stats = new Stats();
  stats.showPanel( 1, 2 );
  document.body.appendChild( stats.domElement );


    animate();

} init();

function animate() {
    requestAnimationFrame(animate); 
        renderer.render(scene, camera);

}

运行该代码将返回：

three.min.js：24未捕获的TypeError：this.setValues不是函数在Object.ua [作为MeshBasicMaterial]（three.min.js：24）在SVGSVGElement。（pen.js：26）在SVGSVGElement.dispatch（jquery.min.js：2）在SVGSVGElement.y.handle（jquery.min.js：2）

我知道我可能会把更新调用及其放置位置都弄错了...

如何通过单击更新three.js对象？

0 个答案: