2016-01-29 260 views
1

我的代码是:类型错误:数组[我] .CALL是不是一个函数时出现错误

$(function() { 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
    var renderer = new THREE.WebGLRenderer({antialias: true}); 

    renderer.setClearColor(0xdddddd); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.shadowMap.enabled = true; 
    renderer.shadowMapSoft = true; 


    var axis = new THREE.AxisHelper(10); 
    scene.add(axis); 

    var grid = new THREE.GridHelper(50, 5); 
    var color = new THREE.Color("rgb(255,0,0)"); 
    grid.setColors(color, 0x000000); 
    scene.add(grid); 

    var Ground_geometry = new THREE.BoxGeometry(20, 0.1, 20); 
    var Ground_material = new THREE.MeshPhongMaterial({ 
     color: 0xa0adaf, 
     shininess: 150, 
     specular: 0xffffff, 
     shading: THREE.SmoothShading 
    }); 

    var ground = new THREE.Mesh(Ground_geometry, Ground_material); 
    ground.scale.multiplyScalar(3); 
    ground.castShadow = false; 
    ground.receiveShadow = true; 
    scene.add(ground); 

    var ambient = new THREE.AmbientLight(0x404040); 
    scene.add(ambient); 

    spotLight = new THREE.SpotLight(0xffffff); 
    spotLight.position.set(10, 10, 15); 
    spotLight.castShadow = true; 
    spotLight.shadowCameraNear = 8; 
    spotLight.shadowCameraFar = 30; 
    spotLight.shadowDarkness = 0.5; 
    spotLight.shadowCameraVisible = false; 
    spotLight.shadowMapWidth = 1024; 
    spotLight.shadowMapHeight = 1024; 
    spotLight.name = 'Spot Light'; 
    scene.add(spotLight); 

    var controls = new THREE.OrbitControls(camera, renderer.domElement); 
    controls.addEventListener('change', renderer); 

    var cubeGeometry = new THREE.BoxGeometry(5, 5, 5); 
    var cubeMaterial = new THREE.MeshPhongMaterial({ 
     color: 0x456574 , 
     shininess: 150, 
     specular: 0x222222, 
     shading: THREE.SmoothShading, 
    }); 
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 

    cube.position.x = 0; 
    cube.position.y = 0; 
    cube.position.z = 0; 

    scene.add(cube); 

    camera.position.x = 40; 
    camera.position.y = 40; 
    camera.position.z = 40; 

    camera.lookAt(scene.position); 

    renderer.render(scene, camera); 
    $("#webGL-container").append(renderer.domElement); 


    $(window).resize(function(){ 
     SCREEN_WIDTH = window.innerWidth; 
     SCREEN_HEIGHT = window.innerHeight; 
     camera.aspect = SCREEN_WIDTH/SCREEN_HEIGHT; 
     camera.updateProjectionMatrix(); 
     renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
    }); 

}); 

我得到一个错误,指出:类型错误:数组[我] .CALL不是一个函数
和指向three.js库的第7484行。
我已经包括使用three.js所图书馆:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>

因此,大家可以看到,它的V73和我都没有碰过的代码。可能是什么问题呢?

错误只出现在屏幕被点击后,然后拖动鼠标指针,所以它必须与这段代码。

+0

你可以看到错误的任何堆栈跟踪,这样你就可以跟踪它回到_your_代码的哪一行触发它? – Rhumborl

+0

不,没有像这样的东西被显示,除了这个:使用getUserData()或setUserData()已被弃用。改用WeakMap或element.dataset。并且不推荐使用getPreventDefault()。改为使用defaultPrevented。这是不推荐使用的函数信息。 – demonSlayer

+1

尝试在three.js:7484处设置断点并检查数组。它会给你一个关于是什么导致问题的线索。代码显然是在触发事件的过程中,并且您在此代码中唯一的事件是'change'事件。你的'renderer'可能是错误配置的,但我怀疑问题在其他地方。 – Andrew

回答

1

假设您想要的场景渲染时OrbitControls发送更改事件,您将不得不更改代码以:

controls.addEventListener('change', render); 
. 
. 
. 
function render() { 
    renderer.render(scene, camera); 
} 
renderer.render(scene, camera); 
相关问题