Question

我正在努力为现有画布中渲染的基本three.js场景添加控件。 HTML代码有一个canvas元素，其id = viewport：

<canvas id="viewport" width="640" height="480"></canvas>

这是我的Javascript代码（不工作）：

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(50, 640 / 480, 1, 1000);
    camera.position.y = 150;
    camera.position.z = 500;
    camera.lookAt( scene.position );

    var renderer = new THREE.WebGLRenderer({canvas: viewport, antialias:true});
    renderer.setSize(640, 480);
    renderer.setClearColor (0xd3d3d3, 1);

    var controls = new THREE.OrbitControls(camera, viewport);

    mesh = new THREE.Mesh( 
        new THREE.BoxGeometry(200, 200, 200, 1, 1, 1), 
        new THREE.MeshBasicMaterial({color : 0xff0000, wireframe: true}) 
    );
    scene.add(mesh);

    function render() {
        //mesh.rotation.y += 0.01;        
        renderer.render(scene, camera);
    }

    (function animate() {
        requestAnimationFrame(animate);
        controls.update();
        render();
    })();

正如您所看到的，我在这里连接到我现有的画布（并且它可以工作）：

var renderer = new THREE.WebGLRenderer({canvas: viewport, antialias:true});

当我手动旋转网格（https://codepen.io/anon/pen/rGpqRX）时渲染完全正常但是当我尝试添加控件时它只渲染黑屏。为什么会这样？

Answer 1

您还需要在orbitControls调用中传递renderer.domElement而不是画布本身：

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

Per the docs，。trueElement会自动创建，因此即使您实际使用canvas属性进行设置，也不会出现问题。

Working example based on your pen

编辑：当然，在项目中包含OrbitControls.js。始终仔细检查您需要的功能是否包含在核心三个中或添加到脚本中。

如何将three.js控件添加到现有画布

1 个答案: