在畫布或div中嵌套Three.JS渲染器

Question

我正在嘗試將3d模型查看器與其他信息（如文本）嵌套在響應式布局中。 我正在使用window.innerWidth和window.innerHeight，但是后來我切換到.clientWidth和.clientHeight，因此渲染器大小將由css控制，但不會渲染。

我正在使用此網站尋求幫助https://greggman.com/downloads/examples/three-by-css/three-by-css.html

 <!DOCTYPE html> <html> <head> <title>threejs - basic</title> <style type="text/css"> body{ margin: 0; overflow: hidden; } canvas{ display: inline-block; background: red; width: 40%; height: 40%; } </style> </head> <body> <canvas id="myCanvas"></canvas> <canvas> <p>hi</p> </canvas> <canvas id="myCanvas"></canvas> <canvas id="myCanvas"></canvas> <canvas id="myCanvas"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script> <script > var renderer, scene, camera, myCanvas = document.getElementById('myCanvas'); //Renderer renderer = new THREE.WebGLRenderer({canvas: myCanvas, antialias: true}); renderer.setClearColor(0x000000); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.clientWidth, window.clientHeight); //Camera camera = new THREE.PerspectiveCamera(50, canvas.clientWidth / window.clientHeight, .01, 3000); //Scene scene = new THREE.Scene(); //Lights var light = new THREE.AmbientLight(0xffffff, 0.5); scene.add(light); var light2= new THREE.PointLight(0xffffff, 0.5); scene.add(light2); var geometry = new THREE.BoxGeometry(100,100); //Geometry Material var material = new THREE.MeshLambertMaterial({color:0xF3FFE2}); var mesh = new THREE.Mesh(geometry, material); mesh.position.z = -1000; scene.add(mesh); //RenderLoop render(); var delta = 0; function render(){ //RotateMeshes mesh.rotation.x += .0001 mesh.rotation.y += .001 mesh.rotation.z += .001 //ActiveVertices delta += 0.1; geometry.vertices[0].x = -25 + Math.sin(delta) * 50; geometry.verticesNeedUpdate = true; renderer.render(scene, camera); requestAnimationFrame(render); }; </script> </body> </html>

Answer 1

我看到兩個問題：

如果要使用相同的渲染創建多個畫布，請不要對多個元素使用相同的id，可以使用一個類並使用循環來觸發函數來渲染每個畫布。
clientWith用於使用getElementById或其他函數選擇的節點來映射html節點，但是window對象沒有此方法，如果您的引用是window對象，則可以使用innerWidth和innerHeight，在這種情況下，我看到了畫布大小是視口的40% ，則可以使用window.innerHeight * 0.40 。

希望對您有幫助

 <!DOCTYPE html> <html> <head> <title>threejs - basic</title> <style type="text/css"> body{ margin: 0; overflow: hidden; } canvas{ display: inline-block; background: red; width: 40%; height: 40%; } </style> </head> <body> <canvas id="myCanvas"> <p>hi</p> </canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script> <script > var myCanvas = document.getElementById('myCanvas'); //Renderer var renderer = new THREE.WebGLRenderer({canvas: myCanvas, antialias: true}); renderer.setClearColor(0x000000); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth * 0.40, window.innerHeight * 0.40); //Camera var camera = new THREE.PerspectiveCamera(50, ( window.innerWidth * 0.40) / ( window.innerHeight * 0.40 ), .01, 3000); //Scene var scene = new THREE.Scene(); //Lights var light = new THREE.AmbientLight(0xffffff, 0.5); scene.add(light); var light2= new THREE.PointLight(0xffffff, 0.5); scene.add(light2); var geometry = new THREE.BoxGeometry(100,100); //Geometry Material var material = new THREE.MeshLambertMaterial({color:0xF3FFE2}); var mesh = new THREE.Mesh(geometry, material); mesh.position.z = -1000; scene.add(mesh); //RenderLoop render(); var delta = 0; function render(){ //RotateMeshes mesh.rotation.x += .0001 mesh.rotation.y += .001 mesh.rotation.z += .001 //ActiveVertices delta += 0.1; geometry.vertices[0].x = -25 + Math.sin(delta) * 50; geometry.verticesNeedUpdate = true; renderer.render(scene, camera); requestAnimationFrame(render); }; </script> </body> </html>

在畫布或div中嵌套Three.JS渲染器

問題描述

1 個解決方案

解決方案1
2 2018-08-29 22:59:22

在畫布或div中嵌套Three.JS渲染器

問題描述

1 個解決方案

解決方案1 2 2018-08-29 22:59:22

解決方案1
2 2018-08-29 22:59:22