Question

我是JavaScrip和Three.js的初学者，也是计算机图形学的初学者。我今天的任务是用de-Casteljau算法绘制Bezier曲线。这是我的代码，但它在浏览器中不起作用（一般情况下）。有人可以帮我找到错误。非常感谢你。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Aufgabe 1 - Computergrafik</title>
        <style>
            body {margin: 0;}
            canvas {width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <script src="three.js"></script>
        <script>
            var scene = new THREE.Scene(); 
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 20;
            camera.lookAt(new THREE.Vector3(0,0,0));

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0xeeeeee);

            document.body.appendChild(renderer.domElement);

            var objetos = [], plane;
            var puntos = new Array();
            puntos.push(new THREE.Vector3(1, 4, 0));
            puntos.push(new THREE.Vector3(2, 1, 0));
            puntos.push(new THREE.Vector3(5, 2, 0));
            puntos.push(new THREE.Vector3(6, 6, 0));

            for(var i=0; i < puntos.length; i++){
                var puntoscurvaGeo = new THREE.PlaneGeometry(0.5, 0.5, 1, 1);
                var puntosMesh = new THREE.Mesh(puntoscurvaGeo, new THREE.MeshBasicMaterial({color: 0x000000}));
                puntosMesh.position.x = puntos[i].x;
                puntosMesh.position.y = puntos[i].y;
                puntosMesh.position.z = puntos[i].z; 
                scene.add(puntosMesh);
                objetos.push(puntosMesh);
            }

            var linea;
            var tempPuntos;
            var temp;

            animate();

            function animate(){
                casteljau();
                render();
            }

            function casteljau(){
                var curvaPuntos = new THREE.Geometry();
                for(var i= 0.0; i<=1.0; i+=0.02){
                    temp = getCasteljauPoint(i);
                    curvaPuntos.vertices.push(temp);
                }
                linea = new THREE.Line(curvaPuntos, new THREE.LineBasicMateria({color: 0xff0000}));
                scene.add(linea);
            }

            function getCasteljauPoint(t){
                tempPuntos = [];
                var n = objetos.length-1;
                for(var i=0; i<=n; i++){
                    var p = new THREE.Vector2(objetos[i].position.x, objetos[i].position.y);
                    tempPuntos.push(p);
                }
                for(var j = 1; j<=n; j++){
                    for(var k = 0; m <= (n-j); k++){
                        tempPuntos[k].x = t*tempPuntos[k].x + (1-t)*tempPuntos[(k+1)].x;
                        tempPuntos[k].y = t*tempPuntos[k].y + (1-t)*tempPuntos[(k+1)].y;
                    }
                }
                return new THREE.Vector3(tempPuntos[0].x, tempPuntos[0].y, 0);
            }
        </script>
    </body>
</html>

Answer 1

一些错误：

靠近底部，你有

for(var k = 0; m <= (n-j); k++){

将m替换为k

THREE.LineBasicMateria

缺少l

你也没有渲染功能：

function render() {
    renderer.render(scene, camera);
}

始终检查浏览器控制台是否有错误。

顺便说一句，要删除滚动条，请将display: block;添加到canvas样式。

当我在浏览器中运行ma代码时，为什么我看不到曲线？

1 个答案: