Three.js "Uncaught TypeError: Cannot read property 'render' of undefined" error with object literal
Three.js "Uncaught TypeError: Cannot read property 'render' of undefined" error with object literal
我正在尝试将我的代码转换为对象文字样式。我可以创建场景,但我遇到了动画问题。
在这一行中,我遇到了 "Uncaught TypeError: Cannot read property 'render' of undefined" 错误。
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();
检查我修改过的例子(我借用了你的 objects
函数来渲染立方体..只是为了好玩:))
基本上,您需要使用 Function.prototype.bind
将上下文与动画方法一起传递
requestAnimationFrame(this.animate.bind(this));
..幕后发生的事情是 this.renderer.render(this.scene, this.camera);
的第一次调用发生得很好,没有问题,因为上下文是与 this.animate();
方法一起传递的。然而,第二次 animate
被调用时,通过 requestAnimationFrame
方法,上下文不存在。因此,您需要手动传递它。
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();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<div id="container"></div>
我正在尝试将我的代码转换为对象文字样式。我可以创建场景,但我遇到了动画问题。
在这一行中,我遇到了 "Uncaught TypeError: Cannot read property 'render' of undefined" 错误。
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();
检查我修改过的例子(我借用了你的 objects
函数来渲染立方体..只是为了好玩:))
基本上,您需要使用 Function.prototype.bind
将上下文与动画方法一起传递requestAnimationFrame(this.animate.bind(this));
..幕后发生的事情是 this.renderer.render(this.scene, this.camera);
的第一次调用发生得很好,没有问题,因为上下文是与 this.animate();
方法一起传递的。然而,第二次 animate
被调用时,通过 requestAnimationFrame
方法,上下文不存在。因此,您需要手动传递它。
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();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<div id="container"></div>