I just started learning three.js 2 days ago and I'm a bit of a newbie.
After drawing a box on SketchUp, exporting it as a collada file (.dae), and loading it into a scene with three.js, I tried tiling the object with textures but unfortunately, I failed.
My goal was to tile this texture:
https://i.sstatic.net/HUbPx.jpg
However, what I ended up getting was different:
https://i.sstatic.net/MDH9B.jpg
Below is my code:
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, controls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 500 );
camera.position.set(-6,1,-3);
scene = new THREE.Scene();
// collada
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'kutu.dae', function(collada) {
var object = collada.scene;
//object.scale.set( 2, 2, 2 );
object.position.set(.18, 0, -.70 );
//var material = new THREE.MeshLambertMaterial({color: 0xff00ff});
var texture = new THREE.TextureLoader().load( "desen.jpg" );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 2, 2 );
texture.minFilter = THREE.LinearFilter;
var material = new THREE.MeshPhongMaterial( {
map: texture,
transparent: false
});
console.log(material);
object.traverse( function (child) {
if ( child instanceof THREE.Mesh ) {
//if(Math.random() < 0.5)
// child.material = material;
//else
child.material = material;
}
});
scene.add( object );
});
//
//var gridHelper = new THREE.GridHelper( 10, 20 );
//scene.add( gridHelper );
//
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, -1 ).normalize();
scene.add( directionalLight );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
controls.enablePan = false;
//
stats = new Stats();
document.body.appendChild( stats.dom );
//
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 );
render();
stats.update();
}
function render() {
renderer.render( scene, camera );
}
I would greatly appreciate any help...