第一次尝试三个js...我的立方体是黑色的...我将颜色设置为红色，有什么原因吗？
<!DOCTYPE html>
<html>
<head>
<title>Some shapes</title>
<script type="text/javascript" src="../lib/threejs/build/three.js"></script>
<script type="text/javascript" src="../lib/jquery-2.1.3.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="output">
</div>
<script type="text/javascript">
$(function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var cubeGeometry = new THREE.CubeGeometry(8,8,8);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x990000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
$("#output").append(renderer.domElement);
renderer.render(scene, camera);
});
</script>
</body>
</html>
我在网格朗伯 Material 中设置了颜色......但我认为我不需要做更多的事情？在浏览器中它显示为黑色...可能与 setClearColour 有什么关系吗？
最佳答案
这是我原来的评论:
我将 MeshLambertMaterial 更改为 MeshBasicMaterial 并且它起作用了，我猜测因为 Lambert Material 颜色可能是由物体上的某种光源决定的，因为没有光，颜色会变成黑色...
我重新设计了我的第一次尝试:
$(function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var cubeGeometry = new THREE.CubeGeometry(8,8,8);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x990000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
//add some lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
$("#output").append(renderer.domElement);
renderer.render(scene, camera);
});
我的猜测是正确的，当使用Lambert或Phong Material 时，你需要一些照明，否则在黑暗中，你将无法看到颜色，因为 Material 会对一些照明使用react。
关于javascript - 三个 js 立方体是黑色的...不是红色的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28381750/