如何解决THREE.Matrix4:.makePerspective已重新定义并具有新的签名请检查文档
我正在尝试使用three.js
的119版本(而不是r79)运行有效的three.js
代码,并且以前有效的代码现在会出现以下错误:
THREE.Matrix4: .makePerspective() has been redefined and has a new signature. Please check the docs.
,仅此一个Google命中(此问题)。我确实检查了文档,但没有找到对makePerspective
的引用。那么,如何解决以下代码(该代码显示了一些点以及可以放大和缩小的地方)?另请参见enter link description here。
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,10000);
camera.position.set(0,150);
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
clearAlpha: 1
});
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0x228B22,1);
document.body.appendChild(renderer.domElement);
// Define a standard Circle
circle = new THREE.CircleGeometry(1,20);
var max = 50;
var min = -50;
for (var i = 0; i < 100; i++) {
var object = new THREE.Mesh(circle.clone(),new THREE.MeshBasicMaterial({
color: new THREE.Color('yellow'),opacity: 0.5
}));
object.position.x = Math.random() * (max - min) + min;
object.position.y = Math.random() * (max - min) + min;
object.position.z = 0;
scene.add(object);
}
document.addEventListener('wheel',onDocumentMouseWheel,false);
function onDocumentMouseWheel(event) {
console.log("mousewheel");
var fovMAX = 100;
var fovMIN = 1;
camera.fov -= event.wheelDeltaY * 0.05;
camera.fov = Math.max(Math.min(camera.fov,fovMAX),fovMIN);
camera.projectionMatrix = (new THREE.Matrix4()).makePerspective(camera.fov,camera.near,camera.far);
}
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
</body>
解决方法
您只需要单击进入Matrix4类,然后单击到Matrix4.makePerspective
...不管哪种方式,看来您都不应该自己调用它。只需致电PerspectiveCamera.updateProjectionMatrix()
:
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,10000);
camera.position.set(0,150);
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
clearAlpha: 1
});
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0x228B22,1);
document.body.appendChild(renderer.domElement);
// Define a standard Circle
circle = new THREE.CircleGeometry(1,20);
var max = 50;
var min = -50;
for (var i = 0; i < 100; i++) {
var object = new THREE.Mesh(circle.clone(),new THREE.MeshBasicMaterial({
color: new THREE.Color('yellow'),opacity: 0.5
}));
object.position.x = Math.random() * (max - min) + min;
object.position.y = Math.random() * (max - min) + min;
object.position.z = 0;
scene.add(object);
}
document.addEventListener('wheel',onDocumentMouseWheel,false);
function onDocumentMouseWheel(event) {
var fovMAX = 100;
var fovMIN = 1;
camera.fov -= event.wheelDeltaY * 0.05;
camera.fov = Math.max(Math.min(camera.fov,fovMAX),fovMIN);
camera.updateProjectionMatrix();
}
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。