Question

我想在对象上应用纹理。这是我的代码：

    <html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="three.min.js"></script>
        <script src="OBJLoader.js"></script>        
<script>
           var container;
            var camera, scene, renderer;
            var mouseX = 0, mouseY = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            init();
            animate();
            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 100;
                // scene
                scene = new THREE.Scene();
                var ambient = new THREE.AmbientLight( 0x101030 );
                scene.add( ambient );
                var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                directionalLight.position.set( 0, 0, 1 );
                scene.add( directionalLight );
                // 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( 'bb.jpg', function ( image ) {
                    texture.image = image;
                    texture.needsUpdate = true;
                } );
                // model
                var loader = new THREE.OBJLoader( manager );
                loader.load( 'note4.obj', function ( object ) {
                    object.traverse( function ( child ) {
                        if ( child instanceof THREE.Mesh ) {
                            child.material.map = texture;
                        }
                    } );
                    object.position.y = - 80;
                    scene.add( object );
                }, onProgress, onError );
                //
                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                //
                window.addEventListener( 'resize', onWindowResize, false );
            }
            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 onDocumentMouseMove( event ) {
                mouseX = ( event.clientX - windowHalfX ) / 2;
                mouseY = ( event.clientY - windowHalfY ) / 2;
            }
            //
            function animate() {
                requestAnimationFrame( animate );
                render();
            }
            function render() {
                camera.position.x += ( mouseX - camera.position.x ) * .05;
                camera.position.y += ( - mouseY - camera.position.y ) * .05;
                camera.lookAt( scene.position );
                renderer.render( scene, camera );
            }
        </script>
        <div><canvas width="1360" height="150" style="width: 1360px; height: 150px;"></canvas></div>
    </body>
</html>

所有js文件，纹理和目标文件都在同一个文件夹中。当我打开页面时，它会给我这些错误。我在firefox和chrome上测试过，firefox向我展示了这些错误。

    THREE.WebGLRenderer 69
THREE.WebGLRenderer: OES_texture_float extension not supported.
THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
THREE.WebGLRenderer: OES_standard_derivatives extension not supported.
requestAnimationFrame is not defined
[Break On This Error] requestAnimationFrame( animate );
index.html (line 83)
bb.jpg 1 2
text is undefined
[Break On This Error] var lines = text.split( '\n' );
OBJLoader.js (line 195)

我做错了什么？期待收到你的来信

Answer 1

您正在使用图像加载器加载纹理：

var loader = new THREE.ImageLoader( manager );
    loader.load( 'bb.jpg', function ( image ) {
        texture.image = image;
        texture.needsUpdate = true;
} );

我从未使用它，因为在大多数示例中，给定的纹理以不同的方式加载：

var texture = THREE.ImageUtils.loadTexture('path/to/texture.png');

three.js-为什么它不在对象上应用纹理

1 个答案: