将three.js动画放入div中 [英] Putting three.js animation inside of div

问题描述

这是three.js动画代码示例:

This is three.js animation code example:

<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>

我想将此动画代码通过div ID绑定到某个特定的div.因此，动画将显示在div内部.这将使我能够轻松地使用CSS操纵动画位置.我当时想到的是这样的:

I would like to bind this animation code to some specific div via div id. So, animation would be displayed inside of div. That would allow me to easily manipulate animation location with css. I was having in mind something like this:

html:

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

javascript:

javascript:

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

但是我还没有找到一种方法来使用three.js做这样的事情.如您在代码示例中看到的，没有我可以引用的canvas元素.有什么想法吗?

But I haven't found a way to do something like this with three.js. As you can see in code example, there is no canvas element that I can refer to. Any ideas?

推荐答案

您可以使用如下所示的模式:

You can use a pattern like the following:

<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 );

小提琴: http://jsfiddle.net/fek9ddg5/1/

另请参见 THREE.js Ray Intersect失败的原因添加div

three.js r.69

three.js r.69

这篇关于将three.js动画放入div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！