Question

我已经创建了一个javascript脚本来执行某些操作，并且大部分都可以使用。我对脚本有两个问题，所以我打算在这里提出一个有效的例子。但是，在“减少”期间代码更复杂的第三个错误发生，这完全使脚本停止工作。这是脚本的javascript部分：

var container, stats;
var camera, scene, renderer;
var group1, group2;
var mouseX = 0, mouseY = 0;
var map_width = 512;
var map_height = 512; 

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

init();
animate();

function createMesh(filename) {

    var geometry = new THREE.SphereGeometry( 70, 40, 40 );
    var texture = new THREE.TextureLoader(filename);
    texture.needsUpdate = true;
    var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
    var mesh = new THREE.Mesh( geometry, material );
    return mesh;
}


function init() {

    container = document.getElementById( 'container' );
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 500;
    scene = new THREE.Scene();                                             

    group1 = new THREE.Group();    
    var mesh = createMesh("textures/tree1.jpg");
    group1.add( mesh );
    group1.position.x = 00;                
    scene.add( group1 );                

    group2 = new THREE.Group();    
    var mesh = createMesh("textures/tree2.jpg");
    group2.add( mesh );
    group2.position.x = 250;                
    scene.add( group2 );                            

    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setClearColor( 0xffffff, 0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
}


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

function render() {
    camera.position.x += ( mouseX - camera.position.x ) * 0.05;
    camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
    camera.lookAt( scene.position );

    group1.rotation.y -= 0.005;
    group2.rotation.y -= 0.015;

    renderer.render( scene, camera );
}

这个想法是让几个球体上有一些纹理;尝试使用任何图像。但是，当我在html中调用此代码时，我收到错误

TypeError：n is undefined

一遍又一遍。该错误似乎源于THREE.js。我怎样才能解决这个错误，所以我看到两个带有“树”的球体＆＃39;纹理就可以了？？

html代码的正文如下：

<body>
    <div id="container"></div>
    <script src="js/build/three.min.js"></script>
    <script>
        >> the code from above <<
    </script>
</body>

Answer 1

此问题是由以下行引起的：

var texture = new THREE.TextureLoader(filename);

解决方案是改为使用loader：

var loader = new THREE.TextureLoader();
var texture = loader.load( filename );

Javascript脚本给出错误＆＃34; TypeError：n未定义＆＃34;

1 个答案: