Question

以下是我的代码：

<script type="text/javascript">
// Set scene size
var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
// WebGL's object
var container = null, renderer = null, scene = null, camera = null;
var controls = null, stats = null;
var clock = new THREE.Clock();
// Target geometry
var mesh = null;

// Initialize WebGL
function initWebGL() {
    setupRenderer();
    setupScene();
    setupCamera();
    setupLight();
}

// Initialize renderer
function setupRenderer() {
    // Create the canva element
    renderer = new THREE.WebGLRenderer({
        clearColor: 0x999999,
        clearAlpha: 1.0
    });
    renderer.setSize(WIDTH, HEIGHT);
    // Add the canvas into its container
    container = $('#canvas-container-1');
    container.append(renderer.domElement);
}

// Initialize scene
function setupScene() {
    scene = new THREE.Scene();
    render();
}

// Initialize camera
function setupCamera() {
    camera = new THREE.PerspectiveCamera(
            45,
            WIDTH / HEIGHT,
            0.1,
            1000
            );
    camera.position.set(-5, 13, 10);

    // Camera controls
    controls = new THREE.FlyControls(camera);
    controls.domElement = container;
    controls.movementSpeed = 10;
    controls.rollSpeed = Math.PI / 12;

    controls.dragToLook = true;

    scene.add(camera);
    camera.lookAt(scene.position);
}

// Add lights to the scene
function setupLight() {
    var light = new THREE.DirectionalLight(0x777777);
    light.position.set(10, 30, 20);
    scene.add(light);

    var light = new THREE.PointLight(0xFFFFFF);
    light.position.set(250, 250, 250);
    scene.add(light);
}

// Call animation loop
function update(loop) {
    // Update camera control
    controls.update(clock.getDelta());
    // Update renderer
    renderer.render(scene, camera);
    requestAnimationFrame(loop);
}

// Main mesh
function addMesh() {
    var loader = new THREE.JSONLoader();
    loader.load("models/demo/bmw.js", function(geometry) {
        // Init mesh's materials
        var materials = new THREE.MeshPhongMaterial();
        // Init mesh
        mesh = new THREE.Mesh(
                geometry,
                materials
                //geometry.materials
                );
        // Add mesh to the scene
        scene.add(mesh);
        // Animation
        (function loop() {
            //mesh.rotation.y += 0.005;
            update(loop);
        })();
    });
}

// Floor plane
function addFloor() {
    var floorTexture = new THREE.ImageUtils.loadTexture('models/textures/grey-concrete-texture-01.jpg');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(100, 100);
    var floorMaterial = new THREE.MeshBasicMaterial({
        map: floorTexture,
        side: THREE.DoubleSide
    });
    var floorGeometry = new THREE.PlaneGeometry(200, 200);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = 0;
    floor.rotation.x = Math.PI / 2;
    scene.add(floor);
}

// Rendering
function render() {
    // Mesh
    addMesh();
    // Floor
    addFloor();
}
</script>

我的模型装好了......但是发生了一些问题...

当controls.dragToLook属性为false时...刷新网页，我可以看到我加载的模型，但如果我移动鼠标，我所有加载的模型都会消失......
当controls.dragToLook属性为true时...前面的问题已经结束但是在几次点击场景后，一切都再次消失......我无法处理这个问题...

请帮助我！

Answer 1

只回复此问题，因为我跑过这个线程试图解决同样的问题。有一些运气取代：

controls = new THREE.FlyControls(camera);
controls.domElement = container;

带

controls = new THREE.FlyControls(camera, container);

注意，这并没有使我的鼠标控制工作，它只是禁用它们并阻止它们再次破坏我的项目。

我遇到了FlyControls.js的问题

1 个答案: