Html5 canvas 将three.js动画放入div中

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

---

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

您可以使用如下模式：

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

#帆布{
背景色：#000；
宽度：200px；
高度：200px；
边框：1px纯黑；
利润率：100像素；
填充：0px；
位置：静态；/*固定或静态*/
顶部：100px；
左：100px；
}
container=document.getElementById（'canvas'）；
文件.正文.附件（容器）；
renderer=new THREE.WebGLRenderer（）；
设置大小（200200）；
container.appendChild（renderer.doElement）；

小提琴：

也看到

---

three.js r.69

如果您不想硬编码渲染器大小，那么下面的一段代码可以帮助您。

我动态计算画布的高度和宽度，然后相应地设置渲染器的大小和相机的位置

CSS

HTML

---

下面是WestLangley所示模式的另一个变体：

HTML:

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在

div#scene

容器中渲染

元素，该容器位于填充包装器的绝对位置。大小由包装器div的尺寸控制。

但是如果宽度和高度不同怎么办。我需要它们是不同的，但这实际上改变了高度和宽度的纵横比。因此，圆圈看起来是椭圆形的。@sahilshekhawat

renderer.setSize（画布宽度、画布高度）

并确保摄像头

方面

正确。我正在使用透视摄像头的

设置大小

。没有考虑相机的纵横比。感谢

renderer.setSize

为什么要硬连线

canvas\u width

和

canvas\u height

而不是从

clientWidth

和

clientHeight

容器对象的属性中获取值？除非有充分的理由，否则我更喜欢WebGLRenderer而不是CanvasRenderer。

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

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

<div id="canvas"/>

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

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

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

.relative {
    position: relative;
}

.h-256 {
    height: 256px;
}

.w-256 {
    width: 256px;
}

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