0

How can properties of a three.js object be updated via interaction--specifically a click? For example, how can I toggle the wireframe off when an svg is selected?

I have read the three.js docs on How to Update Things as well as the answers to this question which I'm struggling to pull together to answer my own.

Here's the codepen and the code:

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);

}

Running that code returns:

three.min.js:24 Uncaught TypeError: this.setValues is not a function at Object.ua [as MeshBasicMaterial] (three.min.js:24) at SVGSVGElement. (pen.js:26) at SVGSVGElement.dispatch (jquery.min.js:2) at SVGSVGElement.y.handle (jquery.min.js:2)

I know I'm likely getting both the update call and its placement wrong...

westcoast_509
  • 322
  • 1
  • 4
  • 13

0 Answers0