Three.js Orbit控件无法与JSON加载器一起使用

时间:2018-12-25 23:01:09

标签: three.js

我已经将一个简单的JSON对象加载到threejs中,并且正在尝试添加轨道控件。但是,我似乎无法使控件正常工作。我收到此警告:

警告:OrbitControls.js遇到未知的摄像头类型-禁用了多莉/变焦。

即使我已经安装了透视相机。仍在学习threejs-可能是一个非常简单的修复程序,我只是看不到。

<canvas id="myCanvas"></canvas>

<script src="three.js"></script>
<script src="OrbitControls.js"></script>


<script>

var renderer,
    scene,
    camera,
    myCanvas = document.getElementById('myCanvas');

//RENDERER
renderer = new THREE.WebGLRenderer({
  canvas: myCanvas,
  antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

//CAMERA
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000 );

//SCENE
scene = new THREE.Scene();

controls = new THREE.OrbitControls ( camera, renderer.domElement );

//LIGHTS
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

var light2 = new THREE.PointLight(0xffffff, 0.5);
scene.add(light2);

var loader = new THREE.JSONLoader();
loader.load('snake1.json', handle_load);

var mesh;
var mixer;

function handle_load(geometry, materials) {

    //BASIC MESH
    // var material = new THREE.MultiMaterial(materials);
    // mesh = new THREE.Mesh(geometry, material);
    // scene.add(mesh);
    // mesh.position.z = -10;

    //ANIMATION MESH
    var material = new THREE.MeshLambertMaterial({morphTargets: true});

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    mesh.position.z = -10;


    //MIXER
    mixer = new THREE.AnimationMixer(mesh);

    var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('talk', geometry.morphTargets, 30);
    mixer.clipAction(clip).setDuration(1).play();
}


//RENDER LOOP
render();

var delta = 0;
var prevTime = Date.now();

function render() {

    delta += 0.1;

    if (mesh) {

        mesh.rotation.y += 0.01;

        //animation mesh
        // mesh.morphTargetInfluences[ 0 ] = Math.sin(delta) * 20.0;
    }

    if (mixer) {
        var time = Date.now();
        mixer.update((time - prevTime) * 0.001);
        prevTime = time;
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

</script>

0 个答案:

没有答案