0
我正在使用three.js現在有一個地板和一個車載的json加載場景。一切都很好，但汽車只是黑色而不是從攪拌機的紋理。有沒有可能直接用攪拌機的紋理輸出它，或者之後添加紋理？三個.js導入紋理
這是我使用的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>three.js - pointerlock controls</title>
<style>
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #eeeeee;
margin: 0;
overflow: hidden;
font-family: arial;
}
#blocker {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
#instructions {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
color: #ffffff;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/controls/PointerLockControls.js"></script>
<div id="blocker">
<div id="instructions">
<span style="font-size:40px">Click to move</span>
<br />
(WASD or Arrow Keys = Move, SPACE = Jump, MOUSE = Look around)
</div>
</div>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
var loader;
var mesh2;
var loadModel;
var controls,time = Date.now();
var objects = [];
var ray;
var blocker = document.getElementById('blocker');
var instructions = document.getElementById('instructions');
// http://www.html5rocks.com/en/tutorials/pointerlock/intro/
var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
if (havePointerLock) {
var element = document.body;
var pointerlockchange = function (event) {
if (document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element) {
controls.enabled = true;
blocker.style.display = 'none';
} else {
controls.enabled = false;
blocker.style.display = '-webkit-box';
blocker.style.display = '-moz-box';
blocker.style.display = 'box';
instructions.style.display = '';
}
}
var pointerlockerror = function (event) {
instructions.style.display = '';
}
// Hook pointer lock state change events
document.addEventListener('pointerlockchange', pointerlockchange, false);
document.addEventListener('mozpointerlockchange', pointerlockchange, false);
document.addEventListener('webkitpointerlockchange', pointerlockchange, false);
document.addEventListener('pointerlockerror', pointerlockerror, false);
document.addEventListener('mozpointerlockerror', pointerlockerror, false);
document.addEventListener('webkitpointerlockerror', pointerlockerror, false);
instructions.addEventListener('click', function (event) {
instructions.style.display = 'none';
// Ask the browser to lock the pointer
element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
if (/Firefox/i.test(navigator.userAgent)) {
var fullscreenchange = function (event) {
if (document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element) {
document.removeEventListener('fullscreenchange', fullscreenchange);
document.removeEventListener('mozfullscreenchange', fullscreenchange);
element.requestPointerLock();
}
}
document.addEventListener('fullscreenchange', fullscreenchange, false);
document.addEventListener('mozfullscreenchange', fullscreenchange, false);
element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;
element.requestFullscreen();
} else {
element.requestPointerLock();
}
}, false);
} else {
instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
}
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xffffff, 0, 750);
var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(1, 1, 1);
scene.add(light);
var light = new THREE.DirectionalLight(0xffffff, 0.75);
light.position.set(-1, - 0.5, -1);
scene.add(light);
controls = new THREE.PointerLockControls(camera);
scene.add(controls.getObject());
ray = new THREE.Raycaster();
ray.ray.direction.set(0, -1, 0);
// floor
geometry = new THREE.PlaneGeometry(2000, 2000, 100, 100);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(- Math.PI/2));
for (var i = 0, l = geometry.vertices.length; i < l; i ++) {
var vertex = geometry.vertices[ i ];
vertex.x += Math.random() * 20 - 10;
vertex.y += Math.random() * 2;
vertex.z += Math.random() * 20 - 10;
}
for (var i = 0, l = geometry.faces.length; i < l; i ++) {
var face = geometry.faces[ i ];
face.vertexColors[ 0 ] = new THREE.Color().setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75);
face.vertexColors[ 1 ] = new THREE.Color().setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75);
face.vertexColors[ 2 ] = new THREE.Color().setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75);
face.vertexColors[ 3 ] = new THREE.Color().setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75);
}
material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// objects
loader = new THREE.JSONLoader();
loadModel = function(geometry)
{
mesh2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/metal.jpg', new THREE.SphericalReflectionMapping()) }));
mesh2.scale.set(0.1, 0.1, 0.1);
mesh2.position.set(0, 1, 0);
mesh2.rotation.set(29.85, 3.14, 2);
scene.add(mesh2);
};
loader.load('blender.js/auto.js', loadModel);
//
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
//
controls.isOnObject(false);
ray.ray.origin.copy(controls.getObject().position);
ray.ray.origin.y -= 10;
var intersections = ray.intersectObjects(objects);
if (intersections.length > 0) {
var distance = intersections[ 0 ].distance;
if (distance > 0 && distance < 10) {
controls.isOnObject(true);
}
}
controls.update(Date.now() - time);
renderer.render(scene, camera);
time = Date.now();
}
</script>
</body>
</html>
與//objects的部分是我加載我已經嘗試添加一些示例質地不工作，以及汽車。最好的時候，我可以簡單地將混合器中的紋理與模型一起導入。
嘗試看看是否它可以幫助你：HTTP：// stackoverflow.com/questions/15192316/three-js-loading-model-with-jsonloader-loads-only-half-of-textures/15198090#15198090 – Popov 2013-03-11 13:07:19
是的，謝謝幫了我很多 – 2013-03-14 07:11:12