javascript - THREE.CameraDolly 不是构造函数(Three.js 和 dolly.js)

Question

我真的很困惑，没有任何作用。我总是收到错误“THREE.CameraDolly 不是构造函数”。如果有人还没有注意到的话，我正在使用 Three.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 );
};

我已经在 Google 上查找过，但没有找到任何可以帮助我继续的东西。我已经包含了所有内容，我还尝试使用 onload 函数，并且还重命名了变量!

Answer 1

1. 您的 dolly.js 已更改并包含一些错误。如果您对此负责，请先调试它，或者将其替换为 original dolly.js文件。
2. 这样做会遇到以下错误:

THREE.Object3D.add:“Object { […] }”不是 THREE.Object3D 的实例。

您无法将 dolly 对象添加到 THREE.Scene 中，该脚本的作者正在将其添加到他的 GUI 中。请看the example he provided并尝试了解发生了什么。从那里调整您的代码。

dolly helper 是为 r68 编写的第三方插件，不受 Three.js 官方支持，因此您应该在项目 github 页面报告错误。