三个js立方体是黑色的...不是红色的
问题描述:
第一次尝试三个js ...我的立方体是黑色的...我把颜色设置为红色,是有原因的吗?三个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>
我在网格lambert材料中设置颜色......但我不认为我需要做的比这更多吗?在浏览器中它出来黑色......它可能与setClearColour有什么关系?
答
这是我原来的评论:
我改变MeshLambertMaterial到MeshBasicMaterial和它的工作,我猜测,因为兰伯特材料的颜色很可能是由某种物体上的光源的决定,因为没有光,颜色现身黑色...
我返工我第一次尝试这样的:
$(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);
});
我的猜测是正确的,在使用兰伯特或海防材料,你需要一些灯光,否则在黑暗中,y由于材料会对某些照明作出反应,因此您将无法看到颜色。
+0
这非常有趣 – user2405469 2015-02-07 12:01:08
我将MeshLambertMaterial更改为MeshBasicMaterial并且它工作正常,我猜测这是因为lambert材质颜色可能是由物体上的某种光源决定的,因为没有光线,颜色会出现黑色... – user2405469 2015-02-07 11:51:31