Question

我正在学习如何使用这个tut在three.js中创建一个飞机：https://www.youtube.com/watch?v=jU9UABZSAoc&index=2&list=PLcUid3OP_4OVX8zp-ZTcyOsp6C9CJCqd0

我写的代码是：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body onload="loadPlane()">
    <canvas id="gl" width="500" height="500"></canvas>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript">
        function loadPlane() {
            // body...

            var renderer = new THREE.WebGLRenderer ();
            renderer.setSize (window.innerWidth, window.innerHeight);
            document.body.appendChild (renderer.domElement);

            var camera = new THREE.PerspectiveCamera (45, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.y = -400;
            camera.position.z = 400;
            camera.rotation.x = .75;

            var scene = new THREE.scene ();
            var plane = new THREE.Mesh (new THREE.PlaneGeometry (300, 300), new THREE.MeshNormalMaterial ());
            scene.add (plane);
            renderer.render (scene, camera);
        }

    </script>
</body>
</html>

代码无效。输出只是一个黑屏。这有什么问题？请帮忙。

Answer 1

您

var scene = new THREE.scene ();

应该是

var scene = new THREE.Scene ();

Answer 2

根据您在相机上的旋转，您可能会看到飞机的背面，在这种情况下，您将看到任何内容。你可以这样做：

new THREE.MeshNormalMaterial( { side: THREE.DoubleSide } );

看看小提琴：http://jsfiddle.net/4oaxxpk1/

无法使用three.js创建一个3d平面

2 个答案: