2016-01-29 259 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); 
相關問題