更改纹理onclick three.js

时间:2017-08-01 21:03:36

标签: javascript three.js

我正在使用three.js并尝试制作配置器,我需要更改

var texture = new THREE.TextureLoader().load( "js/textura.jpg" );

var texture = new THREE.TextureLoader().load( "js/textura2.jpg" );

但是我无法让它工作,我正在使用

<button onclick="THREE.TextureLoader().load(js/textura2.jpg)">CLICK</button>

我也有

texture.needsUpdate = true;

感谢

编辑:

$(document).ready(function(){
$("#boton2").click(function(){
  var loader = new THREE.JSONLoader();          

 loader.load( "js/maniqui.json", function(geometry) {

var texture = new THREE.TextureLoader().load( "js/textura3.jpg" );
 var material = new THREE.MeshLambertMaterial({map: texture});
 mesh = new THREE.Mesh(geometry, material);
 texture.needsUpdate = true;
 scene.add(mesh)

});

用这个我改变纹理,但它再次重新加载网格(我知道相当愚蠢)所以对于每个不同的纹理我有一个不同的按钮,我不能使它没有scene.add(网格)

这是主要代码

var scene, camera, renderer;





init();
animate();


function init() {


  scene = new THREE.Scene();
  var WIDTH = window.innerWidth,
      HEIGHT = window.innerHeight;


  renderer = new THREE.WebGLRenderer({antialias:true,alpha:true});
  renderer.setSize(WIDTH, HEIGHT);
  document.body.appendChild(renderer.domElement);


  camera = new THREE.PerspectiveCamera(15, WIDTH / HEIGHT, 0.1, 20000);
  camera.position.set(0,0,15);
  scene.add(camera);


  window.addEventListener('resize', function() {
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  });





scene.add(new THREE.AmbientLight( 0xffffff ));




  var loader = new THREE.JSONLoader();          

 loader.load( "js/maniqui.json", function(geometry) {

var texture = new THREE.TextureLoader().load( "js/textura.jpg" );
 var material = new THREE.MeshLambertMaterial({map:texture, color: 0xffffff});
 mesh = new THREE.Mesh(geometry, material);
 texture.needsUpdate = true;
 scene.add(mesh)

});

  controls = new THREE.OrbitControls(camera, renderer.domElement);

}





function animate() {


  requestAnimationFrame(animate);


  renderer.render(scene, camera);
  controls.update();

}

0 个答案:

没有答案