把three.js放在div 2中

對於另一個基本上是另一箇舊線程副本的基本問題，我表示歉意，但我對three.js很感興趣，並且通過這裏的反覆試驗來了解更多或更少的內容。。把three.js放在div 2中

我找到了老線「把three.js所動畫div中」，他們成功地把一個three.js所動畫div中與下面的代碼行：

的

container = document.getElementById('canvas'); 
document.body.appendChild(container); 
renderer = new THREE.WebGLRenderer(); 
renderer.setSize(200, 200); 
container.appendChild(renderer.domElement);

一個的jsfiddle上面的腳本（http://jsfiddle.net/fek9ddg5/1/）

我試圖做同樣的並將這些行添加到我的腳本中，但是最終會出現一個完全白色的屏幕。我設法基本上將屏幕分爲兩部分，一部完全是白色，另一部分是劇本。然而，即使它在白色部分移動，腳本對鼠標作出反應也失敗了。我做了一個codepen，我把我添加的腳本放在註釋符號裏面。

見這裏：http://codepen.io/anon/pen/qRdGWo

來源

2017-01-08 Lavonen

平時要three.js所添加到頁面中，我會用這樣的：

renderer = new THREE.WebGLRenderer(); 
renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(window.innerWidth, window.innerHeight); 
// Add renderer to page 
document.body.appendChild(renderer.domElement); 

// Create camera. 
camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
camera.position.z = 400;

如可以在this fiddle

待觀察，但，將其添加到一個已在頁面上的div，我將使用ID'canvas-container'..

renderer = new THREE.WebGLRenderer(); 
renderer.setPixelRatio(window.devicePixelRatio); 
// get the div that will hold the renderer 
var container = document.getElementById('canvas-container'); 
var w = container.offsetWidth; 
var h = container.offsetHeight; 
renderer.setSize(w, h); 
// add the renderer to the div 
container.appendChild(renderer.domElement); 

// Create camera. 
camera = new THREE.PerspectiveCamera(70, w/h, 1, 1000); 
camera.position.z = 400;

在this fiddle中可以看到

基本上，渲染器的添加位置取決於您調用appendChild(renderer.domElement)的dom元素。

來源

2017-01-08 14:32:35 2pha

謝謝。你描述的第二個選擇正是我想要達到的目標，但結果總是相同的，一個單獨的白色標題，裏面有一個黑框......檢查此codepen：http://codepen.io/anon/pen/ qRdGWo – Lavonen

代碼的第一部分只是將渲染器添加到主體，它是第二個將其添加到div的代碼。我發佈了兩個，所以你可以看到差異，並希望瞭解它。 – 2pha

你連接的筆中的代碼是一團糟。您正在創建2個渲染器，1個webGL和1個Canvas，並將它們添加到canvas-container div – 2pha

把three.js放在div 2中

回答

相關問題