Question

我想做什么：

使用(x, y, z)点渲染三角形：

var v1 = new THREE.Vector3(0, 0, 0);
var v2 = new THREE.Vector3(600, 0, 0);
var v3 = new THREE.Vector3(300, 0, 600);
var v4 = new THREE.Vector3(300, 600, 300);

我尝试过但不起作用：

    <html>
    <head>
    <title>My first Three.js app</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- <script src="../../Scripts/three.min.js"></script> -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://assignments-dot-udacity-extras.appspot.com/media/js/cs291/three.min.js"></script>
    <script src="https://assignments-dot-udacity-extras.appspot.com/media/js/cs291/OrbitAndPanControls.js"></script>
    </head>
    <body>

    <div id="container">
    <canvas width="846" height="494" style="width: 846px; height: 494px;">    </canvas>
    </div>


    <script>
            ////////////////////////////////////////////////////////////////////////////////
    /*global THREE, window, document*/
    var camera, scene, renderer;
    var cameraControls;
    var clock = new THREE.Clock();

    function fillScene() {
        scene = new THREE.Scene();
        // Triangle Mesh
        var material, geometry, mesh;
        material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors, side: THREE.DoubleSide });
        geometry = new THREE.Geometry();
        // Student: add a colored triangle here
        var v1 = new THREE.Vector3(0, 0, 0);
        var v2 = new THREE.Vector3(600, 0, 0);
        var v3 = new THREE.Vector3(300, 0, 600);
        var v4 = new THREE.Vector3(300, 600, 300);

        geometry.vertices.push(v1);
        geometry.vertices.push(v2);
        geometry.vertices.push(v3);
        geometry.vertices.push(v4);

        geometry.faces.push(new THREE.Face3(0, 1, 2, 3));

        var color1 = new THREE.Color(0xFF0000);
        var color2 = new THREE.Color(0x00FF00);
        var color3 = new THREE.Color(0x0000FF);
        var color4 = new THREE.Color(0x0000FF);

        geometry.faces[0].vertexColors = [color1, color2, color3, color4];
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
    }

    function init() {
        var canvasWidth = 846;
        var canvasHeight = 494;
        var canvasRatio = canvasWidth / canvasHeight;
        // RENDERER
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.setSize(canvasWidth, canvasHeight);
        renderer.setClearColorHex(0xAAAAAA, 1.0);
        // CAMERA
        camera = new THREE.PerspectiveCamera(55, canvasRatio, 1, 4000);
        camera.position.set(100, 150, 130);
        // CONTROLS
        console.log(renderer.domElement, THREE.OrbitAndPanControls);
        cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
        cameraControls.target.set(0, 0, 0);
    }

    function addToDOM() {
        var container = document.getElementById('container');
        var canvas = container.getElementsByTagName('canvas');
        if (canvas.length > 0) {
            container.removeChild(canvas[0]);
        }
        container.appendChild(renderer.domElement);
    }

    function animate() {
        window.requestAnimationFrame(animate);
        render();
    }

    function render() {
        var delta = clock.getDelta();
        cameraControls.update(delta);
        renderer.render(scene, camera);
    }

    try {
        init();
        fillScene();
        addToDOM();
        animate();
    } catch (e) {
        var errorReport =
            "Your program encountered an unrecoverable error, can not draw on canvas. Error was:<br/><br/>";
        $('#container').append(errorReport + e);
    }
</script>
</body>
</html>

复制/粘贴我的代码，您将收到此错误：

http://localhost:5167/Home/Index
第30行第5栏未处理的异常
0x800a1391 - JavaScript运行时错误：'THREE'未定义

WebGL如何渲染简单的3D三角形

0 个答案: