Three.jsに小さなキャンバスを作る方法はありますか？

Question

私のウェブサイトにthree.jsシーンを実装したいと思います。私はそれを完了し、あなたは単にオブジェクトを回転させるためにドラッグすることができます。とにかく、私はそれが私の全体のウェブページを埋めることを望んでいません。

renderer.setSize(400,400); 

ただし、ウェブページのどこでもドラッグしてオブジェクトを回転させることができます。例えば、通常の方法でテキストをコピーすることはできません。 このウェブサイトは良い例です。 http://davidscottlyons.com/threejs/presentations/frontporch14/index.html#slide-68

同じ問題。タイトルをコピーしてみてください。ボールを少し回転させるだけです。

ありがとうございます！

Answer 1

TrackballControlsを使用していると仮定すると、TrackballControlsオブジェクトを構築するときに、マウスイベントをキャプチャするコンテナ要素の2番目の引数として指定します。 2番目の引数を指定しないと、ドキュメント全体のマウスイベントが発生します。ここで

は一例です：

// Find the document element that will host the canvas. 
var container = document.getElementById("viewContainer"); 

// Add canvas to the document element. 
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); 
renderer.setSize(targetWidth, targetHeight); 
renderer.setClearColor(0xededed, 0) 
container.appendChild(renderer.domElement); 

// Control for pan, zoom, rotate. 
controls = new THREE.TrackballControls(camera, container); 

Answer 2

あなたは、あなたのHTMLファイルにcanvas要素を作成し、CSS

てその属性を変更し、

renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas : document.getElementById('your canvas element id') });

ようWebGLRendererにそのキャンバスを渡すことができます