21

これは three.js アニメーション コードの例です。

<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 を使用してアニメーションの場所を簡単に操作できるようになります。私は次のようなことを念頭に置いていました：

html:

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

JavaScript: 

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

しかし、three.js でこのようなことを行う方法が見つかりませんでした。コード例でわかるように、参照できるキャンバス要素はありません。何か案は？

4

3 に答える 3

35

次のようなパターンを使用できます。

<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 レイ インターセクトが div を追加すると失敗するも参照してください。

three.js r.69

于 2013-07-06T22:58:51.393 に答える
0

以下は、WestLangley が示すパターンの別のバリエーションです。

HTML:

<div class="relative h-256 w-256">
    <div id="scene"></div>
</div>

CSS:

#scene {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.relative {
    position: relative;
}

.h-256 {
    height: 256px;
}

.w-256 {
    width: 256px;
}

JavaScript:

this.mount = document.querySelector('#scene');

this.width = document.querySelector('#scene').offsetWidth;
this.height = document.querySelector('#scene').offsetHeight;

...

this.renderer = new THREE.WebGLRenderer({ alpha: true });

this.renderer.setPixelRatio(window.devicePixelRatio);

this.renderer.setSize(this.width, this.height);

this.mount.appendChild(this.renderer.domElement);

Three.JS は、ラッパーを埋めるために絶対配置されたコンテナー<canvas>内の要素をレンダリングします。div#sceneサイズは、ラッパー div の寸法によって制御されます。

于 2020-11-04T17:12:25.137 に答える