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

-2

我很努力将控件添加到在现有画布中呈现的基本three.js场景中。 HTML代码与ID =视口的一个canvas元素：如何将three.js控件添加到现有画布中

<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），但是当我尝试添加控件，它只是呈现黑屏它呈现完美的罚款。为什么？

来源

2017-10-05 Kaneda422

函数无限循环渲染 – pokeybit

尝试'var controls = new THREE.OrbitControls（camera，renderer.domElement）;' – prisoner849

@ prisoner849在发布我的问题之前，我试过了renderer.domElement。它不会工作，因为在我的html中没有domElement这样的东西。 – Kaneda422

您仍然需要通过renderer.domElement，而不是在画布本身在orbitControls拨打：

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

Per the docs，.domElement就会自动所以你不应该这样做，即使有问题创建你实际上使用canvas属性来设置它。

Working example based on your pen

编辑：和，当然也包括在您的项目OrbitControls.js。总是仔细检查你需要的功能是包含在核心的三维中，还是添加到脚本中。

来源

2017-10-05 21:29:01 AquaVitae

这是没有控件的工作示例。 https://codepen.io/anon/pen/rGpqRX – Kaneda422

是的，renderer.domElement解决了它 - 请参阅答案中的附加笔。 – AquaVitae

非常感谢。正如我之前所说，renderer.domElement是我尝试的第一件事。奇怪的是，那段时间没有工作。 – Kaneda422

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

回答

相关问题