Как выбрать грань в BufferGeometry в ТРИ. js? - PullRequest
0 голосов
/ 21 февраля 2020

Как кто-то совершенно новый для 3D-моделирования и ТРИ. js, я пытался сделать простую вращающуюся версию личного lo go. Мне удалось создать простую модель lo go и заставить ее вращаться, но я не смог дать разным лицам разные материалы ( Как то, что было сделано с текстом здесь ) , Модель находится здесь.

Мой код выглядит следующим образом:

var scene, camera, material, loader, cube, renderer, controls, water;
//Scene
scene = new THREE.Scene();
// get the div that will hold the renderer
container = document.getElementById('logosec');
//Camera
camera = new THREE.PerspectiveCamera( 55, $(container).width()/ $(container).height(), 1, 20000 );
camera.position.set( 0, 0, 110 );
//Test at colours
var Mat1 = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var Mat2 = new THREE.MeshBasicMaterial( { color: 0x000088 } );
var MatArray = [Mat1, Mat2];
//Loader
OBJLoader = new THREE.OBJLoader();
OBJLoader.load('oxocero7.obj', function( object ) {
    logo = object.children[0].geometry;
    logo.addGroup(0,logo.getAttribute("position").count);
    var logo2 = new THREE.Mesh( logo, MatArray );
    logo2.scale.set (0.1, 0.1, 0.1 );
    logo2.rotation.set ( -Math.PI*0.5, 0, 0 );
    logo2.position.set ( -40, 38, 0 );
    scene.add( logo2 );
});
//Renderer
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setPixelRatio( window.devicePixelRatio );                                   
renderer.setSize($(container).width(), $(container).height());
container.appendChild( renderer.domElement );    
//Controls 
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enablePan = false;
controls.enableZoom = false;
controls.maxPolarAngle = 1.6;
controls.minPolarAngle = 0.2;
controls.enabled = false;                                      
// movement - please calibrate these values
ySpeed = 0.005;
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
    camera.aspect = $(container).width()/ $(container).height();
    renderer.setSize($(container).width(), $(container).height());
    camera.updateProjectionMatrix();
};
//Anim
animate = function () {
    requestAnimationFrame( animate );
    controls.autoRotate = true;
    controls.autoRotateSpeed = 0.5;
    controls.update()
    renderer.render( scene, camera );
};
animate();
...