Cube with wireframe in three.js
Question
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>
1 answers
solution1
1 ACCPTED 2016-01-02 01:49:11
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.