I am trying to create a Cube in Three.js with a different image as texture on each face of the cube.
How can I hide the edges/vertices of the mesh?
Code:
var container, camera, scene, renderer, cube;
init();
animate();
function init(){
container = document.getElementById('container');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
scene.add( camera );
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/' + i + '.png') } ) );
}
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 5,5,5, materials ), new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.add( cube );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render(){
cube.rotation.y += 0.005;
renderer.render( scene, camera );
}
I am trying to create a Cube in Three.js with a different image as texture on each face of the cube.
How can I hide the edges/vertices of the mesh?
Code:
var container, camera, scene, renderer, cube;
init();
animate();
function init(){
container = document.getElementById('container');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
scene.add( camera );
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/' + i + '.png') } ) );
}
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 5,5,5, materials ), new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.add( cube );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render(){
cube.rotation.y += 0.005;
renderer.render( scene, camera );
}
Share
Improve this question
edited Oct 4, 2012 at 20:37
Matthias
7,5216 gold badges57 silver badges90 bronze badges
asked Aug 14, 2012 at 21:47
ganggang
1,8202 gold badges24 silver badges37 bronze badges
3
- This code doesn't appear as though it would show edges... you would need to set a wireframe:true flag somewhere to see them. Could you post a live example of your code somewhere so we can see what you're talking about? – Stemkoski Commented Aug 15, 2012 at 2:25
- I would like to post an example on jsfiddle but it won’t work. – gang Commented Aug 20, 2012 at 14:58
-
When I use
overdraw: true
in the for loop, it doesn’t show the edges anymore. When I do not subdivide the mesh as EliSherer suggested, the faces of the cube shift in a strange way. See github./mrdoob/three.js/issues/659 – gang Commented Aug 20, 2012 at 15:09
3 Answers
Reset to default 3change:
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/' + i + '.jpg') } ) );
}
to:
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/' + i + '.jpg'), overdraw: true } ) );
}
change the line:
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 5,5,5, materials ), new THREE.MeshFaceMaterial() );
to:
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1,1,1, materials ), new THREE.MeshFaceMaterial() );
Try using another renderer. Change this line:
renderer = new THREE.CanvasRenderer();
to this one:
renderer = new THREE.WebGLRenderer();