WebGL无法渲染

Question

I've basically given up on figuring out what is wrong with this code. 我基本上已经放弃了弄清楚这段代码有什么问题。 It just won't render. 它只是不会渲染。 It's supposed to load an .obj file with a custom .png texture wrapped around it. 应该加载一个环绕着自定义.png纹理的.obj文件。 You should then be able to rotate around the image by dragging the mouse. 然后，您应该能够通过拖动鼠标来旋转图像。 I have no idea what this could be. 我不知道这可能是什么。 Is the object just not appearing in the camera field of view? 该对象只是没有出现在相机视野中吗？ All help greatly appreciated! 所有帮助，不胜感激！ PS The .js files do load properly. PS .js文件可以正确加载。 I've tested this build on a simpler iteration and I haven't had to add any new functionality. 我已经在一个更简单的迭代中测试了此构建，而不必添加任何新功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>

    <script src="js/three.min.js"></script>
    <script src="js/loaders/OBJLoader.js"></script>
    <script src="js/Detector.js"></script>

    <script>

    var container;

    var camera, scene, renderer;

    var group, text, plane;

    var targetRotationX = 0;
    var targetRotationOnMouseDownX = 0;

    var targetRotationY = 0;
    var targetRotationOnMouseDownY = 0;

    var mouseX = 0;
    var mouseXOnMouseDown = 0;

    var mouseY = 0;
    var mouseYOnMouseDown = 0;

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

    var finalRotationY


    init();
    animate();


    function init() {

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

            // scene

            camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.z = 100;

            scene = new THREE.Scene();

            // lights

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

            light = new THREE.DirectionalLight( 0x002288 );
            light.position.set( -1, -1, -1 );
            scene.add( light );

            light = new THREE.AmbientLight( 0x222222 );
            scene.add( light );

            group = new THREE.Object3D();

            // texture

            var manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {

                console.log( item, loaded, total );

            };

            var texture = new THREE.Texture();

            var onProgress = function ( xhr ) {
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round(percentComplete, 2) + '% downloaded' );
                }
            };

            var onError = function ( xhr ) {
            };


            var loader = new THREE.ImageLoader( manager );
            loader.load( 'textures/3poster.png', function ( image ) {

                texture.image = image;
                texture.needsUpdate = true;

            } );

            // model

            var loader = new THREE.OBJLoader( manager );
            loader.load( 'obj/tshirt.obj', function ( object ) {

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) {

                        child.material.map = texture;

                    }

                } );

                scene.add( object );

            }, onProgress, onError );

            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );

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


            //

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

        }

        function modelLoadedCallback(object) {

            mesh = new THREE.Mesh( object, material );
            group.add(mesh);
            scene.add( group );

        }


        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = 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;
            targetRotationOnMouseDownX = targetRotationX;

            mouseYOnMouseDown = event.clientY - windowHalfY;
            targetRotationOnMouseDownY = targetRotationY;

        }

        function onDocumentMouseMove( event ) {

            mouseX = event.clientX - windowHalfX;
            mouseY = event.clientY - windowHalfY;

            targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02;
            targetRotationX = targetRotationOnMouseDownX + (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 onDocumentTouchStart( event ) {

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

                event.preventDefault();

                mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                targetRotationOnMouseDownX = targetRotationX;

                mouseYOnMouseDown = event.touches[ 0 ].pageY - windowHalfY;
                targetRotationOnMouseDownY = targetRotationY;

            }

        }

        function onDocumentTouchMove( event ) {

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

                event.preventDefault();

                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                targetRotationX = targetRotationOnMouseDownX + ( mouseX - mouseXOnMouseDown ) * 0.05;

                mouseY = event.touches[ 0 ].pageY - windowHalfY;
                targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.05;

            }

        }

        //

        function animate() {

            requestAnimationFrame( animate );
            render();

        }

        function render() {

         group.rotation.y += ( targetRotationX - group.rotation.y ) * 0.1;

         finalRotationY = (targetRotationY - group.rotation.x); 

         if (group.rotation.x  <= 1 && group.rotation.x >= -1 ) {

            group.rotation.x += finalRotationY * 0.1;
        }
        if (group.rotation.x  > 1 ) {

            group.rotation.x = 1
        }

        if (group.rotation.x  < -1 ) {

            group.rotation.x = -1
        }

        renderer.render( scene, camera );

    }


</script>

</body>
</html>

Answer 1

The problem is that you dont have an element named container at this line in your code 问题是您的代码中此行没有名为container的元素

container = document.getElementById( 'container' );

comment it out (since you already have a valid variable called container ) and you will see your model. 将其注释掉（因为您已经有一个名为container的有效变量），您将看到您的模型。

WebGL无法渲染

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-30 04:13:43

WebGL无法渲染

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-30 04:13:43

解决方案1
1 已采纳 2015-10-30 04:13:43