Im folgenden Beispiel funktioniert das Umgebungslicht nicht (alles ist schwarz). Warum passiert das? Und wie behebe ich das? Wenn ich Punktlicht einsetze, funktioniert es, also muss etwas mit dem Umgebungslicht nicht stimmen, aber ich habe die Dokumente befolgt ... =: O.
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.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 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
material = new THREE.MeshStandardMaterial( {
color: 0x0c79bf,
roughness: 0.71,
metalness: 1,
normalScale: new THREE.Vector2( 1, - 1 ), // why does the normal map require negation in this case?
side: THREE.DoubleSide
} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
var alight = new THREE.AmbientLight( 0x404040);
scene.add( alight );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
Umgebungslicht in three.js ist ein einfaches Modell für indirektes Licht, das vom Material diffus reflektiert wird.
In Ihrem Beispiel haben Sie die Materialeigenschaft metalnessauf 1 gesetzt. Das heißt, Sie modellieren ein reines Metall. Reine Metalle reflektieren Licht nicht diffus - sie reflektieren Licht nur spiegelnd.
Bei der Verwendung MeshStandardMaterialsollten Sie immer eine Umgebungskarte ( material.envMap) angeben, damit Ihre metallischen Materialien etwas zu reflektieren haben.
three.js r.89
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen