Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/449.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Three.js+;OrbitControls-未捕获类型错误:无法读取属性';渲染';未定义的_Javascript_Three.js - Fatal编程技术网

Javascript Three.js+;OrbitControls-未捕获类型错误:无法读取属性';渲染';未定义的

Javascript Three.js+;OrbitControls-未捕获类型错误:无法读取属性';渲染';未定义的,javascript,three.js,Javascript,Three.js,我正在为旋转立方体编写一个类,但每次旋转或缩放立方体时,都会出现一个错误“无法读取未定义的属性‘render’”。我做错了什么?我想示波器有点问题。这是我的班级: myclass = function() { this.camera = null; this.scene = null; this.renderer = null; this.product = null; this.init = function (container) {

我正在为旋转立方体编写一个类,但每次旋转或缩放立方体时,都会出现一个错误“无法读取未定义的属性‘render’”。我做错了什么?我想示波器有点问题。这是我的班级:

myclass = function() {
    this.camera = null;
    this.scene = null;
    this.renderer = null;
    this.product = null;

    this.init = function (container) {
        this.scene = new THREE.Scene();
        this.camera = createCamera();
        this.product = createProduct();
        this.scene.add(this.product);
        this.createRenderer();
        this.setControls();
        container.appendChild(this.renderer.domElement);
        this.animate();

    };

    function createCamera() {
        var camera = new THREE.PerspectiveCamera(20, 300 / 400, 1, 10000);
        camera.position.z = 1800;
        return camera;
    }

    function createProduct() {
        var geometry = new THREE.BoxGeometry(300, 200, 200);
        var materials = ...;

    var product = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
    return product;
    }
    this.createRenderer = function () {
    this.renderer = new THREE.WebGLRenderer({antialias: true});
    this.renderer.setClearColor(0xffffff);
    this.renderer.setSize(this.sceneWidth, this.sceneHeight);
     };

    this.setControls = function () {
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    this.controls.addEventListener('change', this.render);
    };

    this.animate = function () {
        requestAnimationFrame(this.animate.bind(this));
        this.render();
    };

    this.render = function () {
    this.renderer.render(this.scene, this.camera);
    };
 };

Tnanks.

您在此处指定的回调中存在范围问题:

this.controls.addEventListener( 'change', this.render );
在您的班级中,添加

var scope = this;
然后重写
render()
方法,如下所示:

this.render = function () {

    scope.renderer.render( scope.scene, scope.camera );

};
另外,添加事件侦听器的目的是删除动画循环

所以…,移除它,并且仅当鼠标使相机移动时渲染

最初和加载模型后,还必须调用一次
render()


three.js r.69

您可以使用如下绑定方法,它将保留渲染方法的作用域

this.controls.addEventListener( 'change', this.render.bind(this) );