Question

我试图将我的代码转换为对象文字样式。我可以创建场景，但我遇到动画问题。

在这一行中，我得到了＆＃34;未捕获的TypeError：无法读取属性＆＃39;渲染＆＃39;未定义＆＃34;错误。

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

这是我的目标：

var three = {
    objects: function() {
        /*objects*/
    },
    createScene: function() {
        this.container = document.getElementById("container");

        this.scene = new THREE.Scene();

        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, (26 * 10));
        this.camera.position.set(26, (26 / 2), 26);

        window.addEventListener("resize", function() {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        });

        this.objects();

        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.container.appendChild(this.renderer.domElement);

        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    },
    animate: function() {
        this.renderer.render(this.scene, this.camera);
        requestAnimationFrame(this.animate);
    },
    render: function() {
        this.createScene();
        this.animate();
    }
};

three.render();

Answer 1

检查我的修改示例（我借用了你的objects函数来渲染一个多维数据集......只是为了它的乐趣:)）

基本上，您需要使用Function.prototype.bind

将上下文与animate方法一起传递

requestAnimationFrame(this.animate.bind(this));

..幕后发生的事情是this.renderer.render(this.scene, this.camera);的第一次调用恰好没有问题，因为上下文与this.animate();方法一起传递。但是，通过animate方法第二次调用requestAnimationFrame时，上下文不存在。因此，您需要手动传递它。

＆＃13;

var three = {
    objects: function() {
        /*objects*/
        var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
				var material = new THREE.MeshBasicMaterial( { color: 0xffaa00 } );
				this.mesh = new THREE.Mesh( geometry, material );
        this.mesh.position.set(24, 14, 12);
				this.scene.add( this.mesh );
    },
    createScene: function() {
        this.container = document.getElementById("container");

        this.scene = new THREE.Scene();

        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, (26 * 10));
        this.camera.position.set(26, (26 / 2), 26);

        window.addEventListener("resize", function() {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        }.bind(this));

        this.objects();

        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.container.appendChild(this.renderer.domElement);
    },
    animate: function() {
        this.mesh.rotation.x += 0.005;
				this.mesh.rotation.y += 0.01;

        this.renderer.render(this.scene, this.camera);
        requestAnimationFrame(this.animate.bind(this));
    },
    render: function() {
        this.createScene();
        this.animate();
    }
};

three.render();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

<div id="container"></div>

＆＃13;

Three.js＆＃34; Uncaught TypeError：无法读取属性＆＃39;渲染＆＃39;未定义＆＃34;对象文字的错误

1 个答案: