1
我剛剛使用Three.js，並且正在使用它來學習，所以希望這不是一個荒謬的問題。Three.js - 我如何擺脫我的物體上閃爍的紅燈
我的網格物體上有一個奇怪的過渡紅色，它將圖像/紋理變爲紅色，但我不知道它來自哪裏。我試圖移動相機的角度，但沒有運氣。
任何幫助表示讚賞！
這是代碼：
<body>
<div id="container"></div>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/FirstPersonControls.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script>
if (! Detector.webgl) Detector.addGetWebGLMessage();
var container;
var camera, controls, scene, renderer;
var light, pointLight;
var mesh, mesh1, mesh2, mesh3, mesh4, mesh5;
var material_sphere1, material_sphere2, material_sphere3, material_sphere4, material_sphere5;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 500);
camera.position.set(0, 25, 0);
var listener = new THREE.AudioListener();
camera.add(listener);
controls = new THREE.FirstPersonControls(camera);
controls.movementSpeed = 160;
controls.lookSpeed = 0.08;
controls.noFly = true;
controls.lookVertical = false;
scene = new THREE.Scene();
var texture = THREE.ImageUtils.loadTexture('http://tam.outbrain.com/anita/vr-module-rec-by-nytimes.png', {}, function(){
// use to test when image gets loaded if it does
// alert('texture loaded')
},
function(){
alert('error')
});
var texture2 = THREE.ImageUtils.loadTexture('http://tam.outbrain.com/anita/vr-module-rec-by-snl.png', {}, function(){
// use to test when image gets loaded if it does
// alert('texture loaded')
},
function(){
alert('error')
});
var texture3 = THREE.ImageUtils.loadTexture('http://tam.outbrain.com/anita/vr-module-rec-by-toms.png', {}, function(){
// use to test when image gets loaded if it does
// alert('texture loaded')
},
function(){
alert('error')
});
var texture4 = THREE.ImageUtils.loadTexture('http://tam.outbrain.com/anita/vr-module-rec-by-verse.png', {}, function(){
// use to test when image gets loaded if it does
// alert('texture loaded')
},
function(){
alert('error')
});
var texture5 = THREE.ImageUtils.loadTexture('http://tam.outbrain.com/anita/vr-module-rec-by-whats-happening.png', {}, function(){
// use to test when image gets loaded if it does
// alert('texture loaded')
},
function(){
alert('error')
});
var sphere = new THREE.BoxGeometry(1, 30, 30);
var sphere2 = new THREE.BoxGeometry(1, 30, 30);
var sphere3 = new THREE.BoxGeometry(1, 30, 30);
var sphere4 = new THREE.BoxGeometry(1, 30, 30);
var sphere5 = new THREE.BoxGeometry(1, 30, 30);
material_sphere1 = new THREE.MeshBasicMaterial({ map: texture, color: 0x000000});
material_sphere2 = new THREE.MeshBasicMaterial({ map: texture2, color: 0x000000});
material_sphere3 = new THREE.MeshBasicMaterial({ map: texture3, color: 0x000000});
material_sphere4 = new THREE.MeshBasicMaterial({ map: texture4, color: 0x000000});
material_sphere5 = new THREE.MeshBasicMaterial({ map: texture5, color: 0x000000});
// sound spheres
var mesh1 = new THREE.Mesh(sphere, material_sphere1);
mesh1.position.set(42, 25, 0);
scene.add(mesh1);
//
var mesh2 = new THREE.Mesh(sphere2, material_sphere2);
mesh2.position.set(30, 25, 35);
mesh2.rotation.y = -Math.PI/4;
scene.add(mesh2);
//
var mesh3 = new THREE.Mesh(sphere3, material_sphere3);
mesh3.position.set(-5, 25, 50);
mesh3.rotation.y = -Math.PI/2;
scene.add(mesh3);
//
var mesh4 = new THREE.Mesh(sphere4, material_sphere4);
mesh4.position.set(30, 25, -35);
mesh4.rotation.y = -Math.PI/-4;
scene.add(mesh4);
//
var mesh5 = new THREE.Mesh(sphere5, material_sphere5);
mesh5.position.set(-5, 25, -50);
mesh5.rotation.y = -Math.PI/-2;
scene.add(mesh5);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.innerHTML = "";
container.appendChild(renderer.domElement);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
controls.handleResize();
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta(),
time = clock.getElapsedTime() * 5;
controls.update(delta);
material_sphere1.color.setHSL(0.0, 0.3 + 0.7 * (1 + Math.cos(time))/2, 0.5);
material_sphere2.color.setHSL(0.0, 0.3 + 0.7 * (1 + Math.cos(time))/2, 0.5);
material_sphere3.color.setHSL(0.0, 0.3 + 0.7 * (1 + Math.cos(time))/2, 0.5);
material_sphere4.color.setHSL(0.0, 0.3 + 0.7 * (1 + Math.cos(time))/2, 0.5);
material_sphere5.color.setHSL(0.0, 0.3 + 0.7 * (1 + Math.cos(time))/2, 0.5);
renderer.render(scene, camera);
}
</script>
</body>
謝謝，我只是想通了這一點。我沒有意識到它會導致這樣的問題。我很欣賞答案！ – user3507831
不客氣=） – kaigorodov