Как кто-то совершенно новый для 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();