如何將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控件添加到現有畫布中

回答

相關問題