0

绘制螺旋曲线时出现此错误。我添加了最新的 Curve.js 和 TubeGeormetry.js。这是因为画布渲染还是我做错了什么?我正在关注这个例子http://mrdoob.github.com/three.js/examples/webgl_geometry_extrude_splines.html

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>3d Model using HTML5 and three.js</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
            <style>
                body {
                    font-family: Monospace;
                    background-color: #f0f0f0;
                    margin: 0px;
                    overflow: hidden;
                }
            </style>
        </head>
        <body>

            <script src="three.min.js" type="text/javascript"></script>
            <script src="Curve.js" type="text/javascript"></script>
            <script src="TubeGeometry.js" type="text/javascript"></script>      
            <script src="Stats.js" type="text/javascript"></script>
            <script src="Detector.js" type="text/javascript"></script>

            <script>
            // variables
            var container, stats;

            var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;

            var text, plane, tube, tubeMesh, parent;

            var targetRotation = 0;
            var targetRotationOnMouseDown = 0;

            var mouseX = 0;
            var mouseXOnMouseDown = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            var binormal = new THREE.Vector3();
            var normal = new THREE.Vector3();

            // extrudePath, Helix Curve
            extrudePath = new THREE.Curve.create(   
                    function() {

                    },  
                    function(t) {   
                        var a = 30; // radius
                        var b = 150; //height
                        var t2 = 2 * Math.PI * t * b / 30;
                        var tx = Math.cos(t2) * a,
                            ty = Math.sin(t2) * a,
                            tz = b * t;

                        return new THREE.Vector3(tx, ty, tz);   
                    }   
                );

            // Tube Geometry
            var segments = 400;
            var closed = false;
            var debug = false;
            var radiusSegments = 12;

            // add tube
            addTube();      

            function addTube()
            {
                alert('hello');                     
                tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed, debug);

                // Tube Mesh
                tubeMesh = THREE.SceneUtils.createMultiMaterialObject( tube, [
                    new THREE.MeshLambertMaterial({
                        color: color,
                        opacity: geometry.debug ? 0.2 : 0.8,
                        transparent: true
                    }),
                    new THREE.MeshBasicMaterial({
                        color: 0x000000,
                        opacity: 0.5,
                        wireframe: true
                })]);
                parent.add(tubeMesh);
            }

            init();                     
            animate();

            function init(){

                // container
                container = document.createElement( 'div' );
                document.body.appendChild( container );

                // info div
                info = document.createElement( 'div' );
                info.style.position = 'absolute';
                info.style.top = '10px';
                info.style.width = '100%';
                info.style.textAlign = 'center';
                info.innerHTML = 'Drag to spin the cylinder<br/> You can identify cylinder face by clicking on it.</br>';           
                container.appendChild( info );

                // camera
                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.set(0,150,400);

                // scene            
                scene = new THREE.Scene();
                camera.lookAt(scene.position);

                // light            
                scene.add( new THREE.AmbientLight( 0x404040 ) );
                light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( 0, 1, 0 );
                scene.add( light );

                // CONTROLS
                controls = new THREE.TrackballControls( camera );

                // Grid
                geometry = new THREE.Geometry();
                geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
                geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

                for ( var i = 0; i <= 20; i ++ ) {

                    line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                    line.position.z = ( i * 50 ) - 500;
                    scene.add( line );

                    line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                    line.position.x = ( i * 50 ) - 500;
                    line.rotation.y = 90 * Math.PI / 180;
                    scene.add( line );
                }

                parent = new THREE.Object3D();
                parent.position.y = 100;
                scene.add( parent );

                // projector
                projector = new THREE.Projector();

                // renderer
                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );               

                // stats
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );

                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                document.addEventListener( 'mouseover', onDocumentMouseOver, false );
                document.addEventListener( 'touchstart', onDocumentTouchStart, false );
                document.addEventListener( 'touchmove', onDocumentTouchMove, false );               

                window.addEventListener( 'resize', onWindowResize, false );

            }           

            function onWindowResize() {

                camera.left = window.innerWidth / - 2;
                camera.right = window.innerWidth / 2;
                camera.top = window.innerHeight / 2;
                camera.bottom = window.innerHeight / - 2;
                camera.aspect = window.innerWidth / window.innerHeight;
                //camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function onDocumentMouseDown( event ) {
                event.preventDefault();

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'mouseout', onDocumentMouseOut, false );

                mouseXOnMouseDown = event.clientX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;         
            }

            function onDocumentMouseMove( event ) {

                mouseX = event.clientX - windowHalfX;

                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

            }

            function onDocumentMouseUp( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentMouseOut( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentMouseOver( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentTouchStart( event ) {

                if ( event.touches.length === 1 ) {

                    event.preventDefault();

                    mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotationOnMouseDown = targetRotation;

                }

            }

            function onDocumentTouchMove( event ) {
                if ( event.touches.length === 1 ) {
                    event.preventDefault();
                    mouseX = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
                }
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
                update();
            }

            function update()
            {
                controls.update();
                stats.update();
            }

            function render() {             
                parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;         
                camera.updateMatrixWorld();
                renderer.render( scene, camera );
            }           

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

1 回答 1

3

您没有正确实例化曲线对象。你应该做

extrudePath = new (THREE.Curve.create(...))();

或者以更容易理解的方式。

CustomCurve = THREE.Curve.create(...);
extrudePath = new CustomCurve();
于 2012-09-17T15:50:37.280 回答