#three.js
#three.js
Вопрос:
Я использую некоторые файлы для отображения журнального столика и стола кассиров в магазине. Я использовал three.js какое-то время для некоторых вещей, но мне раньше не приходилось загружать внешние файлы. По какой-то причине файлы obj загружаются и отображаются, но они только серые. Загрузка mtl не приводит к каким-либо ошибкам, они просто, похоже, не имеют никакого эффекта.
Элемент находится в code pen, где вы можете увидеть полный код js и html.
https://codepen.io/jfoxworth/pen/OJRzZKG
чтобы переместить человека в ручке, используйте w, s, a и d
var scene, camera, cameras, cameraIndex, renderer, controls, clock, player, xStart, zStart;
init();
function init(){
xStart = 0;
zStart = 0;
clock = new THREE.Clock();
scene = new THREE.Scene();
let col = 0x605050;
scene = new THREE.Scene();
scene.background = new THREE.Color( col );
scene.fog = new THREE.Fog( col, 10, 100 );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0, 4, 7);
camera.lookAt(0,1.5,0);
const ambient = new THREE.HemisphereLight(0xffffbb, 0x080820);
scene.add(ambient);
const light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set( 1, 10, 6);
scene.add(light);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/marble1.png', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0 );
texture.repeat.set( 20, 20 );
texture.wrapT = THREE.RepeatWrapping;
const planeGeometry = new THREE.PlaneBufferGeometry(200, 200);
const planeMaterial = new THREE.MeshStandardMaterial({map:texture});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI/2;
scene.add(plane);
});
var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/wood1.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0 );
texture.repeat.set( 1, 1 );
// The walls
const wallmaterial = new THREE.MeshStandardMaterial({map: texture});
// Front Left wall
const wallgeometry1 = new THREE.BoxGeometry(22,10,0.3);
wall1 = new THREE.Mesh(wallgeometry1, wallmaterial);
wall1.position.x=-13 xStart;
wall1.position.z=-4 zStart;
scene.add(wall1);
// Front right wall
const wallgeometry2 = new THREE.BoxGeometry(4,10,0.3);
wall2 = new THREE.Mesh(wallgeometry2, wallmaterial);
wall2.position.x=4 xStart;
wall2.position.z=-4 zStart;
scene.add(wall2);
// main right wall
const wallgeometry3 = new THREE.BoxGeometry(16,10,0.3);
wall3 = new THREE.Mesh(wallgeometry3, wallmaterial);
wall3.position.x=5.75 xStart;
wall3.position.z=-12 zStart;
wall3.rotateY(Math.PI/2);
scene.add(wall3);
// main back wall
const wallgeometry4 = new THREE.BoxGeometry(30,10,0.3);
wall4 = new THREE.Mesh(wallgeometry4, wallmaterial);
wall4.position.x=-9 xStart;
wall4.position.z=-20 zStart;
scene.add(wall4);
// main left wall
const wallgeometry5 = new THREE.BoxGeometry(16,10,0.3);
wall5 = new THREE.Mesh(wallgeometry5, wallmaterial);
wall5.position.x=-24 xStart;
wall5.position.z=-12 zStart;
wall5.rotateY(Math.PI/2);
scene.add(wall5);
// dr wall 1
const wallgeometry6 = new THREE.BoxGeometry(5,10,0.3);
wall6 = new THREE.Mesh(wallgeometry6, wallmaterial);
wall6.position.x=-10 xStart;
wall6.position.z=-12 zStart;
wall6.rotateY(Math.PI/2);
scene.add(wall6);
// dr wall 2
const wallgeometry7 = new THREE.BoxGeometry(5,10,0.3);
wall7 = new THREE.Mesh(wallgeometry7, wallmaterial);
wall7.position.x=-16 xStart;
wall7.position.z=-12 zStart;
wall7.rotateY(Math.PI/2);
scene.add(wall7);
// dr wall 3
const wallgeometry8 = new THREE.BoxGeometry(6.5,10,0.3);
wall8 = new THREE.Mesh(wallgeometry8, wallmaterial);
wall8.position.x=-13 xStart;
wall8.position.z=-9.5 zStart;
scene.add(wall8);
// dr wall 4
const wallgeometry9 = new THREE.BoxGeometry(6.5,10,0.3);
wall9 = new THREE.Mesh(wallgeometry9, wallmaterial);
wall9.position.x=-13 xStart;
wall9.position.z=-14.5 zStart;
scene.add(wall9);
} );
/*
// The large racks of clothes
var loader = new THREE.OBJLoader();
// Rack to the right as you walk in
loader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/clothes1.obj', function ( rack1 ) {
rack1.position.x=5;
rack1.position.z=-10;
scene.add( rack1 );
// Rack to the left as you walk in
const rack2 = rack1.clone();
rack2.position.x=-7;
rack2.position.z=-5;
rack2.rotateY(Math.PI/2);
scene.add( rack2 );
} );
*/
var loader = new THREE.OBJLoader();
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/coffee_table.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/coffee_table.obj', function ( object ) {
mesh = object;
mesh.scale.set(0.1,0.1,0.1);
mesh.position.x=1 xStart;
mesh.position.z=0 zStart;
scene.add( mesh );
} );
} );
// Coffee Tables
loader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/coffee_table.obj', function ( ct1 ) {
ct1.scale.set(0.1,0.1,0.1);
ct1.position.x=-4 xStart;
ct1.position.z=-10 zStart;
scene.add( ct1 );
const ct2 = ct1.clone();
ct2.position.x=-4 xStart;
ct2.position.z=-14 zStart;
scene.add( ct2 );
} );
// The cashiers table
loader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/cashier.obj', function ( cash ) {
cash.scale.set(0.035,0.035,0.035);
cash.position.x=-18 xStart;
cash.position.z=-7 zStart;
scene.add( cash );
} );
/*
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/coffee_table.mtl', function( ct1 ) {
ct1.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( ct1 );
loader.load( 'https://makstudio.s3.us-east-2.amazonaws.com/objfiles/coffee_table.obj', function ( ct1 ) {
ct1.scale.set(0.1,0.1,0.1);
ct1.position.x=-15;
ct1.position.y=0;
scene.add( ct1 );
} );
} );
*/
const grid = new THREE.GridHelper( 200, 80);
scene.add( grid );
//Add meshes here
player = new THREE.Group();
scene.add(player);
const bodyGeometry = new THREE.CylinderBufferGeometry(0.5, 0.3, 1.6, 20);
const material = new THREE.MeshStandardMaterial({color: 0xffff00 });
const body = new THREE.Mesh(bodyGeometry, material);
body.position.y = 0.8;
body.scale.z = 0.5;
player.add(body);
const headGeometry = new THREE.SphereBufferGeometry(0.3, 20, 15);
const head = new THREE.Mesh(headGeometry, material);
head.position.y = 2.0;
player.add(head);
cameras = [];
cameraIndex = 0;
const followCam = new THREE.Object3D();
followCam.position.copy(camera.position);
player.add(followCam);
cameras.push(followCam);
const frontCam = new THREE.Object3D();
frontCam.position.set(0, 3, -8);
player.add(frontCam);
cameras.push(frontCam);
const overheadCam = new THREE.Object3D();
overheadCam.position.set(-10, 20, -10);
cameras.push(overheadCam);
addKeyboardControl();
const btn = document.getElementById('camera-btn');
btn.addEventListener('click', changeCamera);
window.addEventListener( 'resize', resize, false);
update();
}
function changeCamera(){
cameraIndex ;
if (cameraIndex>=cameras.length) cameraIndex = 0;
}
function addKeyboardControl(){
document.addEventListener( 'keydown', keyDown );
document.addEventListener( 'keyup', keyUp );
}
function keyDown(evt){
let forward = (player.userData!==undefined amp;amp; player.userData.move!==undefined) ? player.userData.move.forward : 0;
let turn = (player.userData!=undefined amp;amp; player.userData.move!==undefined) ? player.userData.move.turn : 0;
switch(evt.keyCode){
case 87://W
forward = -1;
break;
case 83://S
forward = 1;
break;
case 65://A
turn = 1;
break;
case 68://D
turn = -1;
break;
}
playerControl(forward, turn);
}
function keyUp(evt){
let forward = (player.userData!==undefined amp;amp; player.userData.move!==undefined) ? player.userData.move.forward : 0;
let turn = (player.move!=undefined amp;amp; player.userData.move!==undefined) ? player.userData.move.turn : 0;
switch(evt.keyCode){
case 87://W
forward = 0;
break;
case 83://S
forward = 0;
break;
case 65://A
turn = 0;
break;
case 68://D
turn = 0;
break;
}
playerControl(forward, turn);
}
function playerControl(forward, turn){
if (forward==0 amp;amp; turn==0){
delete player.userData.move;
}else{
if (player.userData===undefined) player.userData = {};
this.player.userData.move = { forward, turn };
}
}
function update(){
requestAnimationFrame( update );
renderer.render( scene, camera );
const dt = clock.getDelta();
if (player.userData!==undefined amp;amp; player.userData.move!==undefined){
player.translateZ(player.userData.move.forward * dt * 5);
player.rotateY(player.userData.move.turn * dt);
}
camera.position.lerp(cameras[cameraIndex].getWorldPosition(new THREE.Vector3()), 0.05);
const pos = player.position.clone();
pos.y = 3;
camera.lookAt(pos);
cameras[2].position.x = pos.x;
cameras[2].position.z = pos.z;
}
function resize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
Комментарии:
1. Кажется, MTL загружен правильно, и применяется материал, на который ссылается файл OBJ. Однако материал имеет светло-серый цвет, поэтому вы, вероятно, не увидите большой разницы по сравнению с материалом по умолчанию.
2. Модели имеют окраску темного дерева сверху и металл для ножек. Нет материала, который применяется к объектам в code pen
3. ОК. Похоже, что файлы применяются. В том, как я их загрузил, должна быть какая-то ошибка?