Question

我正在自学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>

Answer 1

继续研究揭示的问题（双关语意），lambert和phong材料需要光源。它们都被渲染，但是由于光线不足而无法看到。

添加：

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

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

Three.js中使用不同材质的多个多维数据集

1 个答案: