Question

第一次尝试三个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>

我在网格朗伯材料中设置颜色......但我认为我不需要再做这个了吗？在浏览器中它出现黑色......它与setClearColour有什么关系吗？

Answer 1

这是我原来的评论：

我将MeshLambertMaterial更改为MeshBasicMaterial并且它有效，我猜测因为朗伯材料颜色可能是由物体上的某种光源决定的，因为没有光线，颜色会变黑...... / p>

我重新尝试了这个：

$(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材料时，你需要一些照明，否则在黑暗中，你不会看到颜色，因为材料会对某些照明作出反应。

三个js立方体是黑色的......不是红色的

1 个答案: