Question

我的代码是：

$(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 );
    });

});

我收到一条错误消息：TypeError：array [i] .call不是函数
并指向three.js库的第7484行。
我使用以下方法包含了three.js库：

＆＃13;

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

＆＃13;

所以你可以看到，它的v73和我没有触及过代码。可能是什么问题？

错误仅在单击屏幕然后拖动鼠标指针后出现，因此它必须与该段代码有关。

Answer 1

假设您希望在OrbitControls发送更改事件时渲染场景，您必须将代码更改为：

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

TypeError：array [i] .call不是函数Error

1 个答案: