0
我在three.js中設置網格紋理：更改three.js紋理的麻煩
var container，stats; var camera，scene，projector，raycaster，renderer;
var mouse = new THREE.Vector2(), INTERSECTED;
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0,
target = new THREE.Vector3();
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 1, 1000);
scene = new THREE.Scene();
texture = THREE.ImageUtils.loadTexture("textures/DIVE_IMMO_00000.jpg");
var background = new THREE.MeshBasicMaterial({map: texture});
var sphere = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), background);
sphere.scale.x = -1;
scene.add(sphere);
//projector = new THREE.Projector();
//raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xf0f0f0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mousewheel', onDocumentMouseWheel, false);
document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
//
window.addEventListener('resize', onWindowResize, false);
}
接下來，我想使用按鈕更改此網格上的紋理。我已經嘗試：
function newTexture() {
sphere.material.texture = THREE.ImageUtils.loadTexture("textures/DIVE_IMMO_00004.jpg");
sphere.material.texture.needsUpdate = true;
}
也：
texture2 = THREE.ImageUtils.loadTexture("textures/DIVE_IMMO_00004.jpg"); and
function newTexture() {
background = new THREE.MeshBasicMaterial({map: texture2});
}
，但它不工作，我真的不明白爲什麼。 對不起，這個noob問題^^
UPDATE：FULL代碼頁
var container, stats;
var camera, scene, projector, raycaster, renderer;
var mouse = new THREE.Vector2(), INTERSECTED;
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0,
target = new THREE.Vector3();
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 1, 1000);
scene = new THREE.Scene();
//textures
texture = THREE.ImageUtils.loadTexture("textures/DIVE_IMMO_00000.jpg");
texture_salon= THREE.ImageUtils.loadTexture('textures/btn_salon.png');
//materials
var background = new THREE.MeshBasicMaterial({map: texture});
var mat_salon = new THREE.MeshBasicMaterial({ map: texture_salon })
mat_salon.transparent = true;
mat_salon.map.needsUpdate = true;
mat_salon.depthTest = false;
//Objects
var sphere = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), background);
sphere.scale.x = -1;
scene.add(sphere);
var plane_salon = new THREE.Mesh(new THREE.PlaneGeometry(80, 60), mat_salon);
plane_salon.position.set(-280, 0, 100);
plane_salon.lookAt(camera.position);
plane_salon.id = 01;
scene.add(plane_salon);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xf0f0f0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mousewheel', onDocumentMouseWheel, false);
document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function newTexture() {
sphere.material.map = THREE.ImageUtils.loadTexture("textures/DIVE_IMMO_00004.jpg");
sphere.material.map.needsUpdate = true;
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseDown(event) {
event.preventDefault();
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
var projector = new THREE.Projector();
var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(scene.children,true);
if (intersects.length > 0) {
SELECTED = intersects[0].object;
if (SELECTED.id == 01){
$('#plan').css('display', '');
$('#Menu-plan').css('height', '285px');
RotToKitchen();
}
}
}
function onDocumentMouseMove(event) {
lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat;
}
function onDocumentMouseUp(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseWheel(event) {
if (event.wheelDeltaY) {fov -= event.wheelDeltaY * 0.05;} // WebKit
else if (event.wheelDelta) {fov -= event.wheelDelta * 0.05;} // Opera/Explorer 9
else if (event.detail) {fov += event.detail * 1.0;} // Firefox
}
function animate() {
requestAnimationFrame(animate);
render();
}
function RotToKitchen() {
var id = requestAnimationFrame(RotToKitchen);
if (lon < 90) {lon +=0.85;}
else if (lon > 91) {lon -=0.85;}
else cancelAnimationFrame(id);
render();
}
function render() {
lat = Math.max(- 85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = 0 * Math.sin(phi) * Math.cos(theta);
target.y = 0 * Math.cos(phi);
target.z = 0 * Math.sin(phi) * Math.sin(theta);
camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 100 * Math.cos(phi);
camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
camera.lookAt(target);
renderer.render(scene, camera);
}
界定 '不工作'。 – 2015-01-21 13:11:11