我正在使用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();
}