0
我真的很迷茫，没有什么工作。我总是得到错误“THREE.CameraDolly不是构造函数”。如果有人没有注意到它，我使用Three.js。THREE.CameraDolly不是构造函数（three.js所＆dolly.js）
我的脚本：
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 1, 1000);
var cameraDolly = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 1, 1000);
var renderer = new THREE.WebGLRenderer();
...
//LookAt & Camera Position Points
var points = {
"camera": [
{
"x": 100,
"y": 60,
"z": 40
},
{
"x": -20,
"y": 5,
"z": -10
},
{
"x": 30,
"y": 10,
"z": -5
}
],
"lookat": [
{
"x": 50,
"y": 30,
"z": 35
},
{
"x": 0,
"y": 2,
"z": 0
},
{
"x": 12,
"y": 8,
"z": -0.2
}
]
};
//Clock
var clock = new THREE.Clock(true);
//CameraDolly
***var dolly = new THREE.CameraDolly (cameraDolly, scene, points);***//Here I got the error
scene.add(dolly, 'cameraPosition', 0, 1);
scene.add(dolly, 'lookatPosition', 0, 1);
function update() {
requestAnimationFrame(update);
render(cameraDolly, 0.75, 0, 0.25, 0.25);
var delta = clock.getElapsedTime() * 0.2;
var position = THREE.Math.mapLinear(Math.sin(delta), -1, 1, 0, 1);
dolly.cameraPosition = position;
dolly.lookatPosition = position;
dolly.update();
};
function render() {
renderer.render(scene, cameraDolly);
};
render();
update();
而且dolly.js：
/**
* @author DPR/http://ivxvixviii.io
*/
THREE.CameraDolly = function (camera, scene, points){
this.cameraPosition = 0;
this.lookatPosition = 0;
this.camera = camera;
this.scene = scene;
this.cameraPoints = points.camera;
this.lookatPoints = points.lookat;
this.bounds = 100;
}
// Lookat position Marker
this.lookatPositionMarker = this.createMarker(0xFF0000);
this.scene.add(this.lookatPositionMarker);
// Camera path markers
this.markers = [];
if(this.gui){
var cameraPointsFolder = this.gui.addFolder('cameraPointsFolder');
cameraPointsFolder.open();
}
var _this = this;
for(var i = 0; i < this.cameraPoints.length; ++i){
if(this.gui){
var point = this.cameraPoints[i];
var folder = cameraPointsFolder.addFolder('marker-' + i);
folder.add(point, 'x', -this.bounds, this.bounds).onChange(function(){
_this.createCurves();
});
folder.add(point, 'y', -this.bounds, this.bounds).onChange(function(){
_this.createCurves();
});
folder.add(point, 'z', -this.bounds, this.bounds).onChange(function(){
_this.createCurves();
});
// folder.open();
}
var marker = this.createMarker(0x00FF00);
this.scene.add(marker);
this.markers.push(marker);
};
// Camera lookat path markers
this.lookatMarkers = [];
if(this.gui){
var lookatPointsFolder = this.gui.addFolder('lookatPointsFolder');
lookatPointsFolder.open();
}
for(var i = 0; i < this.lookatPoints.length; ++i){
if(this.gui){
var point = this.lookatPoints[i];
var folder = lookatPointsFolder.addFolder('marker-' + i);
folder.add(point, 'x', -this.bounds, this.bounds).onChange(function(){
_this.createCurves();
});
folder.add(point, 'y', -this.bounds, this.bounds).onChange(function(){
_this.createCurves();
});
folder.add(point, 'z', -this.bounds, this.bounds).onChange(function(){
_this.createCurves();
});
// folder.open();
}
var marker = this.createMarker(0x0000FF);
this.scene.add(marker);
this.lookatMarkers.push(marker);
};
this.createCurves();
this.update();
};
THREE.CameraDolly.prototype.createCurves = function(){
// Camera curve
this.scene.remove(this.pathCurve);
var points = [];
for (var i = 0; i < this.cameraPoints.length ; ++i) {
var point = this.cameraPoints[i];
var vec = new THREE.Vector3(point.x, point.y, point.z);
this.markers[i].position.set(point.x, point.y, point.z);
points.push(vec);
};
var spline = this.createSpline(points);
var points = spline.getPoints(50);
this.cameraSpline = this.createSpline(points);
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({ 0xFFFFFF*Math.random() } /*{ transparent: true, opacity: 0 }*/);
points.forEach(function(point){
geometry.vertices.push(point.clone());
});
this.pathCurve = new THREE.Line(geometry, material);
this.scene.add(this.pathCurve);
// Lookat curve
this.scene.remove(this.pathLookatCurve);
var points = [];
for (var i = 0; i < this.lookatPoints.length ; ++i) {
var point = this.lookatPoints[i];
var vec = new THREE.Vector3(point.x, point.y, point.z);
this.lookatMarkers[i].position.set(point.x, point.y, point.z);
points.push(vec);
};
var spline = this.createSpline(points);
var points = spline.getPoints(50);
this.cameralookatSpline = this.createSpline(points);
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({ 0xFFFFFF*Math.random() } /*{ transparent: true, opacity: 0 }*/);
points.forEach(function(point){
geometry.vertices.push(point.clone());
});
this.pathLookatCurve = new THREE.Line(geometry, material);
this.scene.add(this.pathLookatCurve);
this.update();
};
THREE.CameraDolly.prototype.createSpline = function(points) {
var tmp = [];
for(var i = 0; i < points.length; ++i){
tmp.push(points[i].clone());
};
return new THREE.SplineCurve3(tmp);
}
THREE.CameraDolly.prototype.createMarker = function(color){
var geometry = new THREE.SphereGeometry(1, 4, 4);
var material = new THREE.MeshBasicMaterial({color: color /*transparent: true, opacity: 0*/ });
return new THREE.Mesh(geometry, material);
};
THREE.CameraDolly.prototype.update = function(){
var position = this.cameraSpline.getPointAt(this.cameraPosition);
this.camera.position.copy(position);
position = this.cameralookatSpline.getPointAt(this.lookatPosition);
this.lookatPositionMarker.position.copy(position);
this.camera.lookAt(this.lookatPositionMarker.position);
};
THREE.CameraDolly.prototype.exportPositions = function(){
var data = {
camera: [],
lookat: []
};
this.cameraPoints.forEach(function(point){
data.camera.push({
x: point.x,
y: point.y,
z: point.z
})
});
this.lookatPoints.forEach(function(point){
data.lookat.push({
x: point.x,
y: point.y,
z: point.z
})
});
var json = JSON.stringify(data, undefined, 4);
window.prompt('Copy to clipboard: Ctrl+C, Enter', json);
};
我已经看过在谷歌，但我没有找到任何可以帮助我连续。我已经包括了所有内容，我也用onload函数尝试了它，并且我也重命名了这些变量！