在画布或 div 中嵌套 Three.JS 渲染器答案

【问题标题】：Nesting Three.JS renderer in a canvas or div在画布或 div 中嵌套 Three.JS 渲染器
【发布时间】：2019-02-04 19:03:36
【问题描述】：

我正在尝试将 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>

【问题讨论】：

你想要canvas.clientWidth
@BenWest 仍然无法使用？

标签： javascript html css three.js

【解决方案1】：

我看到两个问题：

如果要创建具有相同渲染的多个画布，请不要为多个元素使用相同的 id，您可以使用一个类并使用循环来触发函数来渲染每个画布。
clientWith 用于您使用getElementById 或其他函数选择的节点以映射 html 节点，但窗口对象没有此方法，如果您的引用是窗口对象，您可以使用 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>

【讨论】：