CODEWITHSUNDEEP
javascriptthree.js
Fluzz
Fluzz

Reputation: 68

Cube with wireframe in three.js

I am new to three.js and relatively new to Javascript. I made the "Getting Started" project on threejs.org, the rotating cube, without any trouble. However, when I tried adding a wireframe, the project stopped working.

Can you please help me to figure out what is wrong? The code snippet is below.

Thanks!

<html> 
<head> 
<title>My first Three.js app</title> 
<style> 
body { margin: 0; } canvas { width: 100%; height: 100% } 
</style> 
</head> 
<body>
<script src="http://threejs.org/build/three.min.js"></script> 
<script> 
var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 ); 
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); 
object = new THREE.Mesh( geometry, material ); 

wireframe = new THREE.WireframeHelper( object, 0x00ff00 );
 
scene.add( object ); 
scene.add( wireframe );

camera.position.z = 5; 

var render = function () { 
requestAnimationFrame( render ); 
cube.rotation.x += 0.05; 
cube.rotation.y += 0.05; 
renderer.render(scene, camera); 
}; 

render(); 
</script> 
</body> 
</html>

Upvotes: 0

Views: 1467

Answers (1)

Brendan Annable
Brendan Annable

Reputation: 2747

You just needed to update your variable names, you still had reference to a cube in the render loop when you changed it to object. Did you check your JavaScript console for errors? I also moved the camera back so its not inside the cube.

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 ); 
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); 
object = new THREE.Mesh( geometry, material ); 
wireframe = new THREE.WireframeHelper( object, 0x00ff00 );

scene.add( object );
scene.add( wireframe );

camera.position.z = 15; 

var render = function () { 
requestAnimationFrame( render ); 
object.rotation.x += 0.05; 
object.rotation.y += 0.05; 
renderer.render(scene, camera); 
}; 

render();
html, body, canvas { margin: 0; padding: 0; display: block; width: 100%; height: 100% }
<html> 
<head> 
<title>My first Three.js app</title>
</head> 
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script> 
</body> 
</html>

Upvotes: 1

Related Questions