Гнездо Three.JS рендерера в холст или div - PullRequest
Новая
       6

Гнездо Three.JS рендерера в холст или div

0 голосов
/ 30 августа 2018

Я пытаюсь вложить средство просмотра 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>

1 Ответ

0 голосов
/ 30 августа 2018

Я вижу два вопроса:

  1. Пожалуйста, не используйте один и тот же идентификатор для нескольких элементов, если вы хотите создать несколько холстов с одинаковым рендерингом, вы можете использовать класс и использовать цикл для запуска функции для рендеринга каждого холста.

  2. 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...