Einfacher Würfel - Drei JS

Question

Ich habe versucht, einen einfachen rotierenden 3D-Würfel über die Three.js-Bibliothek für WebGL zu erreichen.

Ich kann keine Fehler in meinem Code im Vergleich zu den Massen von Tutorials da draußen erkennen, aber alles, was ich sehe, ist ein schwarzer Bildschirm ohne Geometrie.

//Define window size 
 
var width = window.innerWidth; 
 
var height = window.innerHeight; 
 

 
//smoothened edges for the renderer defined 
 
var renderer = new THREE.WebGLRenderer({antialias:true}); 
 
//renderer size 
 
renderer.setSize(width,height); 
 
//renderer is appended to the html document 
 
document.body.appendChild(renderer.domElement); 
 

 
var scene = new THREE.Scene; 
 

 
//Add Cube - width, height, depth 
 
var cubeGeom = new THREE.CubeGeometry(100,100,100); 
 
var cubeMaterial = new THREE.MeshLambertMaterial({color:0x1ec876}); 
 
var cube = new THREE.Mesh(cubeGeom,cubeMaterial); 
 

 
//Rotate cube 45 degrees 
 
cube.rotation.y=Math.PI*45/180; 
 

 
//Add cube to scene 
 
scene.add(cube); 
 

 
//Add Camera - FOV, Ratio, Close, Far 
 
var camera = new THREE.PerspectiveCamera(45,width/height,0.1,10000); 
 

 
//Position camera 
 
camera.position.y = 160; 
 

 
//Higher the z value, the closer to the camera/user 
 
camera.position.z = 400; 
 

 
//Camera pointed towards cube 
 
camera.lookAt(cube.position); 
 

 
//Add camera to scene 
 
scene.add(camera); 
 

 
//Define skyBox 
 

 
var skyBoxGeom = new THREE.CubeGeometry(10000, 10000, 10000); 
 
var skyBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide }); 
 
var skyBox = new THREE.Mesh(skyBoxGeom,skyBoxMaterial); 
 

 
scene.add(skyBox); 
 

 
//Point Light 
 
var pointLight = new THREE.PointLight(0xffffff); 
 
pointLight.position.set(0,300,200); 
 
scene.add(pointLight); 
 

 
//Render scene 
 
function render() { 
 
    render.render(scene,camera); 
 

 
    var clock = new THREE.Clock; 
 

 
    //rotate cube clockwise - subtract time passed from rotation 
 
    cube.rotation.y -=clock.getDelta(); 
 

 
    requestAnimationFrame(render); 
 
} 
 

 
//Call render function 
 
render();

canvas { 
 
    position: fixed; 
 
    top:0; 
 
    left:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

P. S. Ich verlinke zu Three.js über das CDN gefunden auf Google Developer Links hier gefunden: https://developers.google.com/speed/libraries/

Jede Hilfe wäre sehr willkommen.

Vielen Dank Tom

Answer 1

Es gibt einen kleinen Tippfehler in Ihrem JS-Code in Zeile 55:

render.render(scene,camera); 

sein sollte:

renderer.render(scene,camera); 

Nächstes Mal, wenn ich Öffnen empfehlen Sie Ihren Browser-Konsole, der Fehler wurde bereits protokolliert, so dass die Behebung des Fehlers sehr einfach war.

---

Abgesehen davon funktioniert Ihr Code gut. Der Würfel dreht, obwohl es sehr langsam ist. Vielleicht möchten Sie Zeile 60 anpassen, damit sie schneller rotiert (z. B. durch Multiplizieren des Werts mit 100).