Umieszczenie three.js animacji wewnątrz div

Question

to Three.js przykład kod Animacja

<script defer="defer"> 
    var angularSpeed = 0.2; 
    var lastTime = 0; 
    function animate(){ 
    var time = (new Date()).getTime(); 
    var timeDiff = time - lastTime; 
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI/1000; 
    plane.rotation.z += angleChange; 
    lastTime = time; 
    renderer.render(scene, camera); 
    requestAnimationFrame(function(){ 
     animate(); 
    }); 
    } 
    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.y = -450; 
    camera.position.z = 400; 
    camera.rotation.x = 45 * (Math.PI/180); 
    var scene = new THREE.Scene(); 
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshNormalMaterial()); 
    plane.overdraw = true; 
    scene.add(plane); 
    animate(); 
</script> 

ja jak wiązanie kod animacji do określonych div poprzez div id. Tak więc animacja będzie wyświetlana wewnątrz elementu div. To pozwoliłoby mi łatwo manipulować lokalizacją animacji za pomocą css. Miałem na myśli coś takiego:

html:

<canvas id="myCanvas" width="578" height="200"></canvas> 

javascript:

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
// do stuff here 

Ale nie znaleźli sposób, aby zrobić coś takiego z three.js. Jak widać w przykładzie kodu, nie ma elementu canvas, do którego mogę się odwołać. Jakieś pomysły?

Answer 1

Można użyć wzoru jak poniżej:

<div id="canvas"> 

#canvas { 
    background-color: #000; 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    margin: 100px; 
    padding: 0px; 
    position: static; /* fixed or static */ 
    top: 100px; 
    left: 100px; 
} 

container = document.getElementById('canvas'); 
document.body.appendChild(container); 

renderer = new THREE.WebGLRenderer(); 
renderer.setSize(200, 200); 
container.appendChild(renderer.domElement); 

Fiddle: http://jsfiddle.net/fek9ddg5/1/

zobaczyć również THREE.js Ray Intersect fails by adding div

Three.js r.69

Answer 2

Jeśli nie chcesz kodować renderera, a pod kodem kodu może ci pomóc.

Dynamicznie obliczam wysokość i szerokość płótna, a następnie odpowiednio ustawię rozmiar renderer'a i położenie kamery.

CSS

  #canvas { 
      background-color: #FFF; 
      width: 200px; 
      height:200px; 
      border: 1px solid black; 
       } 

HTML

<div id="canvas"/> 

JavaScript

  //Add Renderer 
     renderer = new THREE.CanvasRenderer(); 
     var container = document.getElementById('canvas'); 
     var w = container.offsetWidth; 
     var h = container.offsetHeight; 
     renderer.setSize(w, h); 
     container.appendChild(renderer.domElement); 

     //Add Camera 
     camera = new THREE.PerspectiveCamera(75, w/h, 2, 1000); 
     camera.position.z = 400; 

     //Create Scene with geometry, material-> mesh 
     scene = new THREE.Scene(); 
     geometry = new THREE.IcosahedronGeometry(200, 3); 
     material = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true, wireframeLinewidth: 1 }); 
     mesh = new THREE.Mesh(geometry, material); 
     scene.add(mesh);