three.js 中具有不同材质的多个立方体答案

【问题标题】：Multple Cubes with different materials in three.jsthree.js 中具有不同材质的多个立方体
【发布时间】：2019-01-31 01:08:06
【问题描述】：

我正在自学three.js，并在立方体上使用不同的材料。我正在尝试将 3 个立方体添加到一个场景中，每个立方体都有不同的材料，以并排比较差异。

问题是当前只有cube1 呈现。其他多维数据集不会出现在浏览器中。任何解决问题的帮助将不胜感激。

<body>
    <script src="../three.js-master/build/three.min.js"></script>
    <script src="../three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script>
        var camera, scene, renderer;
        var controls
        var cube1, cube2, cube3;

        init();
        animate();

        function init() {
            //Renderer
            renderer = new THREE.WebGLRenderer( {antialias: true} );
            var width = window.innerWidth;
            var height = window.innerHeight;
            renderer.setSize( width, height );
            document.body.appendChild( renderer.domElement );

            scene = new THREE.Scene();

            //Create Cubes
            //Normal
            var cube1Geometry = new THREE.BoxGeometry( 2,1,1 );
            var cube1Material = new THREE.MeshNormalMaterial();
            cube1 = new THREE.Mesh( cube1Geometry, cube1Material );
            cube1.position.set( 0,0,0 );
            scene.add( cube1 );

            //Lambert
            var cube2Geometry = new THREE.BoxGeometry( 1,2,1 );
            var cube2Material = new THREE.MeshLambertMaterial( {color: 0xff0000, transparent: true, opacity: 05} );
            cube2 = new THREE.Mesh( cube2Geometry, cube2Material );
            cube2.position.set( -10,0,0 );
            scene.add( cube2 );

            //Phong
            var cube3Geometry = new THREE.BoxGeometry( 1,1,2 );
            var cube3Material = new THREE.MeshPhongMaterial( {shininess: 1} );
            cube3 = new THREE.Mesh( cube3Geometry, cube3Material );
            cube3.position.set( 10,0,0 );
            scene.add( cube3 );

            //Create Camera
            camera = new THREE.PerspectiveCamera (45, width/height, 1, 1000);
            camera.position.y = 30;
            camera.position.z = 30;
            camera.lookAt( new THREE.Vector3( 0,0,0 ) );

            controls = new THREE.OrbitControls( camera, renderer.domElement );
        }

        function animate() {
            controls.update();
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        }

    </script>
</body>

【问题讨论】：

标签： javascript three.js

【解决方案1】：

继续深入研究发现的问题（双关语），即 Lambert 和 phong 材料需要光源。它们都在渲染中，但由于光线不足而看不到。

添加：

//Light Source
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 20,20, 20 );
scene.add( light );

它们现在出现在浏览器中。

【讨论】：